google mapでzoomしたり、マーカーをアニメーションさせたり、情報ウィンドウを閉じたりする

Pocket
[`evernote` not found]

最近google mapをカスタマイズする機会が多いです。
少しづつですが、理解してきた部分もありますので、google mapの小ネタを3つほどご紹介します。

ズームレベルの調整

google mapを描画するときには、必ずズームレベルを指定しますが、これをイベント発生時に変更剃る方法です。
例えば、マーカーをクリックした時に情報ウィンドウを表示しながら、その場所をズームアップするとか。

DEMO

google.maps.event.addListener(marker, 'click', function() {
  map.setZoom(17);
  infowindow01.open(map,marker);
});

マーカーにアニメーションをつける

ネタってほどでもないのですが、たまに見かけるマーカーが降ってくるやつです。
デフォルトの関数で簡単に設定できます。
makerのオプション設定で
animation: google.maps.Animation.DROP
とするだけです。

デモでは、複数のマーカーを順番に落としています。
マーカーの場所を定義しておいて、それをsetTimeoutで時間差表示させています。

DEMO

var latlng = new google.maps.LatLng(36.230012,137.964749);
//markerの位置情報をセット
var positions = [
  new google.maps.LatLng(36.2306,137.964456),
  new google.maps.LatLng(36.238631,137.969306),
  new google.maps.LatLng(36.231085,137.982566),
  new google.maps.LatLng(36.242127,137.968919)
];

var map;
var markers = [];
var iterator = 0;

var options = {
    zoom: 12,
    center: latlng,
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById('map'), options);

//位置情報の配列から順番に表示させる
function drop() {
  for (var i = 0; i < positions.length; i++) {
    setTimeout(function() {
      addMarker();
    }, i * 200);
  }
}

function addMarker() {
  markers.push(new google.maps.Marker({
    position: positions&#91;iterator&#93;,
    map: map,
    draggable: false,
    animation: google.maps.Animation.DROP
  }));
  iterator++;
}
drop();
&#91;/javascript&#93;

<h4 class="subTitle"><span>情報ウィンドウを一つしか表示させない</span></h4>
google map v3になってから、情報ウィンドウは自分で閉じない限りいくつでも表示されてしまいます。あまりユーザビリティ的によくないので、情報ウィンドウは常に一つ以上表示させない方法です。

ざっくり紹介すると
情報ウィンドウの状態を記録する変数(currentInfoWindow)を用意しておいて、情報ウィンドウを開く時は、必ずcurrentInfoWindow.close()とすることで情報ウィンドウは一つだけしか表示させないということです。

<a href="http://googlemaps.googlermania.com/google_maps_api_v3/map_example_singleInfoWindow.html">Google Maps活用講座さん</a>を参考にしました。

<a href="http://meusonho41.com/demo/2013/06/04/index03.html">DEMO</a>

[javascript]
var currentInfoWindow = null;//情報ウィンドウの状態を記録する変数

var latlng = new google.maps.LatLng(36.230012,137.964749);
var options = {
    zoom: 12,
    center: latlng,
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById('map'), options);

var marker01 = new google.maps.Marker({
    position: new google.maps.LatLng(36.230012,137.964749),
    animation: google.maps.Animation.DROP,
    map: map
});

var infowindow01 = new google.maps.InfoWindow({
    content: "松本駅です"
});
google.maps.event.addListener(marker01, 'click', function() {
  //currentInfoWindowが空でなければ閉じる
    if (currentInfoWindow) {
      currentInfoWindow.close();
    }

  //情報ウィンドウを開いて、状態を記録する
    infowindow01.open(map, marker01);
    currentInfoWindow = infowindow01;
});

var marker02 = new google.maps.Marker({
    position: new google.maps.LatLng(36.238874,137.968962),
    animation: google.maps.Animation.DROP,
    map: map
});

var infowindow02 = new google.maps.InfoWindow({
    content: "松本城です"
});
google.maps.event.addListener(marker02, 'click', function() {
    if (currentInfoWindow) {
      currentInfoWindow.close();
    }
    infowindow02.open(map, marker02);
    currentInfoWindow = infowindow02;
});

markerを表示するあたりがかなり冗長な書き方をしていますが、ご愛嬌ということで。
via Google Maps活用講座|Maps API v3でv2のように、1つだけの情報ウィンドウが開くようにする

ノンプログラマーな僕らからすると、googleマップいちいち表示させるのめんどくせぇってこともありますが、基本を理解していると意外と簡単に色々なことができたりします。
今回紹介したのは、その一部ですが、こういったテクニックを覚えておくと地味に便利だったりするかと思います。というか、今回のネタのいくつかは実際に少しはまったりしたことだったりしますので、備忘録として。はい。

Follow me!

Pocket
[`evernote` not found]

コメントは受け付けていません。