Read JSON value Coordinates in JavaScript & Plot to Google Map

Question

I'm trying to Plot google map by getting the coordinates from database.

I've converted the data into JSON & trying to get locations from this JSON.

The JSON is:

[
{"GPS_COORDINATES":"29.392498333333332,71.69455666666666","TOWN":"T00031","LOCALITY":"107","SLOCALITY":"005","STATUS_DATE":"2017-09-16 00:00:00.000","TOTAL_SKU":"0"},
{"GPS_COORDINATES":"29.392564999999998,71.69445666666667","TOWN":"T00031","LOCALITY":"107","SLOCALITY":"005","STATUS_DATE":"2017-09-26 00:00:00.000","TOTAL_SKU":"1"},
{"GPS_COORDINATES":"29.400855,71.66181499999999","TOWN":"T00031","LOCALITY":"107","SLOCALITY":"005","STATUS_DATE":"2017-10-15 00:00:00.000","TOTAL_SKU":"1"}
]

I've tried the following code:

var ltlng = [];

var HiddenValue_gps_Coordinates = document.getElementById("<%=HF_gps_Coordinates.ClientID%>").value;

for (var i = 0; i < HiddenValue_gps_Coordinates.length; i++) {
    var obj = HiddenValue_gps_Coordinates[i][0];

    //ltlng.push(new google.maps.LatLng(obj.GPS_COORDINATES));
    ltlng.push(new google.maps.LatLng(HiddenValue_gps_Coordinates[i][0]));
}

The JSON is set into the HiddenField by using C#

Reference to: JavaScript loop through json array? , I've tried the following code which is showing "undefined" in Console:

var HiddenValue_gps_Coordinates = document.getElementById("<%=HF_gps_Coordinates.ClientID%>").value;

for (var i = 0; i < HiddenValue_gps_Coordinates.length; i++)
{
     var obj = HiddenValue_gps_Coordinates[i];
     console.log(obj.GPS_COORDINATES);      
     ltlng.push(new google.maps.LatLng(HiddenValue_gps_Coordinates[i][0]));
 }

This is not working for me. Please Help

UPDATE:

The following code retrieved the coordinates very fine & print them to Console:

 var HiddenValue_gps_Coordinates =JSON.parse(document.getElementById("<%=HF_gps_Coordinates.ClientID%>").value);          

            for (var i = 0; i < HiddenValue_gps_Coordinates.length; i++)
            {
                var obj = HiddenValue_gps_Coordinates[i];
                console.log(obj.GPS_COORDINATES);      
                         //The following is not working   
                ltlng.push(new google.maps.LatLng(obj.GPS_COORDINATES));
            }

This is the snapshot of the Console:

But still I'm unable to plot the markers on Google map by using these Coordinates.

Please Help

score 1 · Answer 1 · answered Aug 16 '18 at 09:21

1

First, check that the string is displayed correctly doing:console.log(HiddenValue_gps_Coordinates)

That value is a string, not a JavaScript object.

So you need to convert the JSON string into a JavaScript object by doing this:

 var myObject = JSON.parse(HiddenValue_gps_Coordinates)

This should work :)

answered Aug 16 '18 at 09:21

lorenzo

627
8
12

Thanks a lot. The logging is fine now, but the coordinates are not plotting on google map – Alina Anjum Aug 16 '18 at 09:28
@AlinaAnjum Happy this helped. Check also the type of the value, maybe Google Maps expects a float value and not a string. I don't know Maps APIs anyway so I can't say if it is so – lorenzo Aug 16 '18 at 09:32

VDWWD · Accepted Answer · 2018-08-16T09:47:44.950

You have to tell javascript that it is a JSON object with JSON.parse. Then you can access the properties like you would in code behind.

<script type="text/javascript">

    var HiddenValue_gps_Coordinates = JSON.parse(document.getElementById("<%=HF_gps_Coordinates.ClientID%>").value);

    for (var i = 0; i < HiddenValue_gps_Coordinates.length; i++) {
        ltlng.push(new google.maps.LatLng(HiddenValue_gps_Coordinates[i].GPS_COORDINATES));
    }

</script>

Maybe you have to split the coordinates since they are in one property of the json (not tested)

var obj = HiddenValue_gps_Coordinates[i].GPS_COORDINATES.split(",");
ltlng.push(new google.maps.LatLng(obj[0], obj[1]));

UPDATE

Here a complete working example

<asp:HiddenField ID="HF_gps_Coordinates" runat="server" />

<div id="map_canvas" class="map_canvas" style="width: 400px; height: 400px;"></div>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=XXX&language=nl"></script>
<script type="text/javascript">

    var myOptions = {
        zoom: 11,
        center: new google.maps.LatLng(29.9697393, 71.6469966),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var HiddenValue_gps_Coordinates = JSON.parse(document.getElementById("<%=HF_gps_Coordinates.ClientID%>").value);

    for (var i = 0; i < HiddenValue_gps_Coordinates.length; i++) {
        var obj = HiddenValue_gps_Coordinates[i].GPS_COORDINATES.split(",");

        var marker = new google.maps.Marker({
            map: map,
            position: new google.maps.LatLng(obj[0], obj[1]),
            title: 'vdwwd'
        });
    }
</script>

Thanks, @Odle098 answer worked for me, however I'm still unable to plot the coordinates on Map — Alina Anjum, Aug 16 '18 at 09:34
@AlinaAnjum, I created a full working sample for you. This should work if you have a correct API key from google. — VDWWD, Aug 16 '18 at 09:49

Read JSON value Coordinates in JavaScript & Plot to Google Map

2 Answers2