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>