Incorporating external API information into Google Maps

Question

Incorporating external API information into Google Maps

My current challenge involves creating a polygon on Google Maps using data obtained from an external API found at .

Upon analyzing the API response, the following information is provided:

{
"id": 28,
"name": "Local spots",
"description": "",
"isprivate": true,
"status": "active",
"created_at": "2014-09-15T09:40:01.747Z",
"geographic_extent": {
    "type": "Polygon",
    "coordinates": [
        [
            [-0.508, 51.682],
            [-0.53, 51.327],
            [0.225, 51.323],
            [0.167, 51.667],
            [-0.508, 51.682]
        ]
    ]
},

I am seeking assistance in extracting the coordinates under 'geographic_extent' and displaying them as a polygon on the Google Map. I believe an AJAX call is necessary, but how do I extract this specific data when the entire array would be returned?

Your help would be greatly appreciated.

Thank you.

Below is the script used to generate the map:

var map;

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
    zoom: 2,
    center: new google.maps.LatLng(2.8,-187.3),
});
}

javascript jquery ajax google-maps google-maps-api-3

Answer 1

Answer №1

To retrieve the 'geographic_extent' element from the AJAX response that is received, you can utilize the JSON.parse method. Example:

var result = JSON.parse('{"id": 28,"name": "Local spots","description": "","isprivate": true,"status": "active","created_at": "2014-09-15T09:40:01.747Z","geographic_extent": {"type": "Polygon",    "coordinates": [[[-0.508, 51.682],[-0.53, 51.327],[0.225, 51.323],[0.167, 51.667],[-0.508, 51.682]]]}');

now you can obtain

-0.508,51.682,-0.53,51.327,0.225,51.323,0.167,51.667,-0.508,51.682

using

result.geographic_extent.coordinates

If you wish to display it as a polygon, use the following script

var triangleCoords = [
          {lat: 25.774, lng: -80.190},
          {lat: 18.466, lng: -66.118},
          {lat: 32.321, lng: -64.757},
          {lat: 25.774, lng: -80.190}
        ];


        var bermudaTriangle = new google.maps.Polygon({
          paths: triangleCoords,
          strokeColor: '#FF0000',
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: '#FF0000',
          fillOpacity: 0.35
        });
        bermudaTriangle.setMap(map);

Take note of how triangleCoords is structured, it's an array of lat, lng objects. In order to plot the polygon retrieved from your AJAX call, you will need to format it in a similar way with an array of lat, lng objects.

http://jsbin.com/kupeyofemo/edit?html,output

Answer 2

To retrieve the 'geographic_extent' element from the AJAX response that is received, you can utilize the JSON.parse method. Example:

var result = JSON.parse('{"id": 28,"name": "Local spots","description": "","isprivate": true,"status": "active","created_at": "2014-09-15T09:40:01.747Z","geographic_extent": {"type": "Polygon",    "coordinates": [[[-0.508, 51.682],[-0.53, 51.327],[0.225, 51.323],[0.167, 51.667],[-0.508, 51.682]]]}');

now you can obtain

-0.508,51.682,-0.53,51.327,0.225,51.323,0.167,51.667,-0.508,51.682

using

result.geographic_extent.coordinates

If you wish to display it as a polygon, use the following script

var triangleCoords = [
          {lat: 25.774, lng: -80.190},
          {lat: 18.466, lng: -66.118},
          {lat: 32.321, lng: -64.757},
          {lat: 25.774, lng: -80.190}
        ];


        var bermudaTriangle = new google.maps.Polygon({
          paths: triangleCoords,
          strokeColor: '#FF0000',
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: '#FF0000',
          fillOpacity: 0.35
        });
        bermudaTriangle.setMap(map);

Take note of how triangleCoords is structured, it's an array of lat, lng objects. In order to plot the polygon retrieved from your AJAX call, you will need to format it in a similar way with an array of lat, lng objects.

http://jsbin.com/kupeyofemo/edit?html,output

Incorporating external API information into Google Maps

Answer №1

Similar questions

Looking for assistance with JQuery and JavaScript?

Is the sliding navigation glitching due to the video background?

Methods like jQuery blink(), strike(), and bold() offer dynamic ways to manipulate

Contrasting the utilization of jQuery versus angular element references within an angular directive

Updating the values of parent components in Vue.js 3 has been discovered to not function properly with composite API

Stopping npm private organization from releasing public packages

What is the solution for addressing the absence of an 'Access-Control-Allow-Origin' header in the requested resource while using axios?

Tips on how to display a Vue component on a new page with Vue.js router

I am looking to fetch information from a different Firestore collection by looping through data using a forEach method within an onSnapshot function

Keep the music playing by turning the page and using Amplitude.js to continue the song

Ways to determine the success of $wpdb->query and retrieve the outcome

What methods are available for drawing on an HTML canvas using a mouse?

Locate the closing anchor tag following the image

My React setup is causing some problems that I need to address

Transform Django Model Instance from Serialized Back to Object using Ajax

What is the formula to determine if x is greater than y and also less than z?

Transitioning React Hover Navbar Design

An issue arises when trying to import the modal popup

Angular 5 with Typescript encountered a failure in webpack due to the absence of the property "data" on the Response

Is there a way to execute an SQL query using ajax?