さくっと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