コーポレートサイトにちょうどいい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>
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リファレンスを参照して下さい。