2-3:マーカーを押すと、吹き出しを表示してみる

「2-2:マーカーをオリジナル画像にする」では、オリジナルマーカーを地図上に表示してみました。

今回は、マーカーをクリックしたら吹き出しが表示されるようにしてみましょう。

 


地図上にマーカーが表示された
(表示する)

マーカーに吹き出しを表示するサンプルプログラム


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=[あなたのAPIキー]" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

    function load() {
      if (GBrowserIsCompatible()) {

        //地図を作成
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(35.677335,139.744613), 16);

        //マーカーを作成(国会議事堂)
        var marker = new GMarker(new GLatLng(35.676148,139.74479));
        
//マーカーをクリックしたら、吹き出しの中に写真を表示する
GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml("<center><img src='img/2-3_1.jpg' vspace=5 hspace=5><br>国会議事堂</center>");
});
//マーカーを地図上に配置 map.addOverlay(marker); } } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <div id="map" style="width: 500px; height: 500px"></div> </body> </html>
マーカーをクリックしたら吹き出しを表示するサンプルプログラム

 

サンプルプログラムの解説


吹き出しを表示するコードは、上のサンプルプログラムの赤枠で囲んだ部分です。
GEvent.addListener(source, event, handler);

   イベントを登録する
  source:イベントを登録する対象のもの。
      例えば、マーカーや地図など。

  event:イベントの種類を指定する       イベントは、あらかじめ決められたものが指定できる。       以下にいくつかのイベントを紹介する。         --------------------------------------------------------------------         addmaptype    地図タイプが追加されたとき                  (地図タイプとは、普通の地図や衛星写真の地図など)         --------------------------------------------------------------------         removemaptype   地図タイプが削除されたとき         --------------------------------------------------------------------         click       クリックされたとき         --------------------------------------------------------------------         movestart     マップビュー(地図の表示領域)が移動を開始したとき         --------------------------------------------------------------------         move       マップビューが移動中         --------------------------------------------------------------------         moveend      マップビューの移動が終了したとき         --------------------------------------------------------------------         zoomend      マップビューのズームレベルが変更されたとき         --------------------------------------------------------------------         infowindowopen  吹き出しが表示されたとき         --------------------------------------------------------------------         infowindowclose  吹き出しが閉じられたとき         --------------------------------------------------------------------
  handler:イベントが発生したときに実行するコードを指定する。        つまり今回のサンプルでは、clickイベントが発生したとき        function(){・・・}が実行される。

 

openInfoWindowHtml(point,html, opts(省略可));

   吹き出しを表示する
  point: 吹き出しを表示する位置を指定する。
      マーカーなどが既にpointを持つ場合には省略する。

  html: 吹き出しの中に表示する内容を指定する。        HTML言語を使って表現できる。
  opts: オプションが指定できる。       オプションは以下のようなものです。        pixelOffset: GSize()        selectedTab: integer        maxWidth: integer        onOpenFn: function        onCloseFn: function        mapType: GMapType()        zoomLevel: integer

 






サイト内検索
Google Maps APIプログラミング入門 第2版
Google Maps APIプログラミング入門 第2版
全520ページ。Google Maps API version3を中心に公式ドキュメントより詳しく解説しています。
詳しくはこちら
Google Maps APIプログラミングガイド

Google Maps API Expert 4人が共著で執筆。中級者向けに実用に役立つサンプルを中心に紹介! スマートフォン時代に合わせたGoogle Maps APIの使い方も掲載。
詳しくはこちら