03.md

図形の情報を外部から読み込もう

http://play.mylab.jp/webgis-hands-on/googlemapsapi/sample-3-1/index.html

index.htmlとmain.cssは変更なし

main.js

'strict'

var map = null;

function initMap() {
  map = new google.maps.Map($('#map').get(0), {
    center: {lat: 35.172899, lng: 136.887531},
    zoom: 15
    });

-  // circle
-  var circle_coordinates = [
-    {lat: 35.174044, lng: 136.892795},
-    {lat: 35.168431, lng: 136.886906},
-    {lat: 35.166475, lng: 136.881477},
-  ];
+  $.ajax({
+    url: 'data.json',
+    type: 'GET',
+    dataType: 'json'
+  })
+  .done(function(data){
+    console.log(data);
+    render(data);
+  })
+  .fail(function(){
+    console.log('error');
+  });
+}

-  circle_coordinates.forEach(function(coordinate){
+function render(data){
+  data.circle_coordinates.forEach(function(coordinate){
    var circle = new google.maps.Circle({
      map: map,
      center: coordinate,
      radius: 100
    });
  });
}

data.json

{
    "circle_coordinates": [
    {
            "lat": 35.174044,
            "lng": 136.892795
        },
        {
            "lat": 35.168431,
            "lng": 136.886906
        },
        {
            "lat": 35.166475,
            "lng": 136.881477
        }
    ]
}