前々から触ってみたいと思っていた、
Google Map APIで遊んでみました。
右サイドにKubolog Food mapということで並んでいます。
参考にさせていただいたサイトはココ。
http://www.geekpage.jp/web/google-maps-api/
マーカーを押して
ふきだしをだしてそこに記事の
リンクがあるというものを作りました。
更新がかなり手間ですが、、、
ソースは
こんな感じです。
----------------------------------
<div id="map" style="width:185px; height:270px"></div>
↑地図の大きさを決める
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
var point = new GLatLng(35.69445848270644, 139.758882522583);
map.setCenter(point, 15);
//kizan
var mp = new GLatLng(35.69409252257344, 139.75605010986328);
var marker = new GMarker(mp);
map.addOverlay(marker);
↑マーカーの部分
//kizan
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml("【 KIZAN 喜山 】 食べ放題<br /><a href='http://www.evolverdesign.com/kubolog/2006/04/_in_kizan.html'>このお店の記事へ</a>");
});
↑ふきだしの部分
----------------------------------
コメントする