javascript - 谷歌 map 中的多个标记

我为Google地图集成而努力，请帮帮我。
我想要多个标记，但是它只需要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/

最佳答案

我认为问题出在“ 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);