multiple marker google map from json

<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map{height: 100%;}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDB1S8mf8lG-rc7iYUSn4TYVZZsivQoslI"></script>
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script>
var map;
var lokasi = [];

//function initialize(){
  map = new google.maps.Map(document.getElementById('map'), {
  center:{
    lat: -6.18,
    lng: 106.8},
    zoom: 11
  });
//}
//google.maps.event.addDomListener(window, 'load', initialize);

function findLokasi(){
  $.ajax({
    type: "GET",
    url: "phd.json",
    dataType: "json",
    success: function(data){
      var d = new google.maps.InfoWindow();
      var e;
      $.each(data,function(i, b){
        e = new google.maps.Marker({
          position: new google.maps.LatLng(b.lat, b.lng),
          map: map
        });
        lokasi.push(e);
        google.maps.event.addListener(e, 'click', (function(e, i) {
          return function() {
            d.setContent('<div><h3>' + b.nama + '</h3></div>');
            d.open(map, e)
          }
        })(e, i))
      });
    }
  });
}
$(function() {
  findLokasi();
});
</script>
</body>
</html>

//--- file phd.json
[
{
    "lat":"-6.16402808234",
    "lng":"106.903297227",
    "nama":"Kelapa Gading"
},
{
    "lat":"-6.16586244575",
    "lng":"106.762844694",
    "nama":"Green Garden"
},
{
    "lat":"-6.23903446821",
    "lng":"106.847553563",
    "nama":"Tebet"
}
]