Comment afficher plusieurs marqueurs dans Google map?

Question

J'ai besoin d'afficher plusieurs marqueurs en simple Google Map

J'ai essayé de placer le 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' 
+'<a href="http://www.something.com/Featured_Listings_files/1970%20Thompson%20-%20Brochure.pdf"><br><br>View Brochure</a></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> 

Ce me donne erreur javascript google.maps.MapTypeId undefined

et je dois aussi mettre en œuvre plusieurs marqueurs dans cette .

Alors s'il vous plaît aidez-moi à faire ..

Merci pour votre temps pour moi ..

Answer 1

vérifier ce 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> 

Answer 2

Le problème est que vous intégrez Google Maps API v2 (http://maps.google.com/maps?file=api&v=2&key=my_key), mais vous utilisez des méthodes et des objets de l'API Google Maps v3. Comme le reste de votre code est pour Google Maps v3, essayez d'appeler l'API Google Maps comme ceci:

<script type="text/javascript" 
src="https://maps.google.com/maps/api/js?sensor=set_to_true_or_false"> 

Answer 3

<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' + '&nbsp;' + 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 + '&nbsp;' + x[i].getElementsByTagName("zipcode")[0].childNodes[0].nodeValue + '<br/>' + x[i].getElementsByTagName("phoneno")[0].childNodes[0].nodeValue + '<br/>' + '<div style="padding-top:6px;">' + '<a href="https://maps.google.com/maps?daddr=' + x[i].getElementsByTagName("address")[0].childNodes[0].nodeValue + "," + x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue + '" style="font-family:arial,sans-serif;font-style:normal;text-decoration: none;color:Blue; font-size:13px;" target="_blank">' + "Get Directions" + '</a>' + '</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> 

J'ai chargé la latitude et la longitude de fichier XML pour chaque emplacement des magasins.