Google mpa api - infowindows 使用

主要流程參考 http://www.svennerberg.com/2009/09/google-maps-api-3-infowindows/


首先，先建立google map


// Creating an option object for the map
var options = {
zoom: 7,
center: new google.maps.LatLng(56.83, 15.16),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Initializing the map
var map = new google.maps.Map(document.getElementById('map'), options);
// Creating a marker
var marker = new google.maps.Marker({
position: new google.maps.LatLng(56.8848, 14.7730),
map: map,
title: 'My workplace'
});




宣告 InfoWindow(), 包含顯示的內容在 content 裡面


// Creating an InfoWindow object
var infowindow = new google.maps.InfoWindow({
content: 'Hello world'
});



增加監聽事件，點選標記後就會顯示 infowindow


google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});




Google 說明文件:
http://code.google.com/intl/zh-TW/apis/maps/documentation/javascript/overlays.html#InfoWindows