JavaScript
GoogleMapsAPI

さくっとGoogleMapsを表示する(API v3版)

More than 1 year has passed since last update.

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.png

example.html


ダウンロード

github