Google maps api v3 マーカー(MarkerManager使用)（自分用メモ）[Google][maps]

MarkerManagerを使ってGoogle maps 上にマーカーを置いてみます。


google-maps-utility-library-v3プロジェクトサイト
Google Code Archive - Long-term storage for Google Code Project Hosting.
HTML

<html>
<head>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markermanager/1.0/src/markermanager.js"></script>
  <script type="text/javascript" src="map.js"></script>
</head>
<body onload="init();">
  <button onclick="displayMarker()">マーカー表示</button>
  <button onclick="hideMarker()">マーカー非表示</button>
  <button onclick="clearMarkers()">マーカー削除</button>
  <div id="map" style="width:45%; height:60%"></div>
</body>
</html>

Javascript(map.js)

var centerLat =  35.678918;
var centerLon = 139.746596;
var sLat      = centerLat;
var sLon      = centerLon;
var zoom = 6;
var num  = 10;
var dist = 0.5;
var defMarker = 'http://maps.google.co.jp/mapfiles/ms/icons/red-dot.png';
var moMarker  = 'http://maps.google.co.jp/mapfiles/ms/icons/blue-dot.png';
var map;
var mMng;

function init() {
  mapOpt = {
    zoom: zoom,
    center: new google.maps.LatLng(centerLat, centerLon),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("map"), mapOpt);
  
  mMng = new MarkerManager(map);

  var listener = google.maps.event.addListener(map, 'bounds_changed', function(){
    createMarkers();
    google.maps.event.removeListener(listener);
    mMng.hide();
  });
}


function createMarkers() {
  var lat = sLat;
  var lon = sLon;
  var no = 1;

  for(var latIdx = 0; latIdx < num; latIdx++) {
    for(var lonIdx = 0; lonIdx < num; lonIdx++) {
      var marker = new google.maps.Marker({
	position: new google.maps.LatLng(lat, lon),
	icon: defMarker,
	title: 'No: ' + no,
	infoWindowOpenTimes: 0 // マーカークリックの度に何重にも吹き出しが
	                       // 表示されないようにするための制御用プロパティ
			       // を追加しておく。
      });
      lat += dist;
      no++;

      mMng.addMarker(addEvent(marker), map.getZoom());
    }

    lat  = sLat;
    lon += dist;
  }
}

function addEvent(marker) {
  google.maps.event.addListener(marker, 'click', function(){
    if(0 == marker.infoWindowOpenTimes) {
      var pos = marker.getPosition();
      var content = 
        marker.getTitle() + '<br/>Lat: ' + pos.lat() + '<br/>Lon: ' + pos.lng();
      var infoWindow = new google.maps.InfoWindow({
        content: content
      });

      google.maps.event.addListener(infoWindow, 'closeclick', function(){
        marker.infoWindowOpenTimes = 0; 
      });
	
      infoWindow.open(map, marker);

      marker.infoWindowOpenTimes += 1;
    }
  });

  google.maps.event.addListener(marker, 'mouseover', function(){
    marker.setIcon(moMarker);
  });

  google.maps.event.addListener(marker, 'mouseout', function(){
    marker.setIcon(defMarker);
  });

  google.maps.event.addListener(marker, 'dblclick', function(){
    marker.setMap(null);
  });

  return marker;
}

function displayMarker() {
  mMng.show();
}

function hideMarker() {
  mMng.hide();
  mMng.refresh();
}

function clearMarkers() {
  mMng.clearMarkers();
}