2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-04-28

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

地図の色変更やアイコン設定ができるAPIv3版はこちら

使用例

使用例
<script type="text/javascript" src="gmaps_lite.js"></script>
<script>
$(function(){
	gmaps_lite($("[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"></div>

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

実行結果

example.png
example.html

ダウンロード

github

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?