여러 마커 및 정보 창으로 Google지도 사용자 정의

* 안녕하세요, 저는 전체 Google지도 API 환경에 새로운 것이므로 안내해 주시기 바랍니다.여러 마커 및 정보 창으로 Google지도 사용자 정의

은 무엇 내가 아래에 달성하려고하는 것은 XML 파일 또는 JSON 파일 중 하나에서 데이터를 추출하고 구글지도 상에 위치를 음모하는 것입니다. 또한 각 위치에 대해 다른 정보를 표시하는 정보 창을 추가하려고합니다. 정보창을 가지고있는 것을 이해합니다. 나는 오버 레이를 만들어야합니다. 하지만 문제는 실제로 어떻게 여러 정보창에 태그를 추가하는 것입니까?

모든 마커는지도에 잘 표시하지만 정보 창을 보시려면 클릭 할 때 문제가된다 - 정보 창은 항상 같은 마커에 표시됩니다. 뭐가 문제 야?

이것은 내가 지금까지 생각 해낸 것이며, 누구든지 문제를 발견 할 수 있다면 크게 감사하겠습니다.

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
     html, body, #map_canvas { margin: 0; padding: 0; height: 100%; } 
    </style> 
    <script 
     src="https://maps.googleapis.com/maps/api/js sensor=false&libraries=visualization"> 
    </script> 

    <script> 
    var map; 
    function initialize() { 
    var mapOptions = { 
    zoom: 5, 
    center: new google.maps.LatLng(-27.48939, 153.012772), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    map = new google.maps.Map(document.getElementById('map_canvas'), 
    mapOptions); 


    var script = document.createElement('script'); 
    script.src = 'http://earthquake.usgs.gov/earthquakes/feed/geojsonp/2.5/week'; 
    document.getElementsByTagName('head')[0].appendChild(script); 
} 

    window.eqfeed_callback = function(results) { 
    for (var i = 0; i < results.features.length; i++) { 


    var earthquake = results.features[i]; 
    var coords = earthquake.geometry.coordinates; 

    var latLng = new google.maps.LatLng(coords[1],coords[0]); 

    var marker = new google.maps.Marker({ 
     position: latLng, 
     map: map, 

    }); 

    var infowindow = new google.maps.InfoWindow({ 
    content: "<div>Hello! World</div>", 
    maxWidth:100 
    }); 

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

    } 
} 

    </script> 
    </head> 
    <body onload="initialize()"> 
    <div id="map_canvas"></div> 
    </body> 

    </html>

출처

2013-08-17 user2691544

질문이 있습니까? 그렇지 않은 경우 http://codereview.stackexchange.com을 게시하는 것이 좋습니다. 의 –

가능한 중복 [Google지도 JS API를 V3 - 간단한 다중 마커 예] (http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example) – geocodezip

사용 이 대신 마커 의 정보창을 열 때.

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

출처

2013-08-17 11:34:11

헤이 루카스 조언 해주셔서 감사합니다. 확인 만하면 내 콘텐츠가 지금부터 어디로 갈 것입니까? XML 또는 JSON과 같은 외부 소스에서 콘텐츠를 가져 오려면 어떻게해야합니까? – user2691544

모든 것이 그대로 유지됩니다. 이전과 같은 방식으로 할 수 있습니다. –

흠. 이 경우에는 작동하지 않는 것 같습니다. 정보창 기능이 사라졌습니다. – user2691544

여러 마커 및 정보 창으로 Google지도 사용자 정의

답변

관련 문제