PDA

View Full Version : using a regular counter loop for user to input own info to a placed marker



kwood30
02-21-2016, 05:53 PM
I am trying to allow a user to input their own info in to their place make, say a reference number for example, but am struggling to do so. I believe the way for this is a regular counter loop, but i am not sure how and where to put it and even if that is the right thing to do. Can anyone help me with this please. The code below is what I have managed to do so far.

<!DOCTYPE html>
<html>

<head>



<!-- Google Maps and Places API -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">

var markers = [];

function createMarker(latlng, html, map) {
var infowindow = new google.maps.InfoWindow({
content: html
});
var marker = new google.maps.Marker({
map: map,
position: latlng
});
marker.addListener('mouseover', function() {
infowindow.open(map, this);
});
marker.addListener('mouseout', function() {
infowindow.close();
});
markers.push(marker);
}

//declare namespace
var up206b = {};

//declare map
var map;

function trace(message) {
if (typeof console != 'undefined') {
console.log(message);
}
}

up206b.initialize = function() {
var latlng = new google.maps.LatLng(52.136436, -0.460739);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
up206b.geocode();
}

var geocoder = new google.maps.Geocoder();

up206b.geocode = function() {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = [];
var bounds = new google.maps.LatLngBounds();
var addresses = [$('#address').val(), $('#address2').val()];

addresses.forEach(function(address) {
if (address) {
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
createMarker(results[0].geometry.location, address, map);
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
});
}


</script>
</head>
<body onload="up206b.initialize()">

<div style="top: 0; right: 0; width:380px; height: 500px; float:right; padding-left:10px; padding-right:10px;">
<h1 align="center">Map Search</h1>

<div style="border:1px solid #ccc; background:#e5e5e5; padding:10px;" >

<form >
<br>
Location 1 <input type="text" id="address">
<br>
<br>
Location 2
<input type="text" id="address2">
<br>
<br>
<input type="button" value="Submit" onClick="up206b.geocode()">
</form>
</div>

</div>

<div id="map_canvas" style="height: 500px; width: 500px; float:right"></div>

</body>
</html>

jscheuer1
02-21-2016, 08:35 PM
Not sure what you're getting at. The code you have appears to work. What exactly is the problem? One thing, sensor is deprecated, so it's best to remove it (highlighted):


<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>

But since this is only a deprecation, it's not currently hurting anything. And, as I say, the code seems to work quite well. I hear that you want to create a reference number, and - yes, that's not happening. But to what end would this reference number be? Is it so that in the future the same and/or other users could retrieve the same results from that number without having to re-enter the place name(s)? Something else?

In any case, that sort of thing implies either some sort of storage or some intrinsic extant numbering system that can be co-opted for that purpose. Storage can be achieved client side with cookies and/or local storage. But at that rate, why not just store the search itself? And regardless, client side storage can easily be lost and is not available across devices (possible exception if one uses a cloud based/accessible browser) or even on the same device if a different browser is used. If some other sort of storage (server side) is desired, something other than javascript will be needed (like PHP, or asp, etc.).

If you are storing locally with cookies or whatever, no loops would be needed, you could just use the next available number for that person. If you want a universal reference number, that would depend upon the api (if it even provides for that), or upon a server side system that could be devised.

If you have thought about and/or know about some of these things, could you clarify what you want to do. If not, could you please be more specific about what you envision the user experience being? Say, would they get a number and then later be able to enter that number for the same result as the initial more verbose search? Is that the idea, or do you have something else in mind?

kwood30
02-22-2016, 10:04 AM
Thank you for your reply and I appreciate your time and in depth response. I am not really needing any data stored, it will be just to work whilst the user is on at that time, if they re enter the page again at a later time for example they would just start again.
What my general goal is, is for the user to be able to submit two separate locations that then are simultaneously marked with a mouse over 'info box' which i have currently achieved myself. What my end goal is, is to be able to then allow that user to submit a reference number to each marker so when the markers are moused over the markers will display the reference number entered by the user, but then also following this when the user selects(clicks on) one of the two placed markers the 'information box' is also displayed in a separate <div></div> at the left side of the map.
I hope this makes more sense and that you can help and guide me?
Many thanks

jscheuer1
02-22-2016, 04:07 PM
OK, still not clear to me, but is this something like you are looking for? Additions highlighted, when using this updated page, look in the upper left corner for the supplemental info div when hovering a marker:


<!DOCTYPE html>
<html>

<head>

<style type="text/css">
#supplementwindow {
display: none;
position: absolute;
left: 10px;
top: 10px;
}
</style>

<!-- Google Maps and Places API -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">

var markers = [];

function createMarker(latlng, html, map) {
var infowindow = new google.maps.InfoWindow({
content: html
});
var marker = new google.maps.Marker({
map: map,
position: latlng
});
marker.addListener('mouseover', function() {
infowindow.open(map, this);
$('#supplementwindow').html(latlng + '<br>' + html).fadeIn();
});
marker.addListener('mouseout', function() {
infowindow.close();
$('#supplementwindow').fadeOut();
});
markers.push(marker);
}

