1

I have created an API that returns a json consisting of a latitude and longitude, and wanted to pass that into the Google Maps API, to get the corresponding map.

To get the data from my API I created an ajax request as follows:

scripts.js:

$(document).ready(function(){
  $("button").click(function(){
    $.get("my url", function(data, status){

        //do something with this data

    });
  });
});

After I get the JSON from this, I want to pass the latitude and longitude to the script that Google Maps API provides as follows, inside my index.html.

index.html

<body>
  <h1> JOS Map App </h1>
  <button>Send an HTTP GET request to a page and get the result back</button>
  <script type="text/javascript" src = "js/jquery-3.2.1.min.js"></script>
  <script type="text/javascript" src = "js/scripts.js"></script>
  <div id="map"></div>
    <script>  //THIS ONE!!
      function initMap() {
        var uluru = {lat: , lng: };
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
</body>

Basically, I want to be able to pass the latitude and longitude from my GET request to this script so that I can pass them into the google maps API call. I am fairly new to jQuery, so have no idea how to do this.

Thanks!

1 Answer 1

2

Why not just pass the lat/lng as parameters to the Google Maps init()?

    <script>

    $(document).ready(function(){
      $("button").click(function(){
        $.get("my url", function(data, status){

            initMap(data.lat, data.lng);

        });
      });
    });

    function initMap(lat, lng) {
       var uluru = {lat: lat, lng: lng};
       var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: uluru
       });
       var marker = new google.maps.Marker({
          position: uluru,
          map: map
       });
     }
  </script>

You can move that initMap() function to scripts.js. Just make sure you're loading Google Maps API before your scripts.js.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.