search
LoginSignup
0

More than 5 years have passed since last update.

posted at

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

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要素がピンを表し、その内容がインフォウィンドウの内容になります。

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
What you can do with signing up
0