Mapping multiple locations with Google Maps JavaScript API v3 and Geocoding API
This is a duplicate of google map info window multiple addresses via xml, just not an exact duplicate. The geocoder is asynchronous, so when the geocoder callback runs, the value of address is that from the end of the loop for all the calls.
The answer is the same: The simplest solution is to use function closure to associate the call to the geocoder with the returned result:
function geocodeAddress(locations, i) {
var title = locations[i][0];
var address = locations[i][1];
var url = locations[i][2];
geocoder.geocode({
'address': locations[i][1]
},
function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
map: map,
position: results[0].geometry.location,
title: title,
animation: google.maps.Animation.DROP,
address: address,
url: url
})
infoWindow(marker, map, title, address, url);
bounds.extend(marker.getPosition());
map.fitBounds(bounds);
} else {
alert("geocode of " + address + " failed:" + status);
}
});
}
Working fiddle
code snippet:
var locations = [
['Location 1 Name', 'New York, NY', 'Location 1 URL'],
['Location 2 Name', 'Newark, NJ', 'Location 2 URL'],
['Location 3 Name', 'Philadelphia, PA', 'Location 3 URL']
];
var geocoder;
var map;
var bounds = new google.maps.LatLngBounds();
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
geocoder = new google.maps.Geocoder();
for (i = 0; i < locations.length; i++) {
geocodeAddress(locations, i);
}
}
google.maps.event.addDomListener(window, "load", initialize);
function geocodeAddress(locations, i) {
var title = locations[i][0];
var address = locations[i][1];
var url = locations[i][2];
geocoder.geocode({
'address': locations[i][1]
},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
map: map,
position: results[0].geometry.location,
title: title,
animation: google.maps.Animation.DROP,
address: address,
url: url
})
infoWindow(marker, map, title, address, url);
bounds.extend(marker.getPosition());
map.fitBounds(bounds);
} else {
alert("geocode of " + address + " failed:" + status);
}
});
}
function infoWindow(marker, map, title, address, url) {
google.maps.event.addListener(marker, 'click', function() {
var html = "<div><h3>" + title + "</h3><p>" + address + "<br></div><a href='" + url + "'>View location</a></p></div>";
iw = new google.maps.InfoWindow({
content: html,
maxWidth: 350
});
iw.open(map, marker);
});
}
function createMarker(results) {
var marker = new google.maps.Marker({
icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
map: map,
position: results[0].geometry.location,
title: title,
animation: google.maps.Animation.DROP,
address: address,
url: url
})
bounds.extend(marker.getPosition());
map.fitBounds(bounds);
infoWindow(marker, map, title, address, url);
return marker;
}html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>Step-1
First you have to create map location for that like, where do you want to add this map on your web app. So first create JSP/HTML/ASP page in which you have to create location where you want to display the map.
<div id="map_canvas" style="width: 1350px; height: 500px"></div>
Step-2
Below I write the script using which you can see the map on your web application.
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=TRUEORFALSE"></script>
<script type="text/javascript">
var map;
var markers;
function initialize() {
$
.ajax({
type : "POST",
url : "Your Servlet Name", //Servlet Name
data : $("#FormID"),
success : function(responseJson) {
var result = $.parseJSON(responseJson);
markers = result;
// Below mapOptions var includes styling maps and zoom level of your map, it also includes mapTypeId.
var mapOptions = {
center : new google.maps.LatLng(
markers[0].latitude, markers[0].longitude),
zoom : 5,
scrollwheel: false,
styles : [ {
"featureType" : "administrative",
"elementType" : "labels.text.fill",
"stylers" : [ {
"color" : "#444444"
} ]
}, {
"featureType" : "landscape",
"elementType" : "all",
"stylers" : [ {
"color" : "#f2f2f2"
} ]
}, {
"featureType" : "poi",
"elementType" : "all",
"stylers" : [ {
"visibility" : "off"
} ]
}, {
"featureType" : "poi.park",
"elementType" : "geometry.fill",
"stylers" : [ {
"visibility" : "on"
}, {
"color" : "#1ba093"
} ]
}, {
"featureType" : "road",
"elementType" : "all",
"stylers" : [ {
"saturation" : -100
}, {
"lightness" : 45
} ]
}, {
"featureType" : "road.highway",
"elementType" : "all",
"stylers" : [ {
"visibility" : "simplified"
} ]
}, {
"featureType" : "road.arterial",
"elementType" : "labels.icon",
"stylers" : [ {
"visibility" : "off"
} ]
}, {
"featureType" : "transit",
"elementType" : "all",
"stylers" : [ {
"visibility" : "off"
} ]
}, {
"featureType" : "water",
"elementType" : "all",
"stylers" : [ {
"color" : "#00748c"
}, {
"visibility" : "on"
} ]
} ],
mapTypeId : google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document
.getElementById("map_canvas"), mapOptions);
addYourLocationButton(map,marker);
//Create and open InfoWindow.
var infoWindow = new google.maps.InfoWindow();
for (var i = 0; i < markers.length; i++) {
var data = markers[i];
var myLatlng = new google.maps.LatLng(
data.latitude, data.longitude);
var marker = new google.maps.Marker({
position : myLatlng,
animation: google.maps.Animation.DROP,
map : map,
title : //Any title that you want to display while cursor over the marker.
});
//Click event
(function(marker, data) {
google.maps.event
.addListener(
marker,
"click",
function(e) {
infoWindow
.setContent("<div style = 'width:300px;min-height:50px'>+Write information about your location if you want.+"</div>");
infoWindow
.open(map, marker);
});
})(marker, data);
}
}
});
}