//declare namespace
var up206b = {};

//declare map
var map;

function trace(message) {
if (typeof console != 'undefined') {
console.log(message);
}
}

up206b.initialize = function() {
var latlng = new google.maps.LatLng(52.136436, -0.460739);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
up206b.geocode();
}

var geocoder = new google.maps.Geocoder();

up206b.geocode = function() {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = [];
var bounds = new google.maps.LatLngBounds();
var addresses = [$('#address').val(), $('#address2').val()];

addresses.forEach(function(address) {
if (address) {
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
createMarker(results[0].geometry.location, address, map);
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
});
}


</script>
</head>
<body onload="up206b.initialize()">

<div style="top: 0; right: 0; width:380px; height: 500px; float:right; padding-left:10px; padding-right:10px;">
<h1 align="center">Map Search</h1>

<div style="border:1px solid #ccc; background:#e5e5e5; padding:10px;" >

<form >
<br>
Location 1 <input type="text" id="address">
<br>
<br>
Location 2
<input type="text" id="address2">
<br>
<br>
<input type="button" value="Submit" onClick="up206b.geocode()">
</form>
</div>

</div>

<div id="map_canvas" style="height: 500px; width: 500px; float:right"></div>
<div id="supplementwindow"></div>
</body>
</html>

kwood30
02-22-2016, 08:52 PM
Thank you ever so much as that is part of what I was wanting.
The part that I still would like is the user interaction. Hopefully this will make more sense.
Currently when you mouse over the markers that have been placed by the user through submitting either a location or postcode, an information box appears with the postcode in it and now is also displayed next to the map thanks to your help. That information box I would like the user to be able to change it, by entering reference number that they can submit and it replaces the postcode in that information box with whatever they have submitted. Hopefully this is a better explanation of what I want to do lol

jscheuer1
02-22-2016, 10:23 PM
I'm pretty sure we can get the information flowing in both directions. It would just be another submission, just one that doesn't use the form, which is only a convenient way to submit information in the first place. The javascript coding is what does the real work anyway. I'm still trying to fully understand the user experience you want people to have. It sounds like this supplemental info box would have to remain after mouseout of the marker and be able to be edited. And then, as a result of that, change the marker? Is that the point? If so, what exactly is meant by "change it, by entering reference number that they can submit and it replaces the postcode" Where did they get this reference number? I used the latitude and longitude, as those are readily available and shouldn't be too hard to reverse to an actual location (though the name or postal code of that location might not be available, only its coordinates on the map) but we could play around and see.

kwood30
02-23-2016, 10:13 AM
Not to change the marker just the information displayed when mouse overed. Basically what I am trying to get the end result to look like and do is have three input fields, first and second input field for marker loaction and third input field for a reference number then the submit button. When the input fields are completed by a user the markers will appear and when mouse overed the inputted reference number will show.
I have managed the first two input fields just not the third. Have been research with not much luck. I have come across this, but I am not sure what to do with it and whether it would do what i need.
Having fields called "address1", "reference1", "address2", "reference2", etc. Then use a regular for loop, e.g. for (i = 1; i <= number_of_fields; i++), and use that in variable to get each pair of fields to make the marker and assign the mouse handlers. What are your thoughts. Does this help make a better understand on what I am trying to accomplish? I really to appreciate your help

jscheuer1
02-23-2016, 03:57 PM
I'm getting a better idea. We can add one or two more fields. I'm laughing a little because first you say 3 fields (2 locations and a reference number), then you say 4 fields (2 locations, each with a reference number). It would help to know which. What would this reference number be? Would it be just any number the user decides to put in? If that's it, it would be easy to use it in the popup when it's moused over, either one for each marker (four total fields) or one that is shown for both of them (three total fields). As for a loop, I think there already is a loop for the markers, we can use that, simply get it to do something different with the reference numbers (if the four input scheme) or ignore it and use it for both markers (the three input scheme) so which is it? And again, is this number(s) arbitrary, just something the user dreams up? If not, where would it come from?

kwood30
02-23-2016, 04:30 PM
The four fields was from the example I found online. Its the three input scheme that I would like to implement. But would be interested to know for the four scheme too, but don't worry if you don't want too, it just helps with my learning and development. It is for what ever number or text a user 'dreams up'. Also I am not sure if I can post anymore as it states I only get 5 posts as a new comer which is strange, so not sure if I would be able to reply to your next post, so if i can't post i will click the thanks on your next comment so you know lol. again I am really grateful for your help.

jscheuer1
02-23-2016, 06:21 PM
You can post again, it means that after 5 posts you become the next level, also a certain amount of time is required though before that happens. Looks like you have it though, as you're a junior coder now, no longer a beginner (less than 5 posts was descriptive, not a limit). What you read was either poorly worded, or you misunderstood it.

OK, so we will start with three inputs, reference arbitrary and user defined, with the same reference number/string appearing in both marker's popup. I will keep the additional popup for now, as I've been playing with it, it's easier to get rid of than to bring back and can always be commented out or disabled in other ways. I may have time to do the coding later today. Tomorrow probably at the latest.

jscheuer1
02-23-2016, 09:20 PM
You can post again, don't worry. OK, try this out:


<!DOCTYPE html>
<html>

<head>

<style type="text/css">
#supplementwindow {
display: none;
position: absolute;
right: 150px;
top: 300px;
border: 1px solid #bbb;
padding: 5px;
border-radius: 12px;
}
</style>

