さくっとGoogleMapsを表示する（API v3版）

data属性に住所や位置情報、ランドマーク、ウィンドウのHTMLを入れるだけで
さくっとGoogleMaps（API版）を表示するJSです。
※一部jQuery使ってます

GoogleMapsのIFRAME埋め込み版はこちら

使用例

使用例

<!-- APIキーの設定を忘れずに。 -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&region=JP&key=YOURAPIKEY&signed_in=false&sensor=false"></script>
<script type="text/javascript" src="gmaps.js"></script>
<script type="text/javascript">
$(function(){
	// こんな感じでオプションを追加指定できます
	gMaps.markerIcon = {
		url: './map-icon.png'
	};
	gMaps.mapOptions.styles[0].stylers = [
		{ hue: "#00FF99" },
		{ saturation: -40 }
	];
	// 表示する
	gMaps.init($("[data-address]"));
});
</script>
<div class="map-canvas" data-address="東京スカイツリー"></div>
<div class="map-canvas" data-address="35.667480, 139.727275"></div>
<div class="map-canvas" data-address="福岡市中央区大名2丁目4−22" data-html="#akasaka"></div>
<div style="display:none;" id="akasaka"><h4>福岡市中央区大名2丁目4−22</h4><p>スタバがあるよ</p></div>

<style type="text/css">
<!--
.map-canvas {
	margin: 10px;
	height: 200px;
	width: 600px;
}
-->
</style>

実行結果

example.html

ダウンロード

github