<< ハッカーズバーに行ってきた | main | pingサーバを作ってみた >>

googleマップに画像を配置してリンクを張ってみた

2014.12.16 Tuesday | by こも
※ この記事は『ぼっちブログ Advent Calendar 2014』の12月16日分のエントリとして登録しています。ぼっちなので、ただ一人で興味のあることを気の向くままに書いています。
------------


京都の観光地の紹介ページみたいなのを作りたくて、Googleマップを使う方法を調べていました。

JavaScriptを使って簡単にできるみたいです。
GoogleマップにPin画像を配置して、それをクリックするとWikiの説明ページに飛ぶというコードを書いてみました。

googleマップ
(京都駅、東寺、金閣寺にPin画像を配置 ※スクショなので動きません(^^;; )



特に説明がいらないくらいのシンプルなコードです。
マップ表示時の初期位置や初期ズームサイズが設定できるところがミソですね。

メモとして残しておきます。


<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>マップテスト </title>
	<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"
	        type="text/javascript" charset="UTF-8"></script>
	<!-- JSの読み込み -->
	<script src="./mapctrl.js" type="text/javascript"></script>
	
	<!-- mapの表示サイズの設定 -->
	<style type="text/css">
	<!--
	#map { 
		width: 100%;
		height: 100%;
	}
	-->
	</style>	
</head>


<body onload="mapinit()"> <!-- ピンを指す位置の設定 --> <script type="text/javascript"> addPoint(0, "東寺", 34.979848, 135.748690, "http://ja.wikipedia.org/wiki/%E6%9D%B1%E5%AF%BA"); addPoint(1, "金閣寺", 35.039594, 135.729275, "http://ja.wikipedia.org/wiki/%E9%B9%BF%E8%8B%91%E5%AF%BA"); addPoint(2, "京都駅", 34.985640, 135.758466, "http://ja.wikipedia.org/wiki/%E4%BA%AC%E9%83%BD%E9%A7%85"); </script> <!-- マップ本体 --> <div id="map"></div> </body> </html><

var map;
var data = new Array(); 

// 初期化
function mapinit() {

	// Google Mapで利用する初期設定用の変数
	var latlng = new google.maps.LatLng(35.038992, 135.74707);
	var opts = {
		zoom: 12, // 初期のズームサイズ
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		center: latlng // 初期のズーム位置
	};

	map = new google.maps.Map(document.getElementById("map"), opts);

	var markers = new Array(); 

	// マーカの作成 
	for (i = 0; i < data.length; i++) { 
		markers[i] = new google.maps.Marker({ 
			position: new google.maps.LatLng(data[i].lat, data[i].lng), 
			map: map ,
			title:data[i].name,
			icon: "./image/pin.png" // 表示したい画像
		}); 

		dispInfo(markers[i], data[i].url); 

	}
}

// クリック時の情報をセット 
function dispInfo(marker, url) { 
	// マーカクリック時の遷移 
	google.maps.event.addListener(marker, 'click', function(event) { 
		window.open(url, "_blank"); 
	}); 
} 

// 位置追加メソッド 
function addPoint(pmIndex, pmTitle, pmlatitude, pmlongitude, pmUrl) {
	data.push({no:pmIndex, lat:pmlatitude, lng:pmlongitude, 
                    name:pmTitle, url:pmUrl}); 
}



Comment
Add Comment









Sponsored Link
Recommend
PHP 逆引きレシピ (PROGRAMMER'S RECiPE)
PHP 逆引きレシピ (PROGRAMMER'S RECiPE) (JUGEMレビュー »)
鈴木 憲治,安藤 建一,山田 直明,八木 照朗,山本 義之,河合 勝彦
Recommend
Recommend
Powered
無料ブログ作成サービス JUGEM