2013-01-10 3 views
0

매장 검색에 의해 생성 된 마커에 이벤트 리스너 : http://storelocator.googlecode.com/git/examples/panel.html구글지도 -이 예에서 일하고 있어요

나는이 같은 모든 마커에 리스너를 추가 할 수 있도록하고 싶습니다,하지만 난 몰라 DataFeed에서 Store Locator에 의해 생성 된 이후에이를 참조하는 방법. 대신 this example에서

google.maps.event.addDomListener(window, 'load', function() { 
    var map = new google.maps.Map(document.getElementById('map-canvas'), { 
    center: new google.maps.LatLng(-28, 135), 
    zoom: 4, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var panelDiv = document.getElementById('panel'); 

    var data = new MedicareDataSource; 

    var view = new storeLocator.View(map, data, { 
    geolocation: false, 
    features: data.getFeatures() 
    }); 

    new storeLocator.Panel(panelDiv, { 
    view: view 
    }); 
}); 
+0

이 가장 좋은 예는 수정되지 않습니다. Google의 [DEMO] (https://developers.google.com/maps/articles/phpsqlsearch_v3)에서 확인하십시오. 데이터베이스를 사용하지만 다른 데이터 소스를 사용하도록 수정할 수 있습니다. –

답변

1

봐 :

google.maps.event.addListener(marker, 'click', //myCode); 

이 예에서 정확한 패널 코드입니다. 원하는 정보 창 콘텐츠를 사용자 정의하려면 해당 부분 만 사용하면됩니다.

// Store locator with customisations 
// - custom marker 
// - custom info window (using Info Bubble) 
// - custom info window content (+ store hours) 

var ICON = new google.maps.MarkerImage('medicare.png', null, null, 
    new google.maps.Point(14, 13)); 

var SHADOW = new google.maps.MarkerImage('medicare-shadow.png', null, null, 
    new google.maps.Point(14, 13)); 

google.maps.event.addDomListener(window, 'load', function() { 
    var map = new google.maps.Map(document.getElementById('map-canvas'), { 
    center: new google.maps.LatLng(-28, 135), 
    zoom: 4, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var panelDiv = document.getElementById('panel'); 

    var data = new MedicareDataSource; 

    var view = new storeLocator.View(map, data, { 
    geolocation: false, 
    features: data.getFeatures() 
    }); 

    view.createMarker = function(store) { 
    var markerOptions = { 
     position: store.getLocation(), 
     icon: ICON, 
     shadow: SHADOW, 
     title: store.getDetails().title 
    }; 
    return new google.maps.Marker(markerOptions); 
    } 

    var infoBubble = new InfoBubble; 
    view.getInfoWindow = function(store) { 
    if (!store) { 
     return infoBubble; 
    } 

    var details = store.getDetails(); 

    var html = ['<div class="store"><div class="title">', details.title, 
     '</div><div class="address">', details.address, '</div>', 
     '<div class="hours misc">', details.hours, '</div></div>'].join(''); 

    infoBubble.setContent($(html)[0]); 
    return infoBubble; 
    }; 

    new storeLocator.Panel(panelDiv, { 
    view: view 
    }); 
}); 

심지어 같은 것을 수행

view.createMarker = function(store) { 
    var markerOptions = { 
    position: store.getLocation(), 
    title: store.getDetails().title 
    }; 
    var marker = new google.maps.Marker(markerOptions); 
    google.maps.event.addListener(marker, "click", function() { 
     alert("my code"); 
    }); 
    return marker; 
} 

working example

관련 문제