<!-- Google Maps and Places API -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">

var markers = [];

function createMarker(latlng, html, map) {
var latlngtxt = (latlng.lat() + ',' + latlng.lng()).split(',');
$.each(latlngtxt, function(i, v){
v = Math.round(v);
v += v > 0? (i? 'E' : 'N') : (i? 'W' : 'S');
latlngtxt[i] = v.replace(/^-/, '');
});
latlngtxt = latlngtxt.join(', ');
var ref = $('#reference').val()? $('#reference').val() + '<br>' : '';
var infowindow = new google.maps.InfoWindow({
content: ref + '#' + (markers.length + 1) + '<br>' + html + '<br>' + latlngtxt
});
var marker = new google.maps.Marker({
map: map,
position: latlng,
html: html,
infowindow: infowindow
});
marker.addListener('mouseover', function() {
infowindow.open(map, this);
$('#supplementwindow').html(infowindow.content).fadeIn();
});
marker.addListener('mouseout', function() {
infowindow.close();
$('#supplementwindow').fadeOut();
});
markers.push(marker);
}

//declare namespace
var up206b = {};

//declare map
var map;

function trace(message) {
if (typeof console != 'undefined') {
console.log(message);
}
}

up206b.initialize = function() {
var latlng = new google.maps.LatLng(52.136436, -0.460739);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
up206b.geocode();
}

var geocoder = new google.maps.Geocoder();

up206b.geocode = function() {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = [];
var bounds = new google.maps.LatLngBounds();
var addresses = [$('#address').val(), $('#address2').val()];

addresses.forEach(function(address) {
if (address) {
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
createMarker(results[0].geometry.location, address, map);
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
});
}


</script>
</head>
<body onload="up206b.initialize()">

<div style="top: 0; right: 0; width:380px; height: 500px; float:right; padding-left:10px; padding-right:10px;">
<h1 align="center">Map Search</h1>

<div style="border:1px solid #ccc; background:#e5e5e5; padding:10px;" >

<form >
<br>
Location 1 <input type="text" id="address">
<br>
<br>
Location 2
<input type="text" id="address2">
<br>
<br>
Reference&nbsp;
<input type="text" id="reference">
<br>
<br>
<input type="button" value="Submit" onClick="up206b.geocode()">
</form>
</div>

</div>

<div id="map_canvas" style="height: 500px; width: 500px; float:right"></div>
<div id="supplementwindow"></div>
</body>
</html>

kwood30
02-24-2016, 08:58 AM
Oh ok I can see i am a 'junior coder' now lol. What i was reading was the (less than 5 posts) next to my name on my reply posts so just made the presumption.
Thank you so much, I really look forward to getting it, been working so hard to figure out. Really appreciate it, thank you.

jscheuer1
02-24-2016, 01:08 PM
This sometimes happens when there are two replies since your previous reply. One is missed. If that happened, here it is again. Try out this code and let me know what you think. If you already have this version, well - I would still appreciate knowing if you have any questions. This is a version with one reference field in the form. If entered, the reference number appears in the popups:


<!DOCTYPE html>
<html>

<head>

<style type="text/css">
#supplementwindow {
display: none;
position: absolute;
right: 150px;
top: 300px;
border: 1px solid #bbb;
padding: 5px;
border-radius: 12px;
}
</style>

<!-- Google Maps and Places API -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">

var markers = [];

function createMarker(latlng, html, map) {
var latlngtxt = (latlng.lat() + ',' + latlng.lng()).split(',');
$.each(latlngtxt, function(i, v){
v = Math.round(v);
v += v > 0? (i? 'E' : 'N') : (i? 'W' : 'S');
latlngtxt[i] = v.replace(/^-/, '');
});
latlngtxt = latlngtxt.join(', ');
var ref = $('#reference').val()? $('#reference').val() + '<br>' : '';
var infowindow = new google.maps.InfoWindow({
content: ref + '#' + (markers.length + 1) + '<br>' + html + '<br>' + latlngtxt
});
var marker = new google.maps.Marker({
map: map,
position: latlng,
html: html,
infowindow: infowindow
});
marker.addListener('mouseover', function() {
infowindow.open(map, this);
$('#supplementwindow').html(infowindow.content).fadeIn();
});
marker.addListener('mouseout', function() {
infowindow.close();
$('#supplementwindow').fadeOut();
});
markers.push(marker);
}

//declare namespace
var up206b = {};

//declare map
var map;

function trace(message) {
if (typeof console != 'undefined') {
console.log(message);
}
}

up206b.initialize = function() {
var latlng = new google.maps.LatLng(52.136436, -0.460739);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
up206b.geocode();
}

var geocoder = new google.maps.Geocoder();

