Google지도 앱의 맞춤 마커

Question

Google지도 자바 스크립트 애플리케이션을 사용 중이며 마커 중 하나에 맞춤 이미지를 사용하고 싶습니다.

여기 마커를 얻으려는 코드 예제가 있습니다.

var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius; 
GDownloadUrl(searchUrl, function(data) { 
    var xml = GXml.parse(data); 
    markers = xml.documentElement.getElementsByTagName('marker'); 

    var sidebar2 = document.getElementById('sidebar2'); 
    sidebar2.innerHTML = ''; 
    if (markers.length == 0) { 
    document.getElementById('alert_div').innerHTML = "<a>No Results found</a>"; 
    document.getElementById('alert_div').style.display = 'block'; 

    map.setCenter(new GLatLng(40.178873,2.8125), 2); 
    return; 
    } 
    showSidebar(); 
    var limitsearch = document.getElementById('limitsearch').value; 
    var bounds = new GLatLngBounds(); 
    if (limitsearch <= markers.length){ 
    for (var i = 0; i < limitsearch; i++) { 
    var name = markers[i].getAttribute('name'); 
    var phone = markers[i].getAttribute('phone'); 
    if (phone == 0){phone = '';} 
    var address = markers[i].getAttribute('address'); 
    var distance = parseFloat(markers[i].getAttribute('distance')); 
    var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')), 
          parseFloat(markers[i].getAttribute('lng'))); 

    var marker = createMarker(point, name, address); 
    map.addOverlay(marker); 
    var sidebarEntry = createSidebarEntry(marker, phone, name, address, distance); 
    sidebar2.appendChild(sidebarEntry); 
    bounds.extend(point); 
    }} 
    else{ 
    for (var i = 0; i < markers.length; i++) { 
    var name = markers[i].getAttribute('name'); 
    var phone = markers[i].getAttribute('phone'); 
    if (phone == 0){phone = '';} 
    var address = markers[i].getAttribute('address'); 
    var distance = parseFloat(markers[i].getAttribute('distance')); 
    var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')), 
          parseFloat(markers[i].getAttribute('lng'))); 

    var marker = createMarker(point, name, address); 
    map.addOverlay(marker); 
    var sidebarEntry = createSidebarEntry(marker, phone, name, address, distance); 
    sidebar2.appendChild(sidebarEntry); 
    bounds.extend(point); 
    } 

    } 




    map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds)); 
    showSidebar(); 
    getAlert(); 
}); 

} 여기

Answer 1

는 아이콘

function createMarker(point, name, address, markerIcon) { 
    var markerOptions = {} 
    if (markerIcon !== undefined) { 
    markerOptions = { icon: markerIcon }; 
    } 
    marker = new GMarker(point, markerOptions); 
    var html = '<b>' + name + '</b> <br/>' + address; 
    GEvent.addListener(marker, 'click', function() { 
    marker.openInfoWindowHtml(html); 
    }); 
    return marker; 
} 

원하는 경우 다음 마지막 옵션으로 GIcon 객체에 전달할 수 있습니다에게 지원하는 createMarker를 대체합니다. 당신과 같이 초기화해야합니다 :

var myIcon = new GIcon(); 
myIcon.iconSize = new GSize(16, 16); 
myIcon.iconAnchor = new GPoint(4, 7); 
myIcon.image = "http://www.url.com/somepic.png"; 
var marker = createMarker(point, name, address, myIcon); 

당신은

또한, 구글 문서 도구에서 이러한 리소스를 참조하십시오 크기와 앵커의 위치를 ​​결정해야합니다

:

• Icons Overview
Complex/Custom Icon

Simple Icon