[javascript] Google Maps javaScript API v3の使い方(応用編:マーカーを変更する)

公開日: : javascript, Web制作 ,

いろんなことが出来るようになった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' //この行を追加
 }); 

これで、マーカーが変更できました。
今回使用したマーカーは、適当に作った下記のものです。

icon

ご自由にお使いください。

さて、表示結果は下記のようになりました。

img_20140826_01

見事にどでかいマーカーが表示されています。
このままでもいいんですが、せっかくなのでマーカーのサイズを小さくしてみましょう。

<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>

これでサイズが小さくなるかなと思ったら、表示領域を決めるだけだったようです。

img_20140826_02

おとなしく、小さいアイコンに変更しました。

iconこちらもご自由にお使い下さい。

 

img_20140826_03

このままでもいいのですが、どうせなら吹き出しにテキストを入れてやろうと思います。

//吹き出し設定
	var contentString = '東京ドーーム';
	var infowindow = new google.maps.InfoWindow({
			content: contentString
		});
	infowindow.open(gmap, gmarker);

これをgmarker.setMap(gmap);の下に入れます。
これで、「東京ドーーム」が表示されました。

img_20140826_04

サンプルページを作成してみました。よかったら見てみてください。

まとめ

まだまだ出来る事はたくさんありますが、今回はマーカーの変更に焦点を当ててみました。

説明がヘタクソなので、わかりにくいとは思いますが、参考になれば幸いです。

 

ad

関連記事

[CSS] メディアクエリ(Media Queries)を考える

Media Queriesとは Media Queriesとは、画面環境に応じてCSSの適用範囲を

記事を読む

[CSS] animationを使ってみる!

色の変化をCSSのみで実装できる! CSS3のキーフレームアニメーションでは、JSで出来る、背景色

記事を読む

[CSS] フォームや登録の進み具合をCSSだけで表現する方法

フォームや登録過程で、今どれくらい進んでいるのか利用者に対して表示する事はとても重要な事だと思います

記事を読む

[CSS] ベンダープレフィックスはどこまで必要か?

各ブラウザが独自に先行実装しているCSS3 CSS3が現在、各ブラウザでも対応状況が進み、だいぶ使

記事を読む

[CSS] CSS3のtransitionを使ってみよう!

CSS3のTransitionは、そんなに難しくない! CSS3では、CSSのマークアップだけでア

記事を読む

[jQuery] OSX風のスクロールバーにするプラグイン!

trackpad-scroll-emulator trackpad-scroll-emulator

記事を読む

[WordPress] 管理画面にカラーピッカー(wp_color_picker)を表示する

カラーピッカー 管理画面でプラグインの設定などでカラーピッカーを表示したい場合、wp_color_

記事を読む

[jQuery] 360°回転させたり、マウスでシーンを移動するプラグイン

rollerblade-js Rollerbladeを使えば、Webサイトに360°回転させてプロ

記事を読む

[WordPress] 自作プラグインの設定など

プラグインを自作してみる WordPressでプラグインを作成する際の設定(フック)などをまとめて

記事を読む

[jQuery]背景画像にぼかしを入れるプラグイン

Blurrプラグインの紹介 BlurrはシンプルなjQueryのプラグインです。 そして、背景画

記事を読む

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ad

[PHP] curl転送してみる(googleに)

curlでgoogle画像検索APIにアクセスしてみます。 cu

[PHP] PDOでMySQLの接続確認をする

PDO PHPでMySQLに接続する際には、mysql_connec

[PHP] ランダムな英数字を生成する

便利系メソッド 今回はPHPでランダムな英数字を作成してみます。

[Swift] プロパティリスト(plist)の値を取得

plistからデータを取得してみます。 こちらのエントリーも参考にし

[Swift] Asset Catalogについて

XCode5から追加されたAsset Catalog。 いままで標準

→もっと見る

  • 1978年の七夕生まれ。 25才でweb業界の門を叩き、28才でフリーランスに。 現在は、フリーランスでマークアップ中心に、wordpressのカスタマイズやデザインをしております。 また、iPhoneアプリの開発もしております。
PAGE TOP ↑