up206b.geocode = function() {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = [];
var bounds = new google.maps.LatLngBounds();
var addresses = [$('#address').val(), $('#address2').val()];

addresses.forEach(function(address) {
if (address) {
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
createMarker(results[0].geometry.location, address, map);
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
});
}


</script>
</head>
<body onload="up206b.initialize()">

<div style="top: 0; right: 0; width:380px; height: 500px; float:right; padding-left:10px; padding-right:10px;">
<h1 align="center">Map Search</h1>

<div style="border:1px solid #ccc; background:#e5e5e5; padding:10px;" >

<form >
<br>
Location 1 <input type="text" id="address">
<br>
<br>
Location 2
<input type="text" id="address2">
<br>
<br>
Reference&nbsp;
<input type="text" id="reference">
<br>
<br>
<input type="button" value="Submit" onClick="up206b.geocode()">
</form>
</div>

</div>

<div id="map_canvas" style="height: 500px; width: 500px; float:right"></div>
<div id="supplementwindow"></div>
</body>
</html>

kwood30
02-24-2016, 04:00 PM
This is great thank you. Just one small question, and it properly easy for someone with your talent, but what part would you slight change or remove to allow only the reference number to be displayed in the pop ups and not the #1 or #2, postcode and coordinates as well. Really sorry to be a pain to ask. thank you again.

jscheuer1
02-24-2016, 06:32 PM
Here is where we set the template for what information is included:


var infowindow = new google.maps.InfoWindow({
content: ref + '#' + (markers.length + 1) + '<br>' + html + '<br>' + latlngtxt
});

ref = the value of the reference field and, if it has any value, a line break.
'#' is the literal hash symbol
(markers.length + 1) = the number 1 or 2, whether this is the location 1 or the location 2 field
'<br>' is a literal line break
html is the value of this location field (either the place name or postal code)
latlngtxt is a text representation of the latitude and longitude, each rounded to the nearest degree, with directional abbr (NSEW)

So, if you want only the reference number, you would change all that to:


var infowindow = new google.maps.InfoWindow({
content: ref
});

But since it's possible to have no reference, maybe you should go like:


var infowindow = new google.maps.InfoWindow({
content: ref || html
});

That way, if there is no reference number it will at least have something. The || means logical or. So if there is a reference number it will be only that. If not, it will be the place name or postal code as entered into the respective location field for that marker.

kwood30
02-24-2016, 10:25 PM
Fantastic, thank you every so much. Surprisingly for me that all actually makes sense. This is great for my learning of this, as i find it much more complex compared to HTML and CSS that I can do lol. All this is self taught too so its nice having you to help and support me.
You don't have to show me, as you have done a great deal for me already, but I would be interested to see what we would need to do for adding a different reference number per marker. Through some observations I would like to make a guess to see if I am on the right sort of track:

var ref = $('#reference').val()? $('#reference').val() + '<br>' : '';
Would we need to add here somewhere a #reference2 and then include another input function box with id="reference2"?

jscheuer1
02-25-2016, 02:51 AM
I think that's where I would look to work first. I've already modified the code a little more to make sure that the reference isn't just spaces. To count that as an empty reference. Changing the line you have to two:


var ref = $.trim($('#reference').val());
ref = ref? ref + '<br>' : '';

But that's still only for one reference.

Here it is with two possible references, if a reference is missing, the place name or postal code that was entered for that location will be used. If one reference is there, that will be used for its marker. Try it out:


<!DOCTYPE html>
<html>

<head>

<style type="text/css">
#supplementwindow {
display: none;
position: absolute;
right: 150px;
top: 350px;
border: 1px solid #bbb;
padding: 5px;
border-radius: 12px;
}
</style>

<!-- Google Maps and Places API -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">

var markers = [];

function createMarker(latlng, html, map) {
var latlngtxt = (latlng.lat() + ',' + latlng.lng()).split(',');
$.each(latlngtxt, function(i, v){
v = Math.round(v);
v += v > 0? (i? 'E' : 'N') : (i? 'W' : 'S');
latlngtxt[i] = v.replace(/^-/, '');
});
latlngtxt = latlngtxt.join(', ');
var ref = $.trim($('.reference').eq(markers.length).val());
ref = ref? ref + '<br>' : '';
var infowindow = new google.maps.InfoWindow({
content: ref || html
});
var marker = new google.maps.Marker({
map: map,
position: latlng,
html: html,
infowindow: infowindow
});
marker.addListener('mouseover', function() {
infowindow.open(map, this);
$('#supplementwindow').html(infowindow.content).fadeIn();
});
marker.addListener('mouseout', function() {
infowindow.close();
$('#supplementwindow').fadeOut();
});
markers.push(marker);
}

//declare namespace
var up206b = {};

//declare map
var map;

function trace(message) {
if (typeof console != 'undefined') {
console.log(message);
}
}

up206b.initialize = function() {
var latlng = new google.maps.LatLng(52.136436, -0.460739);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
up206b.geocode();
}

var geocoder = new google.maps.Geocoder();

