谷歌地图中的多个标记

Question

我正在抓我的头谷歌地图集成请帮我。 我想要多个标记，但它只取得了不超过11​​个标记。

下面是我的代码..

<script src="http://www.google.com/jsapi"></script> 
<script type="text/javascript">google.load("jquery", "1");</script> 
<script type="text/javascript"> google.load("maps", "3", {other_params:"sensor=false"});</script> 

<script type="text/javascript"> 
     var geocoder; 
     var map, cloud; 
     var counter = 0; 
     var markers = []; 
     var locations = []; 

     locations[0] = "Charleston, SC"; 
     locations[1] = "Tuscon, AZ"; 
     locations[2] = "Phoenix, AZ"; 
     locations[3] = "San Diego, CA"; 
     locations[4] = "Los Angeles, CA"; 
     locations[5] = "Aliso Viejo, CA"; 
     locations[6] = "Laguna Beach, CA"; 
     locations[7] = "Coto de Caza, CA"; 
     locations[8] = "Philadelphia, PA"; 
     locations[9] = "Ladera Ranch, CA"; 
     locations[10] = "Thousand Oaks, CA"; 

     var image = new google.maps.MarkerImage(
      '../images/marker.png', 
      new google.maps.Size(28,54), 
      new google.maps.Point(0,0), 
      new google.maps.Point(14,54) 
     ); 

     function init() 
     { 
      //alert(locations.length); 
      geocoder = new google.maps.Geocoder(); 
      var latlng = new google.maps.LatLng(-34.397, 150.644); 
      var myOptions = { 
       zoom: 4, 
       center: latlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      } 
      map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); 
      for (var i = 0; i < locations.length; i++) { 
       makeMarker(locations[i]); 
      } 
      centerMap(); 
     } 

     function centerMap() 
     { 
      map.setCenter(markers[markers.length-1].getPosition()); 
     } 

     function makeMarker(location) 
     { 
      geocoder.geocode({ 'address': location}, function(results, status) { 
       if (status == google.maps.GeocoderStatus.OK) { 
        map.setCenter(results[0].geometry.location); 
        var marker = new google.maps.Marker({ 
         map: map, 
         icon: image, 
         position: results[0].geometry.location 
        }); 
        markers.push(marker); 

        alert(results[0].formatted_address); 
        var contentString = 'Content comes here'; 

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

        google.maps.event.addListener(marker, 'mouseover', function() { 
         infowindow.open(map,marker); 
        }); 

        google.maps.event.addListener(marker, 'mouseout', function() { 
         infowindow.close(map,marker); 
        }); 
       } 
      }); 


     } 
     google.maps.event.addDomListener(window, 'load', init); 
    </script> 

你可以看到实际的例子：http://projects.pronixtech.net/kindcampaign/kind-country/

Answer 1

我认为这个问题是在 “geocoder.geocode”。

看看这个代码，用LatLong它的作品。

var geocoder; 
    var map, cloud; 
    var counter = 0; 
    var markers = []; 
    var locations = []; 



    locations[0] = new google.maps.LatLng(10.32522, 10.07002); 
    locations[1] = new google.maps.LatLng(20.32522, 10.07002); 
    locations[2] = new google.maps.LatLng(30.32522, 10.07002); 
    locations[3] = new google.maps.LatLng(10.32522, 20.07002); 
    locations[4] = new google.maps.LatLng(20.32522, 20.07002); 
    locations[5] = new google.maps.LatLng(30.32522, 20.07002); 
    locations[6] = new google.maps.LatLng(10.32522, 30.07002); 
    locations[7] = new google.maps.LatLng(20.32522, 30.07002); 
    locations[8] = new google.maps.LatLng(30.32522, 30.07002); 
    locations[9] = new google.maps.LatLng(10.32522, 40.07002); 
    locations[10] = new google.maps.LatLng(20.32522, 40.07002); 
    locations[11] = new google.maps.LatLng(30.32522, 40.07002); 
    locations[12] = new google.maps.LatLng(10.32522, 50.07002); 
    locations[13] = new google.maps.LatLng(20.32522, 50.07002); 
    locations[14] = new google.maps.LatLng(30.32522, 50.07002); 
    locations[15] = new google.maps.LatLng(10.32522, 60.07002); 
    locations[16] = new google.maps.LatLng(20.32522, 60.07002); 
    locations[17] = new google.maps.LatLng(30.32522, 60.07002); 


    var image = new google.maps.MarkerImage(
     'http://www.bookyourparis.com/images-site/beachflag.png', 
     new google.maps.Size(28,54), 
     new google.maps.Point(0,0), 
     new google.maps.Point(14,54) 
    ); 

    function init() 
    { 
     //alert(locations.length); 
     geocoder = new google.maps.Geocoder(); 
     var latlng = new google.maps.LatLng(-34.397, 150.644); 
     var myOptions = { 
      zoom: 2, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); 

     for (var i = 0; i < locations.length; i++) { 
      makeMarker(locations[i]); 
     } 


     centerMap(); 
    } 

    function centerMap() 
    { 
     map.setCenter(markers[markers.length-1].getPosition()); 
    } 

    function makeMarker(location) 
    { 


     //geocoder.geocode({ 'address': location}, function(results, status) { 
      // if (status == google.maps.GeocoderStatus.OK) { 
       //map.setCenter(results[0].geometry.location); 
       var marker = new google.maps.Marker({ 
        map: map, 
        icon: image, 
        position: location//results[0].geometry.location 
       }); 
       markers.push(marker); 

       //alert(results[0].formatted_address); 
       var contentString = 'Content comes here'; 

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

       google.maps.event.addListener(marker, 'mouseover', function() { 
        infowindow.open(map,this); 
       }); 

       google.maps.event.addListener(marker, 'mouseout', function() { 
        infowindow.close(map,this); 
       }); 
      //} 
     //}); 


    } 
    google.maps.event.addDomListener(window, 'load', init);