2015年9月1日火曜日

Google Maps API V3の叩き方　その２

さて前回書いたコードだが、実は明らかに無駄な部分がある。
無駄を省けばこうなる。
<!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() {
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
});

var info = new google.maps.InfoWindow();

function putMarker(p) {
  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>");
    info.open(map, marker);
  });
}

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"
  }
];

for (var i = 0; i < place.length; ++i) {
  putMarker(place[i]);
}
})();
</script>
</body>
</html>
情報ウィンドウを複数同時に表示したくないのであれば、最初からInfoWindowは一つだけnewして、イベントのたびにsetContent->openすればいいだけ。
わざわざ現在表示してるオブジェクトを変数に登録したりcloseしたりする必要はない。
調べてた(サンプルになりそうなものを探してた)時になんか違和感を感じてたんだが、原因はこれだったか…。
投稿者 時刻:
ラベル: ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)