[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

関連記事

[Dreamweaver] テンプレート機能を使う!初級〜中級編

まだまだある便利機能! 既に、上級編まで紹介してしまってますが、抜けていたので、すこし簡単です。

記事を読む

[CSS] animationを使ってみる!

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

記事を読む

no image

[CSS] 今さらだけど、覚えておきたい疑似クラス・疑似要素

さて、前回は、CSSのセレクタをおさらいしました。 そして、属性セレクタを取り上げている記事も合わ

記事を読む

[HTML] 初心者を脱却するためのHTMLの心構え!

デザインを見たら、まずレイアウトの方法をイメージしよう 僕は、基本的にデザインを頂いたときに、すぐ

記事を読む

[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第2回]

忙しくて忘れてました。僕です。 さて、今回はもうちょっと見栄えもよくしたいなーなんて考

記事を読む

[CSS] clearfixの使い方を考える

現在のclearfix 以前は、IE6に対応させるためにソースがちょっと多かったですが、現在はかな

記事を読む

[CSS]印刷用CSSの設定方法

印刷用のCSSは、設定が簡単! 普通にサイトを作っていると、結構印刷用のCSSの設定もお願いされま

記事を読む

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

まだまだあるぞ!Google Maps javaScript API v3 さて、2回にわたって紹

記事を読む

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

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

記事を読む

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

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

記事を読む

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 ↑