Convert a list of file variables "street address" to multiple pins on google maps

Question

Im lost trying to a list of json file variables ("street address") to multiple pins on google maps.

My json file looks like the following.

{
"address_number": {
    "address": "20 test ct",
    "time": "10:00 PM",
    "show_address": "false",
    "code": "000000"
},
"address_number2": {
    "address": "20 test ct",
    "time": "10:00 PM",
    "show_address": "false",
    "code": "000002"
},
"916788": {
    "address": "test addy ct",
    "date": "0011-11-11",
    "time": "11:11",
    "show_address": "True",
    "code": "11111"
},
"519802": {
    "address": "20 test ct",
    "date": "",
    "time": "",
    "show_address": "",
    "code": "000000"
},
"586910": {
    "address": "20 test ct",
    "date": "",
    "time": "",
    "show_address": "",
    "code": "000000"
}

How can I take the ("address") and convert them into multiple pins on the map while the other data sets are listed as a note when said pin is clicked on.

$.ajax({
url: './add_address/data.json',
dataType: 'json',
type: 'get',
cache: true,

success: function (data) {
    $(data.address_number).each(function (index, value) {
        console.log(value.name);
    })
}});

Above is the only ideas I had to accomplish this, besides that Im pretty much lost.

Answer 1

Related question: Google Maps V3 infowindows displaying wrong content on pins

Process through your JSON object, calling the Google Maps Javascript API Geocoder on each element in it:

for (obj in inputJson) { 
  geocode(obj, inputJson[obj]);
}; 

In the geocode function, add a marker at the returned address to the map, and add an infowindow containing the "other" information, use function closure (an IIFE) to associate the input data in the infowindow with the marker:

// modified from https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple
function geocode(name, obj) {
  geocoder.geocode({
    'address': obj.address
  }, function(results, status) {
    if (status === 'OK') {
      bounds.extend(results[0].geometry.location);
      map.fitBounds(bounds);
      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
      });
      // modified from https://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example
      google.maps.event.addListener(marker, 'click', (function(marker, obj) {
        return function(evt) {
          var contentString = '<b>' + name + "</b><br>";
          for (attr in obj) {
            contentString += attr + ":" + obj[attr] + "<br>";
          }
          infowindow.setContent(contentString);
          infowindow.open(map, marker);
        }
      })(marker, obj));
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

Note: for large numbers of markers (large being more than about 10), you will exceed the quota/rate limit for the Google Maps Geocoding service and will have to deal with OVER_QUERY_LIMIT results.

proof of concept fiddle

code snippet:

var geocoder;
var map;
var bounds;
var infowindow;
// modified from https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple
function geocode(name, obj) {
  geocoder.geocode({
    'address': obj.address
  }, function(results, status) {
    if (status === 'OK') {
      bounds.extend(results[0].geometry.location);
      map.fitBounds(bounds);
      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
      });
      // modified from https://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example
      google.maps.event.addListener(marker, 'click', (function(marker, obj) {
        return function(evt) {
          var contentString = '<b>' + name + "</b><br>";
          for (attr in obj) {
            contentString += attr + ":" + obj[attr] + "<br>";
          }
          infowindow.setContent(contentString);
          infowindow.open(map, marker);
        }
      })(marker, obj));
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

function initialize() {
  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
    });
  geocoder = new google.maps.Geocoder();
  bounds = new google.maps.LatLngBounds();
  infowindow = new google.maps.InfoWindow();
  for (obj in inputJson) {
    geocode(obj, inputJson[obj]);
  };
}
google.maps.event.addDomListener(window, "load", initialize);
var inputJson = {
  "address_number": {
    "address": "New York, NY",
    "time": "10:00 PM",
    "show_address": "false",
    "code": "000000"
  },
  "address_number2": {
    "address": "Newark, NJ",
    "time": "10:00 PM",
    "show_address": "false",
    "code": "000002"
  },
  "916788": {
    "address": "Baltimore, MD",
    "date": "0011-11-11",
    "time": "11:11",
    "show_address": "True",
    "code": "11111"
  },
  "519802": {
    "address": "Boston, MA",
    "date": "",
    "time": "",
    "show_address": "",
    "code": "000000"
  },
  "586910": {
    "address": "Philadelphia, PA",
    "date": "",
    "time": "",
    "show_address": "",
    "code": "000000"
  }
};

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>