google-maps - Google Maps API v3 複数のクリック可能なマーカー

Question

Google マップに複数のマーカーを配置しようとしていますが、それぞれが URL を参照するようにしています。すべてのマーカーをループに入れましたが、最後のマーカーのみが実行されます。私はそれらすべてが機能することを望みます。これが私のコードです：

<script type="text/javascript">
            function initialize() {

                var json = [
                  {
                    "title": "title1",
                    "lat": 46.077428,
                    "lng": 18.229837

                  },
                  {
                    "title": "title2",
                    "lat": 46.042229,
                    "lng": 18.227134

                  },
                  {
                    "title": "title3",
                    "lat": 46.082831,
                    "lng": 18.225911

                  },
                  {
                    "title": "title4",
                    "lat": 46.092058,
                    "lng": 18.185645

                  },
                  {
                    "title": "title5",
                    "lat": 46.075493,
                    "lng": 18.22885,
                    "description": "some description to the 5th element",
                    "url": "http://www.pannon-home.hu/"
                  },
                  {
                    "title": "title6",
                    "lat": 46.075344,
                    "lng": 18.227713,
                    "description": "some description to the 6th element",
                    "url": "http://www.pannon-home.hu/"
                  }
                ]

                var latlng = new google.maps.LatLng(46.071325, 18.233185);
                var myOptions = {
                    zoom: 12,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP                
                };
                var firstmap = new google.maps.Map(document.getElementById("allmap"),myOptions);
                for (var i = 0, length = json.length; i < length; i++) {
                  var data = json[i],
                      latLng = new google.maps.LatLng(data.lat, data.lng); 
                  // Creating a marker and putting it on the map
                  var marker = new google.maps.Marker({
                    position: latLng,
                    map: firstmap,
                    title: data.title,
                    url: data.url,
                    icon: 'home.png'
                  });
                }
                var infoWindow = new google.maps.InfoWindow();
                google.maps.event.addListener(marker, "mouseover", function(e) {
                  infoWindow.setContent(data.description);
                  infoWindow.open(firstmap, marker);
                });
                google.maps.event.addListener(marker, "mouseout", function() {
                  infoWindow.setContent("");
                  infoWindow.close();
                });
                google.maps.event.addListener(marker, "click", function() {
                  location.assign(marker.url);
                });
            }

</script>

Answer 1

for ループの外側にあるロジックが多すぎるため、多くのロジックが最後のマーカーにのみ適用されます。この調整を試してください：

  <script type="text/javascript">
        function initialize() {

            var json = [
                {
                    "title":"title1",
                    "lat":46.077428,
                    "lng":18.229837

                },
                {
                    "title":"title2",
                    "lat":46.042229,
                    "lng":18.227134

                },
                {
                    "title":"title3",
                    "lat":46.082831,
                    "lng":18.225911

                },
                {
                    "title":"title4",
                    "lat":46.092058,
                    "lng":18.185645

                },
                {
                    "title":"title5",
                    "lat":46.075493,
                    "lng":18.22885,
                    "description":"some description to the 5th element",
                    "url":"http://www.pannon-home.hu/"
                },
                {
                    "title":"title6",
                    "lat":46.075344,
                    "lng":18.227713,
                    "description":"some description to the 6th element",
                    "url":"http://www.pannon-home.hu/"
                }
            ]

            var latlng = new google.maps.LatLng(46.071325, 18.233185);
            var myOptions = {
                zoom:12,
                center:latlng,
                mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            var firstmap = new google.maps.Map(document.getElementById("allmap"), myOptions);
            for (var i = 0, length = json.length; i < length; i++) {
                var data = json[i],
                        latLng = new google.maps.LatLng(data.lat, data.lng);
                // Creating a marker and putting it on the map
                var marker = new google.maps.Marker({
                    position:latLng,
                    map:firstmap,
                    title:data.title,
                    url:data.url,
                    icon:'home.png'
                });

                var infoWindow = new google.maps.InfoWindow();
                google.maps.event.addListener(marker, "mouseover", function (e) {
                    infoWindow.setContent(data.description);
                    infoWindow.open(firstmap, marker);
                });
                google.maps.event.addListener(marker, "mouseout", function () {
                    infoWindow.setContent("");
                    infoWindow.close();
                });
                google.maps.event.addListener(marker, "click", function () {
                    location.assign(marker.url);
                });
            }
        }

    </script>

Answer 2

新しいマーカー オブジェクトを作成する

およびmarker.setMap（マップ）;