How to display multiple markers in Google map? - google-maps

Question

I need to display multiple markers in single Google Map
I tried to place code,
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script src="http://maps.google.com/maps?file=api&v=2&key=my_key" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
latLngs = [
new google.maps.LatLng(44.3118328, -79.5549532),
new google.maps.LatLng(44.3118325, -80.5549533),
new google.maps.LatLng(44.3118326, -81.5549534),
new google.maps.LatLng(44.3118327, -82.5549535)
];
var latlng = new google.maps.LatLng(44.3118328, -79.5549532);
myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var contentString = '<div id="mapinfowindow">'+'1970 Thompson St <br> Innisfil' + '<br>' + '$329,900'
+'<br><br>View Brochure</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString,
});
var image = new google.maps.MarkerImage(
'images/marker.png',
new google.maps.Size(50,50),
new google.maps.Point(0,0),
new google.maps.Point(25,50)
);
var shadow = new google.maps.MarkerImage(
'images/markershadow.png',
new google.maps.Size(78,50),
new google.maps.Point(0,0),
new google.maps.Point(25,50)
);
var shape = {
coord: [28,3,32,4,35,5,37,6,38,7,39,8,40,9,42,10,42,11,43,12,44,13,44,14,44,15,45,16,45,17,45,18,45,19,45,20,45,21,45,22,45,23,44,24,44,25,44,26,43,27,43,28,42,29,41,30,41,31,40,32,39,33,39,34,38,35,37,36,36,37,35,38,34,39,33,40,32,41,31,42,30,43,29,44,28,45,26,46,24,47,24,47,22,46,21,45,19,44,18,43,17,42,16,41,15,40,14,39,13,38,12,37,12,36,11,35,10,34,9,33,9,32,8,31,7,30,7,29,6,28,5,27,5,26,4,25,4,24,4,23,4,22,3,21,3,20,3,19,3,18,4,17,4,16,4,15,4,14,5,13,6,12,6,11,7,10,8,9,9,8,10,7,12,6,14,5,16,4,20,3,28,3],
type: 'poly'
};
var markers = new Array(latLngs.length);
for (var i = 0; i < markers.length; i++) {
markers[i] = new google.maps.Marker({
position: latLngs[i],
title:"Marker "+i,
icon: image,
shadow: shadow,
map: map,
shape: shape
});
markers[i].setMap(map);
}
for (var i2 = 0; i2 < markers.length; i2++) {
google.maps.event.addListener(markers[i2], 'click', function() {
infowindow.open(map,markers[i2]);
});
}
}
</script>
<div id="map_canvas" style="width: 691px; height: 466px; overflow:hidden;" class="bdr-grey"> </div>
This is giving me javascript error google.maps.MapTypeId undefined
and I also need to implement multiple markers in this.
So please help me to do this..
Thanks for your time for me..

Answer 1

The problem is that you are embedding the Google Maps API v2 (http://maps.google.com/maps?file=api&v=2&key=my_key), but you are using methods and objects of the Google Maps API v3. As the rest of your code is for Google Maps v3, try to call the Google Maps API like this:
<script type="text/javascript"
src="https://maps.google.com/maps/api/js?sensor=set_to_true_or_false">

Answer 2

<script type="text/javascript" language="javascript">
window.onload = function () {
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "StoreLocations.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
var x = xmlDoc.getElementsByTagName("CityName");
var mapOptions = {
center: new google.maps.LatLng(39.8634242, -98.18818149999998),
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
// marker:true
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
for (i = 0; i < x.length; i++) {
var latitudetest = x[i].getElementsByTagName("latitude")[0].childNodes[0].nodeValue;
var longitudetest = x[i].getElementsByTagName("longitude")[0].childNodes[0].nodeValue;
var data = '<div style="min-width:175px;text-align:left; min-height:80px;color:#000000;font-family:arial,sans-serif;font-style:normal; font-size:13px;">' + '<span style="font-weight:bold;font-size:13px;color:#000000;font-family:arial,sans-serif;font-style:normal; ">' + '1-800 Car Cash of' + ' ' + x[i].getElementsByTagName("storename")[0].childNodes[0].nodeValue + '</span>' + '<br/>' + x[i].getElementsByTagName("address")[0].childNodes[0].nodeValue + '<br/>' + x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue + ' ' + x[i].getElementsByTagName("zipcode")[0].childNodes[0].nodeValue + '<br/>' + x[i].getElementsByTagName("phoneno")[0].childNodes[0].nodeValue + '<br/>' + '<div style="padding-top:6px;">' + '' + "Get Directions" + '' + '</div>' + '</div>';
var myLatlng = new google.maps.LatLng(latitudetest, longitudetest);
var bluePin = new google.maps.MarkerImage('http://maps.google.com/mapfiles/ms/micons/blue-dot.png',
new google.maps.Size(32, 32),
new google.maps.Point(0, 0),
new google.maps.Point(14, 35));
var pinShadow = new google.maps.MarkerImage('http://maps.google.com/mapfiles/ms/micons/msmarker.shadow.png',
new google.maps.Size(59, 32),
new google.maps.Point(0, 0),
new google.maps.Point(14, 35));
var marker = new google.maps.Marker({
position: myLatlng,
icon: bluePin,
shadow: pinShadow,
map: map,
title: x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue
});
(function (marker, data) {
google.maps.event.addListener(marker, 'click', function (e) {
infoWindow.setContent(data);
infoWindow.open(map, marker);
});
})(marker, data);
}
}
</script>
I have loaded latitude and longitude from xml file for each store locations.

Answer 3

check this script,
<script type="text/javascript">
var locations = [
['Bondi Beach', 16.7997751, 96.15659660000906, 4],
['Coogee Beach', 16.7897762, 96.15659660008007, 5],
['Cronulla Beach', 16.775815, 96.13637070000004, 3],
['Manly Beach', 16.7996784, 96.15659660000609, 2],
['Maroubra Beach', 16.7497795, 96.15659660050010, 1]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: new google.maps.LatLng(16.7997751, 96.15659660000006),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>