Google Mapの利用 -(4)マーカーの表示-
<<
作成日時 ： 2007/03/05 12:29
>>
トラックバック 0 / コメント 0
先日より試験的に使っている"Google Map"。
現在、ツールボタンやスライダーを設置し大阪駅が表示されるようにしている。
"Google Map"を利用しているサイトでよく見かけるのが、特定の場所に矢印がついて
そこをクリックするとコメントが表示されるものだ。
これもHTMLのソースに手を加えることで実現可能だ。
前回のソースに追記する。
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.addControl(new GLargeMapControl()); //上下左右の移動ボタンと拡大・縮小スライダーを表示
map.addControl(new GMapTypeControl()); //航空写真・地図の切り替えボタンを表示
map.setCenter(new GLatLng(34.702495,135.49417), 15); //場所と縮尺を指定
}
}
//]]>
</script>
↓
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.addControl(new GLargeMapControl()); //上下左右の移動ボタンと拡大・縮小スライダーを表示
map.addControl(new GMapTypeControl()); //航空写真・地図の切り替えボタンを表示
map.setCenter(new GLatLng(34.702495,135.49417), 15); //場所と縮尺を指定
//▼マーカー
var marker = new GMarker(new GLatLng(34.702777,135.495179));
GEvent.addListener(marker,"click", function() {
marker.openInfoWindowHtml("大阪駅");
});
map.addOverlay(marker);
//▲マーカー
}
}
//]]>
</script>
この状態で地図を確認してみる。
大阪駅の上にマーカーが表示されたので、これをクリックする。
これでコメントが表示されるようになった。
どうやら、このマーカーやコメントもある程度のカスタマイズが可能なようだ。
次はこのあたりに手を加えてみようかと思う。
|
