baserJS
baserJSDay 17

baserJSで埋め込んだGoogleMapsのピンにインフォウィンドウを表示させる

More than 3 years have passed since last update.

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

GoogleMapsを埋め込む

基本的な埋め込む方法はこちら baserJSでGoogleMapsを埋め込む

インフォウィンドウを表示させる

HTML

<div class="maps" data-lat="33.606785" data-lng="130.418314">
    <div  data-lat="33.606785" data-lng="130.418314">
        <h1>座標1</h1>
        <p>テキストテキスト</p>
    </div>
    <div data-lat="33.606515" data-lng="130.417414">
        <h1>座標2</h1>
        <p>テキストテキスト</p>
    </div>
</div>

JavaScript

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

子にdiv要素をつくるだけ

bcMapsメソッドを実行する要素を基準に、直後のdiv要素がピンを表し、その内容がインフォウィンドウの内容になります。