up206b.geocode = function() {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = [];
var bounds = new google.maps.LatLngBounds();
var addresses = [$('#address').val(), $('#address2').val()];

addresses.forEach(function(address) {
if (address) {
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
createMarker(results[0].geometry.location, address, map);
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
});
}


</script>
</head>
<body onload="up206b.initialize()">

<div style="top: 0; right: 0; width:380px; height: 500px; float:right; padding-left:10px; padding-right:10px;">
<h1 align="center">Map Search</h1>

<div style="border:1px solid #ccc; background:#e5e5e5; padding:10px;" >

<form >
<br>
Location 1 <input type="text" id="address">
<br>
<br>
Reference&nbsp;
<input type="text" class="reference">
<br>
<br>
Location 2
<input type="text" id="address2">
<br>
<br>
Reference&nbsp;
<input type="text" class="reference">
<br>
<br>
<input type="button" value="Submit" onClick="up206b.geocode()">
</form>
</div>

</div>

<div id="map_canvas" style="height: 500px; width: 500px; float:right"></div>
<div id="supplementwindow"></div>
</body>
</html>

kwood30
02-25-2016, 11:22 AM
Thank you very much. You have been a tremendous help. I now know where to post when I need more help, and as I progress can hopeful help others on here too. I hope you'll be happy for me to do so again if needed :)

kwood30
02-25-2016, 11:34 AM
I am really sorry about this but I have only just noticed through testing that i can not place any than 2 markers? This is what I want to do but i thought the coding I had originally done allowed me to place the two marks and submit and then is i submitted another two after wards they would too appear = 4 marks and so on. So I know not sure what to do to sort this as what you have helped me with on both is exactly what I need and i don't want to try and add this function in and it messes up what you have helped me with. Hope that makes sense and really am sorry.

jscheuer1
02-25-2016, 01:56 PM
I don't think it ever did that because each time new markers are made, the old ones are removed by this code:


up206b.geocode = function() {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = [];
var bounds = new google.maps.LatLngBounds();
var addresses = [$('#address').val(), $('#address2').val()];

addresses.forEach(function(address) {
if (address) {
geocoder.geocode({
'address': address
}, function(resu . . .

So each time one submitted, the old markers were removed. It's always been that way, at least back to when you first posted the code at the beginning of this thread.


Now, we can take away or comment out that code, but then other things will no longer work as designed.

From the beginning this project has lacked a specific purpose/format. I understand it's often by playing with code that we learn things. At the same time, it's hard to achieve an objective that keeps changing. And in this particular case, since we are using the Google Maps API, there might be some things that just won't work. Adding additional markers can be done by removing that code, at least some times. I'm not sure what will happen in all cases. And I can see we would need to change how the reference fields are used, either that, or only have them available for the first two markers.

This allows adding extra markers and continued use of the reference fields. However, if new marker(s) change the focus (bounds) of the map, you may have to zoom in or out, and/or move the map around to see the older markers.


<!DOCTYPE html>
<html>

<head>

<style type="text/css">
#supplementwindow {
display: none;
position: absolute;
right: 150px;
top: 350px;
border: 1px solid #bbb;
padding: 5px;
border-radius: 12px;
}
</style>

<!-- Google Maps and Places API -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">

var markers = [];

function createMarker(latlng, html, map, refnum) {
var latlngtxt = (latlng.lat() + ',' + latlng.lng()).split(',');
$.each(latlngtxt, function(i, v){
v = Math.round(v);
v += v > 0? (i? 'E' : 'N') : (i? 'W' : 'S');
latlngtxt[i] = v.replace(/^-/, '');
});
latlngtxt = latlngtxt.join(', ');
var ref = $.trim($('.reference').eq(refnum).val());
ref = ref? ref + '<br>' : '';
var infowindow = new google.maps.InfoWindow({
content: ref || html //+ '#' + (markers.length + 1) + '<br>' + html + '<br>' + latlngtxt
});
var marker = new google.maps.Marker({
map: map,
position: latlng,
html: html,
infowindow: infowindow
});
marker.addListener('mouseover', function() {
infowindow.open(map, this);
$('#supplementwindow').html(infowindow.content).fadeIn();
});
marker.addListener('mouseout', function() {
infowindow.close();
$('#supplementwindow').fadeOut();
});
markers.push(marker);
}

//declare namespace
var up206b = {};

//declare map
var map;

function trace(message) {
if (typeof console != 'undefined') {
console.log(message);
}
}

up206b.initialize = function() {
var latlng = new google.maps.LatLng(52.136436, -0.460739);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
up206b.geocode();
}

var geocoder = new google.maps.Geocoder();

up206b.geocode = function() {
/* for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = []; */
var bounds = new google.maps.LatLngBounds();
var addresses = [$('#address').val(), $('#address2').val()];

addresses.forEach(function(address, refnum) {
if (address) {
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
createMarker(results[0].geometry.location, address, map, refnum);
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
});
}

</script>
</head>
<body onload="up206b.initialize()">

<div style="top: 0; right: 0; width:380px; height: 500px; float:right; padding-left:10px; padding-right:10px;">
<h1 align="center">Map Search</h1>

<div style="border:1px solid #ccc; background:#e5e5e5; padding:10px;" >

<form >
<br>
Location 1 <input type="text" id="address">
<br>
<br>
Reference&nbsp;
<input type="text" class="reference">
<br>
<br>
Location 2
<input type="text" id="address2">
<br>
<br>
Reference&nbsp;
<input type="text" class="reference">
<br>
<br>
<input type="button" value="Submit" onClick="up206b.geocode()">
</form>
</div>

</div>

<div id="map_canvas" style="height: 500px; width: 500px; float:right"></div>
<div id="supplementwindow"></div>
</body>
</html>

There could also be other problems with this scheme as I'm not sure it was intended that additional markers be added in this manner.

This overcomes new markers making old markers out of bounds, but now we face an ever enlarging map (zooming out) if new markers are farther away from old ones, that could also be an issue.


<!DOCTYPE html>
<html>

<head>

<style type="text/css">
#supplementwindow {
display: none;
position: absolute;
right: 150px;
top: 350px;
border: 1px solid #bbb;
padding: 5px;
border-radius: 12px;
}
</style>

<!-- Google Maps and Places API -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">

var markers = [];

function createMarker(latlng, html, map, refnum) {
var latlngtxt = (latlng.lat() + ',' + latlng.lng()).split(',');
$.each(latlngtxt, function(i, v){
v = Math.round(v);
v += v > 0? (i? 'E' : 'N') : (i? 'W' : 'S');
latlngtxt[i] = v.replace(/^-/, '');
});
latlngtxt = latlngtxt.join(', ');
var ref = $.trim($('.reference').eq(refnum).val());
ref = ref? ref + '<br>' : '';
var infowindow = new google.maps.InfoWindow({
content: ref || html //+ '#' + (markers.length + 1) + '<br>' + html + '<br>' + latlngtxt
});
var marker = new google.maps.Marker({
map: map,
position: latlng,
html: html,
infowindow: infowindow
});
marker.addListener('mouseover', function() {
infowindow.open(map, this);
$('#supplementwindow').html(infowindow.content).fadeIn();
});
marker.addListener('mouseout', function() {
infowindow.close();
$('#supplementwindow').fadeOut();
});
markers.push(marker);
}

//declare namespace
var up206b = {};

//declare map
var map;

function trace(message) {
if (typeof console != 'undefined') {
console.log(message);
}
}

up206b.initialize = function() {
var latlng = new google.maps.LatLng(52.136436, -0.460739);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
up206b.geocode();
}

var geocoder = new google.maps.Geocoder();
var bounds = new google.maps.LatLngBounds();

up206b.geocode = function() {
/* for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = []; */
var addresses = [$('#address').val(), $('#address2').val()];

addresses.forEach(function(address, refnum) {
if (address) {
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
createMarker(results[0].geometry.location, address, map, refnum);
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
});
}

</script>
</head>
<body onload="up206b.initialize()">

<div style="top: 0; right: 0; width:380px; height: 500px; float:right; padding-left:10px; padding-right:10px;">
<h1 align="center">Map Search</h1>

<div style="border:1px solid #ccc; background:#e5e5e5; padding:10px;" >

<form >
<br>
Location 1 <input type="text" id="address">
<br>
<br>
Reference&nbsp;
<input type="text" class="reference">
<br>
<br>
Location 2
<input type="text" id="address2">
<br>
<br>
Reference&nbsp;
<input type="text" class="reference">
<br>
<br>
<input type="button" value="Submit" onClick="up206b.geocode()">
</form>
</div>

</div>

<div id="map_canvas" style="height: 500px; width: 500px; float:right"></div>
<div id="supplementwindow"></div>
</body>
</html>

kwood30
02-25-2016, 04:47 PM
Ok sorry for some reason I recall testing it and it kept the orginal markers so didn't think of mentioning as thought it already did so. Sorry it must have been a glitch or my mistake. The general object is to place 2 searched markers with a reference number like we have been doing, the one with the two reference numbers was just of interested to see how its done. General tho if a user placed two markers and referenced them both with the one reference number, i am wanting them to be able to research and and more marks if necessary, generally with the same reference but i presume you add different ones with each submissions of locations. If that makes sense. Again I am sorry for this as I honestly thought it already did this in the coding i had done.

kwood30
02-25-2016, 05:14 PM
That works perfect for what I was generally asking so just ignore my last post except for the general understand that I thought it worked before and am sorry lol.
So with regards to the coding for the 2 locations and 1 reference number which of the quoted code do I change, to do what you have done above with added more markers on a zooming out map?

<!DOCTYPE html>
<html>

<head>





<!-- Google Maps and Places API -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">

var markers = [];


function createMarker(latlng, html, map) {
var latlngtxt = (latlng.lat() + ',' + latlng.lng()).split(',');
$.each(latlngtxt, function(i, v){
v = Math.round(v);
v += v > 0? (i? 'E' : 'N') : (i? 'W' : 'S');
latlngtxt[i] = v.replace(/^-/, '');
});
latlngtxt = latlngtxt.join(', ');

var ref = $('#reference').val()? $('#reference').val() + '<br>' : '';
var infowindow = new google.maps.InfoWindow({
content: ref || html
});
var marker = new google.maps.Marker({
map: map,
position: latlng,
html: html,
infowindow: infowindow
});
marker.addListener('mouseover', function() {
infowindow.open(map, this);
$('#supplementwindow').html(infowindow.content).fadeIn();
});
marker.addListener('mouseout', function() {
infowindow.close();
$('#supplementwindow').fadeOut();
});
markers.push(marker);
}

//declare namespace
var up206b = {};

//declare map
var map;

function trace(message) {
if (typeof console != 'undefined') {
console.log(message);
}
}

up206b.initialize = function() {
var latlng = new google.maps.LatLng(52.136436, -0.460739);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
up206b.geocode();
}

var geocoder = new google.maps.Geocoder();

up206b.geocode = function() {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}

markers = [];
var bounds = new google.maps.LatLngBounds();
var addresses = [$('#address').val(), $('#address2').val()];

addresses.forEach(function(address) {
if (address) {
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
createMarker(results[0].geometry.location, address, map);
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
});
}


</script>
</head>
<body onload="up206b.initialize()">

<div style="width:300px; height: 500px; float:right; padding-left:10px; padding-right:10px; margin: 50px 90px 50px 75px">
<h1 align="center">Map Search</h1>

<div style="border:1px solid #ccc; background:#e5e5e5; padding:10px;" align="center" >


<form >
<br>
Location 1 <input type="text" id="address">
<br>
<br>
Location 2
<input type="text" id="address2">
<br>
<br>
Reference*
<input type="text" id="reference">
<br>
<br>
<input type="button" value="Submit" onClick="up206b.geocode()">
</form>
</div>

</div>


<div id="map_canvas" style="height: 500px; width: 500px; float:right; margin:20px 75px;"></div>

<div id="supplementwindow" style="border:1px solid #ccc; background:#e5e5e5; align-content:center; float:left; position:absolute; margin:200px 0px 200px 200px; padding: 5px; border-radius: 12px;" ></div>

</body>
</html>

jscheuer1
02-25-2016, 06:14 PM
OK, so you want to go back to where there is only 1 field for the reference number and that both markers get that reference number if supplied and have that working with the ability to continually add more marker(s)?

Like:


<!DOCTYPE html>
<html>

<head>

<style type="text/css">
#supplementwindow {
display: none;
position: absolute;
right: 150px;
top: 350px;
border: 1px solid #bbb;
padding: 5px;
border-radius: 12px;
}
</style>

<!-- Google Maps and Places API -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">

var markers = [];

function createMarker(latlng, html, map, refnum) {
var latlngtxt = (latlng.lat() + ',' + latlng.lng()).split(',');
$.each(latlngtxt, function(i, v){
v = Math.round(v);
v += v > 0? (i? 'E' : 'N') : (i? 'W' : 'S');
latlngtxt[i] = v.replace(/^-/, '');
});
latlngtxt = latlngtxt.join(', ');
var ref = $.trim($('#reference').val());
//ref = ref? ref + '<br>' : '';
var infowindow = new google.maps.InfoWindow({
content: ref || html //+ '#' + (markers.length + 1) + '<br>' + html + '<br>' + latlngtxt
});
var marker = new google.maps.Marker({
map: map,
position: latlng,
html: html,
infowindow: infowindow
});
marker.addListener('mouseover', function() {
infowindow.open(map, this);
$('#supplementwindow').html(infowindow.content).fadeIn();
});
marker.addListener('mouseout', function() {
infowindow.close();
$('#supplementwindow').fadeOut();
});
markers.push(marker);
}

//declare namespace
var up206b = {};

//declare map
var map;

function trace(message) {
if (typeof console != 'undefined') {
console.log(message);
}
}

up206b.initialize = function() {
var latlng = new google.maps.LatLng(52.136436, -0.460739);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
up206b.geocode();
}

var geocoder = new google.maps.Geocoder();
var bounds = new google.maps.LatLngBounds();

up206b.geocode = function() {
/* for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = []; */
var addresses = [$('#address').val(), $('#address2').val()];

addresses.forEach(function(address, refnum) {
if (address) {
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
createMarker(results[0].geometry.location, address, map, refnum);
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
});
}

</script>
</head>
<body onload="up206b.initialize()">

<div style="top: 0; right: 0; width:380px; height: 500px; float:right; padding-left:10px; padding-right:10px;">
<h1 align="center">Map Search</h1>

<div style="border:1px solid #ccc; background:#e5e5e5; padding:10px;" >

<form >
<br>
Location 1 <input type="text" id="address">
<br>
<br>
<!-- Reference&nbsp;
<input type="text" class="reference">
<br>
<br> -->
Location 2
<input type="text" id="address2">
<br>
<br>
Reference&nbsp;
<input type="text" id="reference">
<br>
<br>
<input type="button" value="Submit" onClick="up206b.geocode()">
</form>
</div>

</div>

<div id="map_canvas" style="height: 500px; width: 500px; float:right"></div>
<div id="supplementwindow"></div>
</body>
</html>

kwood30
02-25-2016, 08:23 PM
So i was right in what I quoted is what needed changing? Yes thank you, the 1 reference for 2 marker locations is the one I wanted, the other one was just out of interest for me to understand what is done differently to make it work. Thank you so much for your help.

jscheuer1
02-25-2016, 09:37 PM
Great! Try out this version. Two reference fields. When you set a marker, it goes into a drop down list that you can select it from to zoom in/center on it. Another control allows you to see all markers in one view after that (show all). Also, selecting a marker and then using the remove button, will remove it.


<!DOCTYPE html>
<html>

<head>

<style type="text/css">
#supplementwindow {
position: absolute;
right: 150px;
top: 350px;
border: 1px solid #bbb;
padding: 5px;
border-radius: 12px;
}
</style>

<!-- Google Maps and Places API -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">

var markers = [];

function createMarker(latlng, html, map, refnum) {
var latlngtxt = (latlng.lat() + ',' + latlng.lng()).split(',');
$.each(latlngtxt, function(i, v){
v = Math.round(v);
v += v > 0? (i? 'E' : 'N') : (i? 'W' : 'S');
latlngtxt[i] = v.replace(/^-/, '');
});
latlngtxt = latlngtxt.join(', ');
var ref = $.trim($('.reference').eq(refnum).val());
//ref = ref? ref + '<br>' : '';
var infowindow = new google.maps.InfoWindow({
content: ref || html //+ '#' + (markers.length + 1) + '<br>' + html + '<br>' + latlngtxt
});
var marker = new google.maps.Marker({
map: map,
position: latlng,
html: html,
infowindow: infowindow
});
marker.addListener('mouseover', function() {
infowindow.open(map, this);
//$('#supplementwindow').html(infowindow.content).fadeIn();
});
marker.addListener('mouseout', function() {
infowindow.close();
//$('#supplementwindow').fadeOut();
});
$('#themarkers').append('<option value="' + html + '" title="' + infowindow.content + '">' + html + '</option>');
markers.push(marker);
}

//declare namespace
var up206b = {};

//declare map
var map;

function trace(message) {
if (typeof console != 'undefined') {
console.log(message);
}
}

up206b.initialize = function() {
var latlng = new google.maps.LatLng(52.136436, -0.460739);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
up206b.geocode();
}

var geocoder = new google.maps.Geocoder();
var bounds = new google.maps.LatLngBounds();

up206b.geocode = function() {
/* for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = []; */
var addresses = [$('#address').val(), $('#address2').val()];

addresses.forEach(function(address, refnum) {
if (address) {
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
createMarker(results[0].geometry.location, address, map, refnum);
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
});
}
jQuery(function($){
$('#removemarker').click(function(){
var tm = $('#themarkers'), si = tm.get(0).options.selectedIndex, $o = $('option', tm).eq(si), i = $o.val();
if(!i){return;}
$.each(markers, function(idx, v){
if(v.html === i){
v.setMap(null);
markers.splice(idx, 1);
return false;
}
});
$o.remove();
bounds = new google.maps.LatLngBounds();
if(markers.length){
$.each(markers, function(i, v){
bounds.extend(v.position);
});
map.fitBounds(bounds);
}
if(markers.length < 2){
map.setZoom(markers.length? 13 : 8);
}
});
$('#themarkers').change(function(){
this.title = this.options[this.options.selectedIndex].title;
var i = this.value;
if(!i){return;}
$.each(markers, function(idx, v){
if(v.html === i){
map.setCenter(v.position);
map.setZoom(10);
return false;
}
});
});
$('#showall').click(function(){
$('#themarkers').get(0).selectedIndex = 0;
if(!markers.length){
map.setCenter(new google.maps.LatLng(52.136436, -0.460739));
map.setZoom(13);
return;
}
map.fitBounds(bounds);
if(markers.length === 1){
map.setZoom(13);
}
});
});
</script>
</head>
<body onload="up206b.initialize()">

<div style="top: 0; right: 0; width:380px; height: 500px; float:right; padding-left:10px; padding-right:10px;">
<h1 align="center">Map Search</h1>

<div style="border:1px solid #ccc; background:#e5e5e5; padding:10px;" >

<form >
<br>
Location 1 <input type="text" id="address">
<br>
<br>
Reference&nbsp;
<input type="text" class="reference">
<br>
<br>
Location 2
<input type="text" id="address2">
<br>
<br>
Reference&nbsp;
<input type="text" class="reference">
<br>
<br>
<input type="button" value="Submit" onClick="up206b.geocode()">
</form>
</div>

</div>

<div id="map_canvas" style="height: 500px; width: 500px; float:right"></div>
<div id="supplementwindow"><select id="themarkers"><option value="">Select Marker</option>
</select><br>
<input type="button" id="showall" title="Or Reset if None" value="Show All"><br>
<input type="button" id="removemarker" value="Remove Marker"></div>
</body>
</html>

kwood30
02-29-2016, 01:34 PM
Sorry was away for the weekend. Thank you, this looks really good too, and interesting. Give me yet another variety of code to study. Thank you again for your help