Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Convert a list of file variables “street address” to multiple pins on google maps without wasting too much if your time.
The question is published on by Tutorial Guruji team.
The question is published on by Tutorial Guruji team.
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
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.
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>
We are here to answer your question about Convert a list of file variables “street address” to multiple pins on google maps - If you find the proper solution, please don't forgot to share this with your team members.