How to populate google map markers using JSON? -
i want use webapi (json)
how can show marker using posx & posy on google map?
it's simple achieve, might not have been tried. below code per json.
javascript:
<script> //debugger; var json; //var json = json.parse('[{"posid":12087,"tagid":11,"tag":"","assetid":14,"asset":"","driver":"","fixid":0,"fix":"no fix","satellites":0,"posx":-25.363882,"posy":131.044922,"posz":59.0,"speed":0.0,"course":237.0,"hdop":0.0,"ignition":0,"engine":"stop","mileage":8.0,"battery":25.5,"fuel":0.0,"locid":0,"location":"8 tuas avenue 18","zoneid":0,"zone":"","remarks":null,"timestamp":"2015-03-17t12:51:50","rxtime":"2015-03-17t12:51:50","temperature":0.0,"temperature2":0.0,"rfid":null,"fuellevel":0.0,"actualtemp":0.0,"isbuffer":false},{"posid":12088,"tagid":11,"tag":"","assetid":14,"asset":"","driver":"","fixid":0,"fix":"no fix","satellites":0,"posx":-25.363882,"posy":141.044922,"posz":59.0,"speed":0.0,"course":237.0,"hdop":0.0,"ignition":0,"engine":"stop","mileage":8.0,"battery":25.5,"fuel":0.0,"locid":0,"location":"8 tuas avenue 18","zoneid":0,"zone":"","remarks":null,"timestamp":"2015-03-17t12:51:50","rxtime":"2015-03-17t12:51:50","temperature":0.0,"temperature2":0.0,"rfid":null,"fuellevel":0.0,"actualtemp":0.0,"isbuffer":false}]'); $.ajax({ 'async': false, 'global': false, 'url': "http://track.asiacom.co.th/fmswebapi/api/posinfo", 'type': "get", 'datatype': "json", 'success': function (data) { json = data; } }); var m = []; function initialize() { var bounds = new google.maps.latlngbounds(); var infowindow = new google.maps.infowindow(); var mylatlng = new google.maps.latlng('103.639275', '1.3208363'); var mapoptions = { center: mylatlng, zoom: 8 //maptypeid: google.maps.maptypeid.hybrid }; var map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions); if (json.length > 0) { $(json).each(function (i) { var latlng = new google.maps.latlng(json[i].posx, json[i].posy); var marker = new google.maps.marker({ position: latlng, map: map, title: json[i].location }); m.push(marker); //extend bounds include each marker's position bounds.extend(marker.position); }); //now fit map newly inclusive bounds map.fitbounds(bounds); } } //google.maps.event.adddomlistener(window, 'load', initialize); $(document).ready(function(){ initialize(); }); </script> html
<div class="map-outer row"> <div id="map-canvas" class="map-view" style="height:700px; width:100%;">hello</div> </div> you have include below js apart jquery lib.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
Comments
Post a Comment