« 温暖化はやっぱり人のせい? | トップページ | 大量の恐竜の卵たち »

2007.02.08

GoogleMapsAPIの使い方 #3

GoogleMapsAPIを使った方が、他の地図サービスより軽くなるとは言え、やっぱり複数の地図を貼ると、どうしても重たくなりますね・・・・。

というわけで、今回はサンプル地図はリンク先に貼ることにします(汗)。
前の回はこちら。
GoogleMapsAPIの使い方 #1
GoogleMapsAPIの使い方 #2

今回はマーカーの設定です。
■地図にマーカーを貼る

前回の
map.openInfoWindow(map.getCenter(),
document.createTextNode("東京都庁~~!!"));
の部分は一旦削除しておいてくださいね。

この変わりに以下のスクリプトを足します。
var point = new GLatLng(35.68937,139.691763);
var marker = new GMarker(point);
map.addOverlay(marker);

これで、都庁の位置と同じ場所にマーカーがつきます。
http://shinobu.cocolog-nifty.com/apty/maps/maps_marker2.html

■マーカーに吹き出しメッセージをつける
マーカーのスクリプトの次の行に以下のスクリプトを足します。
map.addOverlay(marker);

marker.openInfoWindowHtml('<strong>東京都庁~~!!</strong>');
前回は、画面の中心に吹き出しがついたけど、これならマーカーの上に出ますよ。

また、この吹き出しにリンクを貼ることもできます。
marker.openInfoWindowHtml('<a href=""http://shinobu.cocolog-nifty.com/apty/>
しのぶ</a> <strong>東京都庁~~!!</strong>');

注:ここではわざと改行していますが、1行内に書いてくださいね。

できあがったのがこれ。
http://shinobu.cocolog-nifty.com/apty/maps/maps_marker3.html
リンク先をクリックすると別窓でSHINOblogが開きます。
都庁からSHINOblogへリンク、ってのも何だかなって感じですが(笑)。
スクリプトは以下のとおり。
赤太字の部分が前回から変更したところです。

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=APIキー"
type="text/javascript"></script>
<script type="text/javascript">

//<![CDATA[

function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.68937,139.691763), 18);
map.setMapType(G_SATELLITE_TYPE);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
var point = new GLatLng(35.68937,139.691763);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml('<a href="http://shinobu.cocolog-nifty.com/apty/"target="_blank">SHINOblog</a><strong>東京都庁~~!!</strong>');
}
}
//]]>
</script>
</head>

<body bgcolor="#FFFFFF" onload="load()" onunload="GUnload()">
<div id="map" style="width: 400px; height: 400px"></div>

■オマケ
住所を打ち込むと、その場所に移動します。
http://shinobu.cocolog-nifty.com/apty/maps/maps_marker4.html

|

« 温暖化はやっぱり人のせい? | トップページ | 大量の恐竜の卵たち »

ウェブログ・ココログ関連」カテゴリの記事

コメント

こんにちは (*^_^*)
私もAPIで貼り付けていましたが、回線が遅いところでは厳しいですね・・(^_^;)

APIはズボラな私は
Google Maps簡単作成ツール:GMapCreator
http://www.geekpage.jp/web/google-maps-api/gmapcreator/
というのを使っていますが、最近は・・・(^^ゞ

投稿: chandra | 2007.02.10 23:45

>chandraさん
うわあ!これは便利!!!

私もこんなのを見つけてはいたんです。
http://nyanjiro.net/GoogleMapsGenerator.html
だけど、chandraさんが教えてくださったサイトの方が
追加できる機能が断然多いですね~。

もうGoogleMapsAPIの何が面倒って、
手作業で作らなきゃいけないのが大変なんですよね~。
そう考えると、いろんな地図作成サービスをやってるサイトって
本当にエライなと思ってしまうんですが
APIだけでも充分重いのに、他のサービスサイトを経由すると
もう「いつまで読み込みしてるんだよ!」てな状態なんですよね・・・。

んでもやっぱり、重いことは重い・・・。
GoogleMapsを貼るときは、やっぱり別窓が無難ですね(涙)。

投稿: しのぶ | 2007.02.13 20:12

I should pronounce, as a large amount as I enjoyed reading what you had to say, I couldnt help excluding spend leisure activity later than a while. Its as condition you had a fantastic grasp resting on the subject substance, on the contrary you forgot to contain your us your readers. Maybe you should imagine concerning this from far-flung extra than one approach. Before possibly you shouldnt generalize as a result by far. Its better proviso you imagine in relation to what others may have to utter in its place of just free for a gut corollary to the subject. Ponder regarding adjusting your peculiar belief administer and generous others who may interpret this the benefit of the doubt.

投稿: orthotic insoles for plantar fasciitis | 2013.07.31 09:27

MApYhl I really liked your blog article. Fantastic.

投稿: top seo guys | 2013.11.05 19:27

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/12358/13829138

この記事へのトラックバック一覧です: GoogleMapsAPIの使い方 #3:

« 温暖化はやっぱり人のせい? | トップページ | 大量の恐竜の卵たち »