弁財天

Google Maps JavaScript API v3
Code Samples

複数のgoogle.maps.Markerに吹き出しをつける

「data[i].content // どのマーカーがクリックされても、その時点では i = 5」の指摘には助かった。

おもろい。ブログなど既存システムのHTMLにブログパーツのように埋め込める。業務の画面に実装を気にせずいきなり地図を表示させ、リンクを使った地図との連携が可能になる。

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
function attachMessage(marker, msg) {
    google.maps.event.addListener(marker, 'click', function(event) {
      new google.maps.InfoWindow({
        content: msg
      }).open(marker.getMap(), marker);
    });
}
	var m = [];
	var iw = [];
	var d = [
	{ title: "済州島米軍基地候補地", pos: new google.maps.LatLng(33.228457,126.471562),
	text: '<span style="font-size : 70%;">済州島<br />カンジョン村(江汀村)<br />米軍基地候補地</span>' },
	{ title: "川内原発", pos: new google.maps.LatLng(31.833776,130.189391),
	text: '<span style="font-size : 70%;"><a href="/roller/ugya/entry/why_sendai_pwr_restart_priority">川内原発</a><br />2014年7月16日<br />規制委の新基準審査で初めて「合格」の内定</span>' },
	{ title: "江蘇省昆山市", pos: new google.maps.LatLng(31.384913,120.98115),
	text: '<span style="font-size : 70%;">江蘇省昆山市<br />2014年8月2日<br /><a href="/roller/ugya/entry/blast-kunshan-city-jiangsu-province">金属工場爆発</a>６５人死亡１２０人以上負傷<br />取引先はGM</span>' },
	{ title: "浙江省温州市", pos: new google.maps.LatLng(27.994267,120.699367),
	text: '<span style="font-size : 70%;">浙江省温州市<br />2014年8月2日<br /><a href="/roller/ugya/entry/blast-kunshan-city-jiangsu-province">中国で放送乗っ取り？</a><br />天安門事件の映像流れる</span>' },
	{ title: "台湾高雄市", pos: new google.maps.LatLng(23.010871,120.666004),
	text: '<span style="font-size : 70%;">台湾高雄市<br />2014年8月1日<br /><a href="/roller/ugya/entry/taiwan-gas-explosion">ガス大爆発</a><br />化学物質プロピレンの可能性</span>' },
	{ title: "久米島", pos: new google.maps.LatLng(26.341111,126.805),
	text: '<span style="font-size : 70%;">久米島<br />2014年5月21日<br /><a href="/roller/ugya/entry/okinawa_du_1520">キノコ雲</a><br />燃料気化爆弾か？</span>' },
	{ title: "GE222便墜落", pos: new google.maps.LatLng(23.565479,119.615143),
	text: '<span style="font-size : 70%;"><a href="/roller/ugya/entry/ah5017">GE222便墜落</a><br />2014年7月23日<br />台湾膨湖島<br />搭乗者にフランス人２名。</span>' },
	];
    google.maps.event.addDomListener(window, 'load', function() {
        var mapdiv = document.getElementById("map_canvas");
        var myOptions = {
            zoom: 5,
            center: new google.maps.LatLng(30.448674,126.254883),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scaleControl: true,
        };
        var map = new google.maps.Map(mapdiv, myOptions);

		for (var i = 0; i < d.length; i++) {
        var m = new google.maps.Marker({
            position: d[i].pos,
            map: map,
            title: d[i].title });
			attachMessage(m, d[i].text);
		}
    });
</script>
<div id="map_canvas" style="width : 600px; height : 650px;"></div>

そう言えば。Google Mapの座標を取得するのが手間だったのだけど、

google.maps.event.addListener(marker, 'click', function() {
    map.setCenter(marker.getPosition());
  });

な感じで取得できるみたいだ。

<script type="text/javascript">
function initialize() {
  var mapdiv = document.getElementById("map_t");
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(43.825592,87.616848)
  };
  var map = new google.maps.Map(document.getElementById('map_t'),
      mapOptions);

  google.maps.event.addListener(map, 'click', function(e) {
    placeMarker(e.latLng, map);
  });
}

function placeMarker(position, map) {
  var marker = new google.maps.Marker({
    position: position,
    map: map
  });
  map.panTo(position);
  google.maps.event.addListener(marker, 'click', function(event) {
      new google.maps.InfoWindow({
        content: "marker.getPosition()<br />" + marker.getPosition()
      }).open(marker.getMap(), marker);
    });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map_t" style="width : 600px; height : 650px;"></div>

クリックするとマーカーを付けて、マーカーをクリックすると座標を表示する。地図はウルムチ周辺。

取得した座標をマウスを使って自分でコピペしてボタンを押してテストするとか。

<script>
var geocoder;
var map;
var infowindow = new google.maps.InfoWindow();
var marker;
function reverse_geocoding() {
  var mapdiv = document.getElementById("map_r");
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(40.730885,-73.997383);
  var mapOptions = {
    zoom: 4,
    center: latlng,
    mapTypeId: 'roadmap'
  }
  map = new google.maps.Map(document.getElementById('map_r'), mapOptions);
}

function codeLatLng() {
  var input = document.getElementById('latlng').value;
  var latlngStr = input.split(',', 2);
  var lat = parseFloat(latlngStr[0]);
  var lng = parseFloat(latlngStr[1]);
  var latlng = new google.maps.LatLng(lat, lng);
  geocoder.geocode({'latLng': latlng}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      if (results[1]) {
        //map.setZoom(4);
        marker = new google.maps.Marker({
            position: latlng,
            map: map
        });
        infowindow.setContent(results[1].formatted_address);
        infowindow.open(map, marker);
      } else {
        alert('No results found');
      }
    } else {
      alert('Geocoder failed due to: ' + status);
    }
  });
}

google.maps.event.addDomListener(window, 'load', reverse_geocoding);
</script>
<div id="panel">
      <input id="latlng" type="text" value="40.714224,-73.961452">
      <input type="button" value="Reverse Geocode" onclick="codeLatLng()">
</div>
<div id="map_r" style="width : 600px; height : 650px;"></div>

Google MapのAPIすげー。JavaScriptだけでブログにシステム構築できる。