如何在Google地圖中顯示多個標記？

Question

我需要一個谷歌地圖，顯示多個標記

我試圖把代碼，

<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> 

這是給我的JavaScript錯誤google.maps.MapTypeId undefined

，我還需要實現在此多標誌物。

所以，請幫我做這個..

感謝您的時間對我來說..

Answer 1

檢查這個腳本，

<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

的問題是，你是嵌入谷歌地圖API v2（http://maps.google.com/maps?file=api&v=2&key=my_key），但您正在使用Google Maps API v3的方法和對象。當你的代碼的其餘部分是谷歌地圖V3，嘗試調用谷歌地圖API是這樣的：

<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> 

我已加載經緯度從XML文件中的每個商店位置。