baserJSでGoogleMapsを埋め込む

  • 1
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

コーポレートサイトにちょうどいいJavaScriptライブラリ baserJS の解説記事です。

Webサイトと詳しいAPIリファレンスはこちら baserJS Webサイト

GoogleMaps API必須

<script src="//maps.google.com/maps/api/js?sensor=false"></script>

基本

HTML

<div class="map" data-lat="33.606785" data-lng="130.418314"></div>
See the Pen bcRadio v0.6.0-RC by Yusuke Hirao (@YusukeHirao) on CodePen.

JavaScript

$('.maps').bcMaps();

CSS

.maps { width: 400px; height: 300px; }

高さと幅はCSSなどで設定しておく必要があります。

応用

<div class="map" data-address="住所 or キーワード"></div>

注意: キーワード(検索)で住所を特定できるケースがありますが、GoogleMapsのGeocoder APIを利用するため、Googleの仕様変更などによって予告なくキーワードや住所が使用できなくなる可能性があります。なるべくキーワードは使わないようにしてください。

各種オプション

$('.maps').bcMaps({
    zoom: 17
});

オプションを渡してマップをカスタマイズできます。

プロパティ名 型・クラス 説明
zoom number ズーム率
mapTypeControlOptions google.maps.MapTypeControlOptions マップのコントロールオプション
scrollwheel boolean スクロールホイールが有効かどうか
center google.maps.LatLng 地図の中央の座標
styles google.maps.MapTypeStyle[] 地図のスタイル

Goole Mapsの型についてはAPIリファレンスを参照して下さい。