CODEWITHSUNDEEP
jsongoogle-maps-api-3
Wisnu
Wisnu

Reputation: 19

Json in google map

I'm trying to adapt my code with json in google maps. No error but the result is empty. I tried looking at other threads of stackoverflow but did not help me. Thanks

<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
  <script src="indonesia.js"></script>
 <script>

 var infowindow;
       function initialize() {
    var map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: new google.maps.LatLng(-2.6923815579165775, 117.8003720703125),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoom: 5
    });

for (var x in indonesia) {
var building = indonesia[x];
var location = new google.maps.Latlng(building.lat,building.lng);
addMarker(map, building.name, location);
}
}

function addMarker(map, name, location){
var marker = new google.maps.Marker({
position: location,
map: map
});

google.maps.event.addListener(marker,'click', function() {
if (typeof infowindow != 'undefined') infowindow.close();
infowindow = new google.maps.InfoWindow({
content: name
});
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window,'load',initialize());
  </script>
</head> 
<body>`enter code here`
  <div id="map_canvas"></div> 
</body>

there is my json

  var indonesia = [{'name':'Parung Panjang','lat':-6.390030465464293,'lng':106.55689520263672'},
{'name':'Lampung','lat':-3.48635508607207,'lng':103.86421484375},
{'name':'Lampung','lat':-1.944555950646169,'lng':102.63374609375}];

Upvotes: 0

Views: 207

Answers (1)

geocodezip
geocodezip

Reputation: 161404

Javascript is case sensitive google.maps.Latlng is not the same as google.maps.LatLng.

var map;
var indonesia = [{
  'name': 'Parung Panjang',
  'lat': -6.390030465464293,
  'lng': 106.55689520263672
}, {
  'name': 'Lampung',
  'lat': -3.48635508607207,
  'lng': 103.86421484375
}, {
  'name': 'Lampung',
  'lat': -1.944555950646169,
  'lng': 102.63374609375
}];

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var bounds = new google.maps.LatLngBounds();
  for (var x in indonesia) {
    var building = indonesia[x];
    var location = new google.maps.LatLng(building.lat, building.lng);
    addMarker(map, building.name, location);
    bounds.extend(location);
  }
  map.fitBounds(bounds);

}
google.maps.event.addDomListener(window, "load", initialize);

function addMarker(map, name, location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map
  });
  google.maps.event.addListener(marker, 'click', function() {
    if (typeof infowindow != 'undefined') infowindow.close();
    infowindow = new google.maps.InfoWindow({
      content: name
    });
    infowindow.open(map, marker);
  });
}
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

Upvotes: 1

Related Questions