Google지도 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

새로운 마커 객체를 생성

및 marker.setMap (지도);

Answer 2

너무 많은 로직이 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>