Ch's barn: Google Maps API v3の叩き方

メモ代わり
一番めんどくさいのはピンを刺す場所をgoogle mapで探して緯度と経度を調べることなのは言うまでもない。
Google Maps JavaScript API V3 Reference
dynamic_icons

ところでマーカーにimage Chartsのdynamic icon使えるのはお手軽でいいのですが、image Chartsってdeprecatedってことは廃止予定なんですよね？
mapsのほうにアイコンだけでも持ってきてほしいものですが…

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="gmap" style="width:640px;height:480px;margin: 0 auto;"></div>
<script src="//maps.googleapis.com/maps/api/js?sensor=FALSE"></script>
<script>
(function() {

function putMarker(p, map, toggleMarker) {
  var info = new google.maps.InfoWindow();
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(p.lat, p.lng),
    icon: "//chart.apis.google.com/chart?chst=d_map_pin_icon_withshadow&chld=bus|" + p.color,
    title: p.name,
    map: map
  });
  google.maps.event.addListener(marker, "click", function() {
    info.setContent(
      "<p style='font-size:120%;font-weight:bold;'>" + p.name +"</p>" +
      "<p>" + p.addr + "</p>");
    toggleMarker(info, map, marker);
  });
}

var toggleMarker = (function() {
  var current = null;
  return function(info, map, marker) {
    if (current !== null) {
      current.close();
    }
    info.open(map, marker);
    current = info;
  };
})();

var place = [
  {
    name: "中央区役所", color: "FF0000",
    lat: 33.5892217, lng: 130.3928651,
    addr: "福岡県福岡市中央区大名2丁目5-31",
  }, {
    name: "博多区役所", color: "00FF00",
    lat: 33.5915037, lng:130.4147805,
    addr: "福岡県福岡市博多区博多駅前2丁目9-3",
  }, {
    name: "東区役所", color: "0000FF",
    lat: 33.617762, lng: 130.417401,
    addr: "福岡県福岡市東区箱崎２丁目５４?１",
  }, {
    name: "早良区役所", color: "FFFF00",
    lat: 33.5818585, lng: 130.3484381,
    addr: "福岡県福岡市早良区百道2丁目1",
  }, {
    name: "南区役所", color: "00FFFF",
    lat: 33.561562, lng: 130.426442,
    addr: "福岡県福岡市南区塩原3丁目25-1"
  }, {
    name: "西区役所", color: "FF00FF",
    lat: 33.5828543, lng: 130.3232053,
    addr: "福岡県福岡市西区内浜1丁目1-4-1"
  }
];

var map = new google.maps.Map(document.getElementById("gmap"), {
  center: new google.maps.LatLng(33.58922, 130.3928),
  zoom: 12,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

for (var i = 0; i < place.length; ++i) {
  putMarker(place[i], map, toggleMarker);
}
})();
</script>
</body>
</html>

Ch's barn

2015年9月1日火曜日

Google Maps API v3の叩き方

0 件のコメント:

コメントを投稿