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