[javascript] Google Maps javaScript API v3の使い方(応用編:マーカーを変更する)
公開日:
:
javascript, Web制作 HTML, javascript
いろんなことが出来るようになったv3
昨日、基本編を書きましたが、今回は応用編です。
v3になってから、様々な事が出来るようになりました。
現在地から目的地までのルートを表示したり、マップ上に線を引いたり、本当に色々できます。
その中から、Web制作(PCサイト)で有用な機能を取り上げていきたいと思います。
地図にマーカーを立てる
下記が基本編のコードですが、実は既にこの中にマーカーを設置するコードを付け足していきます。
まず、緯度経度の項目は多用しますので、変数に変更します。
<script> var map; function initialize() { var myLatLng = new google.maps.LatLng(35.70564, 139.751891); var mapOptions = { zoom: 17, center: myLatLng }; var gmap = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); //ここからマーカー設定 var gmarker = new google.maps.Marker({ position: myLatLng, title: "maker-test" }); gmarker.setMap(gmap); } google.maps.event.addDomListener(window, 'load', initialize); </script>
myLatLngの部分が数回出てきていますが、マーカーの場所を指定したりしています。
title部分はマーカーにマウスをしばらく合わせておくと表示される文言です。
それでは、マーカー自体を変更していきましょう。
先ほどのコードの下に下記を追加します。
var marker = new google.maps.Marker({ position: myLatlng, map: map, title:"Hello World!", icon: 'images/icon.png' //この行を追加 });
これで、マーカーが変更できました。
今回使用したマーカーは、適当に作った下記のものです。
ご自由にお使いください。
さて、表示結果は下記のようになりました。
見事にどでかいマーカーが表示されています。
このままでもいいんですが、せっかくなのでマーカーのサイズを小さくしてみましょう。
<script> var map; function initialize() { var myLatLng = new google.maps.LatLng(35.70564, 139.751891); var mapOptions = { zoom: 17, center: myLatLng }; var gmap = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); var image = new google.maps.MarkerImage( "images/icon.png", new google.maps.Size(57,86), //ここでサイズを変更 new google.maps.Point(0,0) ); var gmarker = new google.maps.Marker({ position: myLatLng, title: "maker-test", icon: image }); gmarker.setMap(gmap); } google.maps.event.addDomListener(window, 'load', initialize); </script>
これでサイズが小さくなるかなと思ったら、表示領域を決めるだけだったようです。
おとなしく、小さいアイコンに変更しました。
このままでもいいのですが、どうせなら吹き出しにテキストを入れてやろうと思います。
//吹き出し設定 var contentString = '東京ドーーム'; var infowindow = new google.maps.InfoWindow({ content: contentString }); infowindow.open(gmap, gmarker);
これをgmarker.setMap(gmap);の下に入れます。
これで、「東京ドーーム」が表示されました。
サンプルページを作成してみました。よかったら見てみてください。
まとめ
まだまだ出来る事はたくさんありますが、今回はマーカーの変更に焦点を当ててみました。
説明がヘタクソなので、わかりにくいとは思いますが、参考になれば幸いです。
ad
関連記事
-
-
[CSS] 今さらだけど、覚えておきたい疑似クラス・疑似要素
さて、前回は、CSSのセレクタをおさらいしました。 そして、属性セレクタを取り上げている記事も合わ
-
-
[CSS] 角丸は便利だけど理解に苦しむ時もある
一般的な角丸の使い方 よく使う角丸は、divを角丸にしたり、画像を角丸にしたりすることでしょう。
-
-
[jQuery] クリックしたところから波紋が広がるプラグイン!
Rippler 以前にも波紋のプラグインを紹介しましたが、今回も新たなプラグインを紹介しま
-
-
[CSS] 複数のbackground-imageの設定方法
マルチBackground-imageを使ってみる CSS3では、背景画像を指定する際に複数の画像
-
-
[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第2回]
忙しくて忘れてました。僕です。 さて、今回はもうちょっと見栄えもよくしたいなーなんて考
-
-
[jQuery] Block Scrollプラグイン
今回は、ブロック毎にスクロールするjQueryプラグインのご紹介です。 Block Scroll
-
-
[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第4回]
完全に放置してました、僕です。 別に忘れていた訳じゃないんですが、時間がありませんでした。
-
-
[CSS] 紙の様にふわっとしたエフェクトが全くつかえない!
寒くなってきて動きが鈍い僕です。こんにちわ。 さて、タイトルの件なのですが、たまに見か
-
-
[CSS] 今さらだけど、必ず覚えておきたいCSSセレクタ
CSSセレクタとは? CSSセレクタを意識する事はあまりないと思いますが、今回はおさらいがてら、C
-
-
[Dreamweaver] オプション領域を極める!テンプレート上級編
オプション領域は、難しい! これまで、数回に渡りDreamweaverでのテンプレートの使い方を紹