Google MapsTMで遊んでみよう！

最終更新日 2007/11/10
【地図上に配置したアイコンをクリックした場合に写真を表示する】
 　　この例では、仕上げに地図上に配置したアイコンをクリックした場合に写真表示を行います。
 ブラウザで「ソースの表示」を行うとこの見本のJAVAScriptを読むことができます。
　 　
　		  
【説明】
　　差異はクリックしたときに、画像を表示するようにしたところだけです。

　　var map = new GMap2(document.getElementById("map"));
　　map.addControl(new GLargeMapControl());
　　map.addControl(new GMapTypeControl());
　　map.addControl(new GScaleControl());
　　map.setCenter(new GLatLng(34.94097,135.765953), 13);
　　map.setMapType(G_HYBRID_MAP);
　　var icon = new GIcon();
　　icon.image = "http://www.neo-tech-lab.co.uk/GoogleMaps.files/panoramio-marker.png";
　　icon.shadow = "http://www.neo-tech-lab.co.uk/GoogleMaps.files/panoramio-shadow.png";
　　icon.iconSize = new GSize(18, 20);
　　icon.shadowSize = new GSize(22, 20);
　　icon.iconAnchor = new GPoint(6, 20);
　　icon.infoWindowAnchor = new GPoint(5, 1);
　　function createMarker(point, number) {
　　　　var marker = new GMarker(point, icon);
　　　　GEvent.addListener(marker, "click", function() {
　　　　　marker.openInfoWindowHtml(photodata.photos[number-1].photo_title+"<br>"+photodata.photos[number-1].owner_name+"<br><img src
　　 　　　="+photodata.photos[number-1].photo_file_url+" width=200 height=160 >");
　　　　});
　　　　return marker;
　　}
　　var bounds = map.getBounds();
　　var southWest = bounds.getSouthWest();
　　var northEast = bounds.getNorthEast();
　　var lngSpan = northEast.lng() - southWest.lng();
　　var latSpan = northEast.lat() - southWest.lat();
　　for (var i = 0; i < photodata.count; i++) {
　　　　var point = new GLatLng( photodata.photos[i].latitude, photodata.photos[i].longitude );
　　　　map.addOverlay(createMarker(point, i+1));
　　}
　}
}
//]]>