single サイトにGoogle Mapを埋め込んで、オリジナルアイコンで複数のマーカーを表示させる方法 | Heastea's Blog , loves Music & Movies

調べてもなかったので(見つけられなかっただけかも?)

一応メモ。

 

<HTMLに読み込むjsファイル>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript" src="js/googlemap.js"></script>

※googlemap.js の名前はご自由に。

 

HTMLのbodyタグに

<body onload="initialize()">

も記述してね₍₍ (ง ˙ω˙)ว ⁾⁾

 

あと、マップを表示させたい部分のHTMLのidを自分は「gmap」としましたが、

そこもお好みで変更してください₍₍ (ง ˙ω˙)ว ⁾⁾

(js内にも指定の記述あり。)

 

 

<googlemap.js内の記述>
function initialize() {

	/*   位置情報と表示データの組み合わせ  */
	var data = new Array();
	data.push({position: new google.maps.LatLng(35.658517, 139.701334,), content: '渋谷駅'});
	data.push({position: new google.maps.LatLng(35.690921, 139.700258), content: '新宿駅'});

	var myMap = new google.maps.Map(document.getElementById('gmap'), {
		zoom: 16,
		center: new google.maps.LatLng(35.658517,139.701334),
		scrollwheel: false,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	});

	for (i = 0; i < data.length; i++) {
		var myMarker = new google.maps.Marker({
			icon: new google.maps.MarkerImage( 'img/access/map_icon_0'+ (i+1) +'.png', new google.maps.Size(100,64), new google.maps.Point(0,0)),
			position: data[i].position,
			map: myMap
		});
	}
}

 

 

解説

 

1,マーカーを表示させたいポイントの指定

data.push({position: new google.maps.LatLng(35.658517, 139.701334,), content: '渋谷駅'});

「35.658517 , 139.701334」

これは緯度・経度の数値です。

今回でいうと「渋谷駅」の緯度と経度の数値。

 

グーグルマップで調べたい住所を検索すると、表示されたURLに記述されてます。

ss

 

左が緯度・右が経度ですね₍₍ (ง ˙ω˙)ว ⁾⁾

 

var data = new Array();
	data.push({position: new google.maps.LatLng(35.658517, 139.701334,), content: '渋谷駅'});
	data.push({position: new google.maps.LatLng(35.690921, 139.700258), content: '新宿駅'});

つまり、ここでは表示させたい住所の一覧が格納された配列を作ってます(ヽ´ω`)

「 .push 」は、javascript push とか検索すれば出てきます₍₍ (ง ˙ω˙)ว ⁾⁾

 

2,表示設定あれこれ

var myMap = new google.maps.Map(document.getElementById('gmap'), {
		zoom: 16,
		center: new google.maps.LatLng(35.658517,139.701334),
		scrollwheel: false,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	});

→ getElementById( ‘ gmap ‘ ) ・・・ マップを表示させるHTML要素のID名を指定します。

→ zoom : 16 ・・・ 表示倍率(数字上げると拡大:下げると縮小)

→ center : ~~~ ・・・ 表示させる中心地(渋谷駅の緯度・経度になってる。)

→ map TypeId : ~~~ ・・・ 地図のタイプが選べる(ROADMAPの部分を変えればOK、詳しくはググってね。)

 

3,for文で回して、各マーカーを表示していく

for (i = 0; i < data.length; i++) {
		var myMarker = new google.maps.Marker({
			icon: new google.maps.MarkerImage( 'img/access/map_icon_0'+ (i+1) +'.png', new google.maps.Size(100,64), new google.maps.Point(0,0)),
			position: data[i].position,
			map: myMap
		});
	}

ここでは、for文で各マーカーの情報を順番に取得してます₍₍ (ง ˙ω˙)ว ⁾⁾

<アイコン画像のURLの指定>

icon: new google.maps.MarkerImage( 'img/access/map_icon_0'+ (i+1) +'.png', new google.maps.Size(100,64), new google.maps.Point(0,0))

自分は各アイコンのファイル名を、

1個目:map_icon_01.png

2個目:map_icon_02.png てな感じで設定してるので、

for文が0から回ってくため、1足した数で回してます(ヽ´ω`)

以下ご自身の環境に合わせて書き換えてくださいませ。

→ img/access/map_icon_0′ + (i+1) + ‘.png’ ・・・ 画像のパス

→ new google.maps.Size(100,64) ・・・ ここの数値は表示させるアイコンのwidthとheightです。

→ new . google.maps.Point(0, 0) ・・・ 画像データの中で、どの部分を起点として表示させるかです。(省略可)

 

position: data[i].position,

ここではさっき作った住所の緯度・経度の配列を呼んでるだけです。

なので、画像ファイルの順番と、data配列に住所を入れる順番だけ揃える必要があります₍₍ (ง ˙ω˙)ว ⁾⁾

 

map: myMap

これもさっき用意した表示設定を呼んでるだけですね₍₍ (ง ˙ω˙)ว ⁾⁾

 

以上でございます(ΦωΦ)

これであなたも素敵なグーグルマップライフの仲間入り₍₍ (ง ˙ω˙)ว ⁾⁾

 

 

 

サイトにGoogle Mapを埋め込んで、オリジナルアイコンで複数のマーカーを表示させる方法
Tagged on:                                         

コメントを残す

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

Real time web analytics, Wordpress visitor counter, Wordpress visitor tracking
100{20584d0259f07eb7fe5ffcbb36e75c3ee4e7cb3757288cf19821d90a02bf8bf2}Japan Japan

Total: 89