how to provide json payload to google map api rather than an array
Question
i am using google maps api to plot some points on the graph,the graph is plotted using a array as shown in the sample below
<!DOCTYPE html>
<html>
<head lang="en">
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var markers = [{
"title": 'point4',
"lat": '1.355333',
"lng": '103.987305',
"description": 'uuu'
}, {
"title": 'point3',
"lat": '1.354432',
"lng": '103.987262',
"description": 'zzz'
}, {
"title": 'point3',
"lat": '1.354432',
"lng": '103.987262',
"description": 'zzz'
},{
"title": 'point3',
"lat": '1.353199',
"lng": '103.986908',
"description": 'zzz'
},{
"title": 'point3',
"lat": '1.353199',
"lng": '103.986908',
"description": 'zzz'
}, {
"title": 'point4',
"lat": '1.352389',
"lng": '103.986538',
"description": 'zzz'
},{
"title": 'point1',
"lat": '1.353751',
"lng": '103.986688',
"description": 'xxxx'
}, {
"title": 'point2',
"lat": '1.352657',
"lng": '103.986184',
"description": 'yyyy'
}, {
"title": 'point3',
"lat": '1.352657',
"lng": '103.986184',
"description": 'zzz'
}, {
"title": 'point4',
"lat": '1.351477',
"lng": '103.985701',
"description": 'uuu'
}, {
"title": 'point4',
"lat": '1.351477',
"lng": '103.985701',
"description": 'uuu'
}, {
"title": 'point4',
"lat": '1.350265',
"lng": '103.985165',
"description": 'uuu'
}];
var gmarkers = [];
var colorVariable = ["yellow", "green", "red", "saffron","yellow", "green", "red","yellow", "green", "red"];
var map;
var degree = 0;
function autoRotate() {
var $elie = $("#dvMap");
degree = degree + 65;
rotate(degree);
function rotate(degree) {
// For webkit browsers: e.g. Chrome
$elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});
$elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});
$elie.css({ '-ms-transform': 'rotate(' + degree + 'deg)'});
$elie.css({ '-o-transform': 'rotate(' + degree + 'deg)'});
for (var i= 0; i < gmarkers.length; i++) {
gmarkers[i].setIcon(icon48.png("red", -degree));
}
}
}
window.onload = function() {
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP,
heading: 90,
tilt: 45,
styles: [
{
"featureType": "poi",
"stylers": [
{ "visibility": "off" }
]
}
]
};
map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var infoWindow = new google.maps.InfoWindow();
var lat_lng = new Array();
var latlngbounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
lat_lng.push(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon:'icon48.png',
title: data.title
});
latlngbounds.extend(marker.position);
(function(marker, data) {
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
gmarkers.push(marker);
}
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
//Loop and Draw Path Route between the Points on MAP
for (var i = 0; i < lat_lng.length; i++) {
var src = lat_lng[i];
var des = lat_lng[i + 1];
var k=i;
i=i+1;
getDirections(src, des, colorVariable[k], map);
}
autoRotate();
}
function getDirections(src, des, color, map) {
//Intialize the Direction Service
var service = new google.maps.DirectionsService();
service.route({
origin: src,
destination: des,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
//Intialize the Path Array
var path = [];
for (var i = 0; i < result.routes[0].overview_path.length; i++) {
path.push(result.routes[0].overview_path[i]);
}
//Set the Path Stroke Color
var polyOptions = {
strokeColor: color,
strokeOpacity: 1.0,
strokeWeight: 8,
path: path,
map: map
}
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
}
});
}
function pinSymbol(color, rotation) {
return {
path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
fillColor: color,
fillOpacity: 1,
strokeColor: '#000',
strokeWeight: 1,
rotation: rotation,
scale: 1
};
}
</script>
</head>
<body>
<div id="dvMap" style="width:1000px;height:1000px"></div>
</body>
</html>
can someone please say how to replace the markers array in the code with a json which has the same elements,what all the changes i need to make in order to do the same using json rather than a array as input
1 answers
solution1
1 ACCPTED 2015-11-19 01:52:09
- change your JSON to be valid (change the
'to"), use jsonlint.com to validate it. - save that in a separate file (on your server in the same domain as the web page you will be displaying it on).
(one option) use JQuery's loadJSON method to load the JSON (since you are already including JQuery).
var jqxhr = $.getJSON("markers.json.txt", function( data, status, jXLR ) {in the callback, process the loaded JSON, displaying the markers and polylines. Remove the dependency on the map's center on the "markers" array, that no longer will exist).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Map of textual locations, rather than coordinates ,with Google Maps API
Google map InfoWindow showing all address in the array rather than 1
How to Map JSON Property by Index rather than Name
How to parse Json to HTML from api rather than console
How to bind Aggregate a list to Object rather than array in a JSON model?
How to parse json arrays into array rather than object
Filtering on object map rather than array in AngularJS
REST Api returning XML rather than JSON
Google Map js showing a map in china rather than the actual location
How to format a Map<Entity,integer> in json payload
Related Tags