Google Maps API を使ってみる #JavaScript

案件でGoogle Maps APIを使うことになったので、備忘録を残しておきます。
JavaScriptのみのパターンと、jQueryを使ってJSONからデータを引っ張ってくるパターンをのせます。

１）Google Maps APIを使用してマーカーを表示

HTML

index.html


<!DOCTYPE html>
<html lang="ja">
<head>
<script src="http://maps.google.com/maps/api/js"></script>
<script src="sample.js"></script>
</head>
<body>
<div id="" style="width: 500px; height: 300px;"></div>
</body>
</html>

JavaScript

sample.js


function map_canvas() {
  //マーカーの情報
  var data = new Array();
  data.push({
    lat: '35.681382', //緯度
    lng: '139.766083', //経度
    content: '東京駅' //情報ウィンドウの内容
  });
  data.push({
    lat: '35.678187',
    lng: '139.76817',
    content: '八重洲ブックセンター'
  });

  //初期位置に上記配列の最初の緯度経度を格納
  var latlng = new google.maps.LatLng(data[0].lat, data[0].lng);
  var opts = {
    zoom: 15,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  //地図を表示させるエリアのidを指定
  var map = new google.maps.Map(document.getElementById('map_canvas'), opts);

  var markers = new Array();
  //マーカーを配置するループ
  for (var i = 0; i < data.length; i++) {
    markers[i] = new google.maps.Marker({
      position: new google.maps.LatLng(data[i].lat, data[i].lng),
      map: map
    });
    markerInfo(markers[i], data[i].content);
  }
}
function markerInfo(marker, name) {
  new google.maps.InfoWindow({
    content: name
  }).open(marker.getMap(), marker);
}

//地図描画を実行
google.maps.event.addDomListener(window, 'load', map_canvas);

２）jQueryを使用してJSONデータをひっぱる

JSON

sample.json


{
  "Marker": [
    {
      "lat": 35.59049,
      "lng": 139.79039,
      "content": "場所2",
      "address": "ほげ市1丁目"
    },
    {
      "lat": 35.59059,
      "lng": 139.79049,
      "content": "場所2",
      "address": "ほげ市2丁目"
    },
    {
      "lat": 35.59029,
      "lng": 139.79019,
      "content": "場所3",
      "address": "ほげ市3丁目"
    }
  ]
}

HTML

index.html


<!DOCTYPE html>
<html lang="ja">
<head>
<script src="http://maps.google.com/maps/api/js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="sample.js"></script>
</head>
<body>
<div id="" style="width: 500px; height: 300px;"></div>
</body>
</html>

JavaScript

sample.js


$(function () {
  // jsonファイルの読み込み
  $.ajax({
    url: 'sample.json',
    cache: false,
    dataType: 'json',
    success: function (data) {
      var data: jsonRequest(json);
      initialize(data);
    }
  });
});

// jsonファイル読み込み Markerへデータ格納
// (Markerで使うデータを、jsonのMarkerオブジェクトから集めて配列を作成)
function jsonRequest(json) {
  var data = [];
  if (json.Marker) {
    var n = json.Marker.length;
    for (var i = 0; i < n; i++) {
      data.push(json.Marker[i]);
    }
  }
  return data;
}

// Attach message
function attach_message(map, marker, msg, iw) {
  google.maps.event.addListener(marker, 'click', function (event) {
    iw.setContent(msg);
    iw.open(map, marker);
  });
}

// 複数のMarkerクラスを作成
// Mapクラスを生成して、配列からネストしながらMarkerクラスを追加していく
function initialize (data) {
  var opts = {
    zoom: 15,
    center: new google.maps.Map.Latlng(data[0].lat, data[0].lng), //初期位置を最初のデータの位置へ
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = google.maps.Map(document.getElementById('map_canvas'), opts);
  if (data != null) {
    var i = data.length;
  }
  var infoWindow = new google.mapsInfoWindow();
  while(i-- > 0) {
    var dat = data[i];
    var obj = {
      position: new google.maps.LatLng(dat.lat, dat.lng),
      map: map
    };
    var content = dat.content + '<br>' + dat.address;
    var marker = new google.maps.Marker(obj);
    attach_message(map, marker, content, infoWindow);

    //マップ全体にクリックイベントを追加
    //マップのどこかをクリックすると情報ウィンドウを閉じる
    google.maps.event.addListener(map, 'click', function (e) {
    infoWindow.close();  
    });
  }
}

以上です。

もっと色々なことができそうですが、今回の案件ではこの程度しか使わなそうなのでまたの機会に勉強してみようと思います。