This JSON array includes a collection of addresses
[
{
"id": 0,
"title": "Coop.Sociale Prassi e Ricerca Onlus",
"latitude": 0,
"longitude": 0,
"address": "Viale Eleonora D'Arborea 12, Roma, IT"
},
{
"id": 0,
"title": "San Lorenzo",
"latitude": 0,
"longitude": 0,
"address": "Viale della Primavera 330, Roma, IT"
},
{
"id": 0,
"title": "Giardinetti",
"latitude": 0,
"longitude": 0,
"address": "Via Molfetta 45, Roma, IT"
},
{
"id": 0,
"title": "Montesacro",
"latitude": 0,
"longitude": 0,
"address": "Viale Parioli, Roma, IT"
},
{
"id": 0,
"title": "Casa",
"latitude": 0,
"longitude": 0,
"address": "Piazza Vescovio, Roma, IT"
}
]Using JavaScript, this file loads the JSON array asynchronously. It contains a list of addresses with corresponding latitude and longitude values that are obtained through an AJAX request. The function codeAddress converts the address to latitude and longitude.
var geocoder;
var map;
var arr = [];
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(41.90832, 12.52407);
var mapOptions = {
zoom: 8,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyD3Xz7-z7U_XzZiaOlx9khhtFSld8vd0k4' +
'&signed_in=true&callback=initialize';
document.body.appendChild(script);
}
window.onload = loadScript;
var xmlhttp = new XMLHttpRequest();
var url = "json/array.json";
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
myFunction(xmlhttp.responseText);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
function myFunction(response) {
arr = JSON.parse(response);
function codeAddress(x) {
var address = arr[x].address;
console.log(arr[x].address);
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
arr[x].latitude = results[0].geometry.location.A;
console.log(arr[x].latitude);
arr[x].longitude = results[0].geometry.location.F;
console.log(arr[x].longitude);
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
}
function myLoop() {
for (i = 0; i < arr.length; i++) {
codeAddress(i);
console.log(arr[i].address);
}
}
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Geocoding service</title>
<script src="js/geocode_ajax.js"></script>
</head>
<body>
<div id="panel">
<input id="address" type="textbox" value="Roma, IT">
<input type="button" value="Geocode" onclick="myLoop()">
</div>
<div id="map-canvas"></div>
</body>
</html>
An error message stating 'codeAddress is not defined' has been returned