Google Maps API version3を使ってみる（3）

10-07-19

Google Maps API version3を使ってみる（3）

demo

memo

作業内容

前回のGoogle Maps API version3を使ってみる（2）では、マーカーや情報ウィンドウの基本的な表示について学びましたが、今回はマーカーの見せ方とイベントについて調べてみたいと思います。

マーカーの複数表示設定
マーカーのオリジナル画像設定
情報ウィンドウを1つずつしか表示させない設定
マーカークリックでマップを移動させる設定

--- head内に設定等を記述 ---
<script type="text/javascript">

  //　最後に開いた情報ウィンドウを記憶
  var currentInfoWindow = null;

  function initialize() {
    var latlng = new google.maps.LatLng(33.593754102476126, 130.38095712661743);
    var myOptions = {
      zoom: 17,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP,	  
    };
	
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	
    //　オリジナル画像のマーカー読み込み
    var makerImg = 'img/100719/ico_marker.png';
	
    //　オリジナル画像マーカーの表示（markerCのみに適用）
    var markerA = new google.maps.Marker({
      position: new google.maps.LatLng(33.59232418300553,130.3789624214172),
      map: map,
      title:"ここで書いてます"
    });
    var markerB = new google.maps.Marker({
      position: new google.maps.LatLng(33.59219906392408, 130.38252353668213),
      map: map,
      title:"「すのこ」と読むんですね"
    });
    var markerC = new google.maps.Marker({
      position: new google.maps.LatLng(33.594951641793756, 130.37965893745422),
      map: map,
      icon: makerImg,
      title:"クリックで移動します"
    });
	
    （もうすこし続きます）

上記の通りですが、マーカーの複数表示設定については単にコードを複製して緯度・経度を調整しているだけです。マーカー数がもっと多い場合などはfor文とかそのあたりの書き方をした方が良いんだと思います。
オリジナルのマーカー画像については、マーカーの設定箇所に「icon」を追加し、画像の場所を指定するだけです。

    （つづきになります）
    
    var contentStringA =
    '<h1>ここで書いています</h1>'+
    '<p>福岡県福岡市中央区荒戸になります。<br />' +
    '夜は暴走族と救急車がよく通ります。</p>';
    var contentStringB =
    '<h1>「すのこ」と読むんですね</h1>';

    var infowindowA = new google.maps.InfoWindow({
      content: contentStringA,
      size: new google.maps.Size(350, 100)
    });
    var infowindowB = new google.maps.InfoWindow({
      content: contentStringB,
      size: new google.maps.Size(350, 100)
    });
    
    google.maps.event.addListener(markerA, 'click', function() {
      //　先に開いた情報ウィンドウがあれば、closeする
      if (currentInfoWindow) {
      　currentInfoWindow.close();
      }
      //　情報ウィンドウを開く（currentInfoWindowはinfowindowAへ）
      infowindowA.open(map,markerA);
      currentInfoWindow = infowindowA;
    });
    google.maps.event.addListener(markerB, 'click', function() {
      //　先に開いた情報ウィンドウがあれば、closeする
      if (currentInfoWindow) {
      　currentInfoWindow.close();
      }
      //　情報ウィンドウを開く（currentInfoWindowはinfowindowBへ）
      infowindowB.open(map,markerB);
      currentInfoWindow = infowindowB;
    });
    
    //　markerCをクリックした時のイベント設定  
    google.maps.event.addListener(markerC, 'click', function() {  
      //　クリックしたらmarkerAへ移動させる  
      var movePos = new google.maps.LatLng(33.59232418300553,130.3789624214172);  
      map.panTo(movePos);  
    });
    
  }
</script>

情報ウィンドウについては、デフォルトでは枠内の「×」ボタンを押さない限り閉じない設定となっています。これだと情報ウィンドウがたくさんあり過ぎてマップが見えんよ！てなることもあるので、グローバル変数（currentInfoWindow）とif文で制御し最大1枠までしか開けない設定にしています。

また、サンプルではオリジナルのマーカー画像（markerC）をクリックすると「港町」交差点付近のマーカー（markerA）へ移動するようになっております。指定した座標へはpanToメソッドで移動させてます。