KML 데이터의 정보 창에 맞춤 html 추가하기

Question

Google지도 (geoxml3) 전문가가 도와 드릴 수 있기를 바랍니다. 내가하려고하는 일은 실제로 매우 간단하지만, 그것을 성취하기에 충분한 지식이 부족합니다.

일부 KML 데이터를로드하는 google maps api v3 및 geoxml3을 사용하는 간단한지도가 있습니다.

그런 다음 각 장소 표시에 해당하는 맞춤 생성 메뉴가 있습니다.

다음 예와 같이 정보창에 확대/축소 버튼을 추가하기 만하면됩니다.

http://www.geocodezip.com/v3_MW_example_map3_zoom.html

은 내가 정의 마커를 생성하고 HTML 콘텐츠를 추가 할 필요가 있음을 알고 있지만, 나는 그것이 KML의 클릭으로 작동하는데 문제를 많이 가지고 있어요. 지금까지

http://webstgcc.onthenet.com.au/map/map.html

내 코드 :

var geoXml = null; 
var map = null; 
var myLatLng = null; 
var infowindow = null; 
var filename = "KML_Samples.kml"; 
var image = ""; 

function initialize() { 
myLatLng = new google.maps.LatLng(-28.014408,153.463898); 

var myOptions = { 
    zoom: 11, 
    center: myLatLng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 

map = new google.maps.Map(document.getElementById("googlemap"),myOptions); 
infowindow = new google.maps.InfoWindow({maxWidth:300}); 

geoXml = new geoXML3.parser({ 
    map: map, 
    infowindow: infowindow, 
    singleInfoWindow: true, 
    markerOptions: {icon: image}, 
    afterParse: useTheData 
}); 
geoXml.parse(filename); 
};     
function kmlClick(marker) { 
    google.maps.event.trigger(geoXml.docs[0].markers[marker],"click"); 
} 
function useTheData(doc){ 
// Geodata handling goes here, using JSON properties of the doc object 
for (var i = 0; i < doc[0].markers.length; i++){} 
}; 
google.maps.event.addDomListener(window, 'load', initialize); 

그것은 꽤 걸렸다

나는

예 여기 BTW 사용자 정의 마커을 시도 ... 포함하지 않은 이 작업을하는 동안 잠시 기다려주십시오. 정말 간단한 일이라면 용서해주십시오.

도움을 주시면 감사하겠습니다.

Answer 1

공급 geoXML3.parser()

내장 함수에 의해 생성 된 마커를 사용 만 정보창의 콘텐츠 수정하는 간단한 방법으로 사용자 정의 createMarker 기능 :

infowindow = new google.maps.InfoWindow({minWidth:250, maxWidth:300}); 
geoXml = new geoXML3.parser({ 
    map: map, 
    infowindow: infowindow, 
    singleInfoWindow: 1, 
    afterParse: useTheData, 

    createMarker: function (placemark, doc) { 
     //get the marker from the built-in createMarker-function 
     var marker=geoXML3.instances[0].createMarker(placemark, doc); 
     //modify the content 
     if(marker.infoWindow){ 
     marker.infoWindowOptions.content= 
     '<div class="geoxml3_infowindow"><h3>' + placemark.name + 
     '</h3><div>' + placemark.description + '</div>'+ 
     '<code onclick="map.setCenter(new google.maps.LatLng'+ 
      marker.getPosition().toString()+ 
     ');map.setZoom(map.getZoom()+1);">zoom in</code><br/>'+ 
     '<code onclick="map.setCenter(new google.maps.LatLng'+ 
      marker.getPosition().toString()+ 
     ');map.setZoom(map.getZoom()-1);">zoom out</code>'+ 
     '</div>'; 
     } 
    return marker; 
    } 
});