Google지도 API (동적) : URL을 통해 여러 위치를 플롯하여 맞춤 마커 표시

Question

Google지도에서 여러 위치를 동적으로 플롯하기위한 코드를 성공적으로 구현했습니다.

해결 방법 : 이런 내가 맞춤형 라벨을 만들려고하고 (link)

, 톰 모건의 마커를 사용

http://www.codeproject.com/KB/scripting/Use_of_Google_Map/ex7.JPG

아래에이 코드를 적용

http://abhi2434.googlepages.com/tlabel.2.05.js

. (! 내 목표는 .... 실패! 두 번째 코드에서 내가 두 번째 코드를 적용하려고 할 때마다 사용자 정의 마커를 이미 사용하고있는 첫 번째 코드를 유지하지만 수 있도록하는 것입니다)

구글 지도

<div id="map" style="width: 550px; height: 450px"></div> 

<script type="text/javascript"> 
//<![CDATA[ 

if (GBrowserIsCompatible()) { 
    var openbubble=true; 
    var agent = navigator.userAgent.toLowerCase(); 
// For IE We need to Do this 
    if ((agent.indexOf("msie") > -1) && (agent.indexOf("opera") < 1)){ 
    var loader = "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
     src='gmarker.png', sizingMethod='crop');"; 
    icon = '<div style="height:34px; width:20px; ' +loader+ '" ></div>' 
    } 

    var n=0; 
    function createTLabel(point,html) { 
    var label = new TLabel(); 
    label.id = 'Label '+n; 
    label.anchorLatLng = point; 
    label.anchorPoint = 'bottomCenter'; 
    label.content = html; 
    label.markerOffset = new GSize(-1,-5); 
    map.addTLabel(label); 
    var obj=document.getElementById(label.id); 
    GEvent.addDomListener(obj, "click", function() { 
      //map.openInfoWindowHtml(point, html, {pixelOffset: new GSize(0,-34)}); 
    });   

    n++; 
    } 

    var map = new GMap2(document.getElementById("map")); 
    map.addControl(new GLargeMapControl()); 
    map.addControl(new GMapTypeControl()); 
    map.setCenter(new GLatLng(43.907787,-79.359741),8); 
    // Creating the HTML to show markers 
    var hContent = '<div style="padding: 0px 0px 13px 0px; background: url(
     images/pt_bot_ctr_ora.png) no-repeat bottom center;"> 
     <div style="text-align: center; background-color: #f2c30c; padding: 2px; 
     font-size: 0.75em; font-weight: bold;" onclick="openInfo(\'hInfo\')">MyInfo 
     </div>'; 
    hContent+='<div id="hInfo" style="position: absolute; display: none;">'; 
    hContent+='<div style="width: 81px; background-color: #000; padding: 3px; 
     font-size: 0.75em; color: #fff; text-align: left; border: 1px solid #f2c30c;"> 
     This is my content</div>'; 
    hContent+='</div></div>'; 
    createTLabel(new GLatLng(43.65654,-79.90138),hContent); 

} 

else { 
    alert("Sorry, the Google Maps API is not compatible with this browser"); 
} 
function openInfo(d) 
{ 
    var obj = document.getElementById(d); 
    if(openbubble==true) 
    { 
     obj.style.display="block"; 
     openbubble=false; 
    } 
    else 
    { 
     obj.style.display="none"; 
     openbubble=true; 
    } 
} 
//]]> 
</script> 

Answer 1

tlabel이 구식입니다. 마이크 윌리암스의 라벨을 사용하여이 문제를 해결했습니다.

http://econym.org.uk/gmap/elabel.htm