Home Issues rendering image from nested AJAX call in google map infowindow
Reply: 1

Issues rendering image from nested AJAX call in google map infowindow

G.Goh
1#
G.Goh Published in 2017-12-07 15:23:31Z

Nested AJAX call are used to get foursquare image URL.

First AJAX call is to derive venue ID from foursquare API and used in 2nd AJAX call to get image URL. Said image URL is used to render venue image in Google Map's Infowindow after each marker is clicked.

var map;
//Locations that automatically show on map 

var locations =[
    {
      title: 'Empire State Building',
      location: {
        lat: 40.748541,
        lng: -73.985758
      } },

    {
      title: 'Radio City Music Hall',
      location: {
        lat: 40.759976,
        lng: -73.979977
      } },

    {
      title: 'Hotel Pennsylvania',
      location: {
        lat: 40.749772,
        lng: -73.990624
      }},

    {
      title: 'The Roosevelt Hotel',
      location: {
        lat: 40.754763,
        lng: -73.977436
      } },

    {
      title: 'Gershwin Theatre',
      location: {
        lat: 40.76234,
        lng: -73.985235
      }}];

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 40.7413549,
      lng: -73.99802439999996
    },
    zoom: 12
  });

 var infowindow = new google.maps.InfoWindow();

  locations.forEach(function(location,i) {
    this.position = locations[i].location;
    var title = locations[i].title;
    var marker = new google.maps.Marker({
      position: position,
      title: title,
      map: map,
      animation: google.maps.Animation.DROP,
      id: i,
    });
    locations[i].marker = marker;
	console.log('wunderbar', location);

     google.maps.event.addListener(marker, 'click', (function(marker, i) {

        return function() {
			var client_id = 'V443OTCAQPJLCRY4QWBFYN3ZK5FDKGJOYDHLMI3O342IRVNN';
			var client_secret = 'AK1JHLEG2D2KW14WF5HYVFNTUYFTBXYS4LDUUNRAHPR5URLB';
			var fourSquareUrl = 'https://api.foursquare.com/v2/venues/search?ll=' + self.position.lat + ',' + self.position.lng + '&query=' + marker.title+'&client_id=V443OTCAQPJLCRY4QWBFYN3ZK5FDKGJOYDHLMI3O342IRVNN&client_secret=AK1JHLEG2D2KW14WF5HYVFNTUYFTBXYS4LDUUNRAHPR5URLB&v=20170824';

        $.getJSON(fourSquareUrl).done(function(data) {
            console.log(data);
        var response = data.response.venues["0"];
		var venue_id = response.id;
        this.address=response.location.formattedAddress;
		var baseUrl = 'https://api.foursquare.com/v2/venues/';
		var fsParam = '/?client_id=V443OTCAQPJLCRY4QWBFYN3ZK5FDKGJOYDHLMI3O342IRVNN&client_secret=AK1JHLEG2D2KW14WF5HYVFNTUYFTBXYS4LDUUNRAHPR5URLB&v=20131016';
		var picUrl = baseUrl + venue_id + fsParam;
		$.getJSON(picUrl).done(function(pic){
			var venue_data = pic.response.venue;
			self.img_url = venue_data.bestPhoto.prefix + '192x144' + venue_data.bestPhoto.suffix;
			console.log(pic);
		});
			
     
          infowindow.setContent('<div><strong>' + locations[i].title +'<div>'+'<div>'+'<img src='+self.img_url+'>'+'</div>'+this.address+'</div>'+'</strong></div>');

//Alert User that there was a data request fail from third part API
    }).fail(function() {
        alert("Error");
    });

          infowindow.open(map, marker);
          // sets animation to bounce 2 times when marker is clicked
                    marker.setAnimation(google.maps.Animation.BOUNCE);
                    setTimeout(function() {
                        marker.setAnimation(null);
                    }, 2130);
        };
      })(marker, i));
  });
 ko.applyBindings(new ViewModel());
}

var Loc = function(data) {
  this.title = data.title;
  this.location = data.location;
  this.marker = data.marker;
  console.log('wonderful', data);
};

var ViewModel = function() {
  var self = this;
};
<!DOCTYPE html>

<html>



<head>

  <meta charset="utf-8">

  <link rel="stylesheet" href="style.css"> 

  <title> Local Map</title>

</head>



<body>

  <div class="container">



    <div class="forminline">


      <ul>

        <li></li>

      </ul>

    </div>

    <div id="map">



    </div>

  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">

  </script>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js'></script>

  <script type="text/javascript" src='app.js'></script>

  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCE5O2RkGKfoHcOJt3JFg4ayHVizN7Dmgk&callback=initMap">

  </script>

</body>



</html>

Accurately render each venue image in infowindow when each marker is clicked once.

When map is loaded, the first click on one marker did not render venue image in infowindow until it is clicked the second time. Chrome's developer tool console showed "net::ERR_FILE_NOT_FOUND".

When a second marker is clicked, image from first marker is rendered in infowindow until it is clicked the second time.

I appreciate any input on this as I am new to Javascript. Thanks in advance!

G.Goh
2#
G.Goh Reply to 2017-12-12 03:17:05Z

Infowindow setcontent was fired before nested AJAX call was completed. Therefore jQuery deferreds was used (with when & then statement) to ensure nested JSON is complete before setting content in infowindow.

Code as follow;

var map;

var locations =[
    {
      title: 'Empire State Building',
      location: {
        lat: 40.748541,
        lng: -73.985758
      } },

    {
      title: 'Radio City Music Hall',
      location: {
        lat: 40.759976,
        lng: -73.979977
      } },

    {
      title: 'Hotel Pennsylvania',
      location: {
        lat: 40.749772,
        lng: -73.990624
      }},

    {
      title: 'The Roosevelt Hotel',
      location: {
        lat: 40.754763,
        lng: -73.977436
      } },

    {
      title: 'Gershwin Theatre',
      location: {
        lat: 40.76234,
        lng: -73.985235
      }}];

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 40.7413549,
      lng: -73.99802439999996
    },
    zoom: 12
  });

 var infowindow = new google.maps.InfoWindow();

  locations.forEach(function(location,i) {
    this.position = locations[i].location;
    var title = locations[i].title;
    var marker = new google.maps.Marker({
      position: position,
      title: title,
      map: map,
      animation: google.maps.Animation.DROP,
      id: i,
    });
    locations[i].marker = marker;
	console.log('wunderbar', location);

     google.maps.event.addListener(marker, 'click', (function(marker, i) {

        return function() {
			var client_id = 'V443OTCAQPJLCRY4QWBFYN3ZK5FDKGJOYDHLMI3O342IRVNN';
			var client_secret = 'AK1JHLEG2D2KW14WF5HYVFNTUYFTBXYS4LDUUNRAHPR5URLB';
			var fourSquareUrl = 'https://api.foursquare.com/v2/venues/search?ll=' + self.position.lat + ',' + self.position.lng + '&query=' + marker.title+'&client_id=V443OTCAQPJLCRY4QWBFYN3ZK5FDKGJOYDHLMI3O342IRVNN&client_secret=AK1JHLEG2D2KW14WF5HYVFNTUYFTBXYS4LDUUNRAHPR5URLB&v=20170824';

        $.when($.getJSON(fourSquareUrl).done(function(data) {
            console.log(data);
        var response = data.response.venues["0"];
		var venue_id = response.id;
        this.address=response.location.formattedAddress;
		var baseUrl = 'https://api.foursquare.com/v2/venues/';
		var fsParam = '/?client_id=V443OTCAQPJLCRY4QWBFYN3ZK5FDKGJOYDHLMI3O342IRVNN&client_secret=AK1JHLEG2D2KW14WF5HYVFNTUYFTBXYS4LDUUNRAHPR5URLB&v=20131016';
		var picUrl = baseUrl + venue_id + fsParam;
		$.getJSON(picUrl).done(function(pic){
			var venue_data = pic.response.venue;
			self.img_url = venue_data.bestPhoto.prefix + '192x144' + venue_data.bestPhoto.suffix;
			console.log(pic);
                        }).then(function() {
		
			
     
          infowindow.setContent('<div><strong>' + locations[i].title +'<div>'+'<div>'+'<img src='+self.img_url+'>'+'</div>'+this.address+'</div>'+'</strong></div>');
    });

    }).fail(function() {
        alert("Error");
    });

          infowindow.open(map, marker);

                    marker.setAnimation(google.maps.Animation.BOUNCE);
                    setTimeout(function() {
                        marker.setAnimation(null);
                    }, 2130);
        };
      })(marker, i));
  });
 ko.applyBindings(new ViewModel());
}

var Loc = function(data) {
  this.title = data.title;
  this.location = data.location;
  this.marker = data.marker;
  console.log('wonderful', data);
};

var ViewModel = function() {
  var self = this;
};
<!DOCTYPE html>

<html>



<head>

  <meta charset="utf-8">

  <link rel="stylesheet" href="style.css"> 

  <title> Local Map</title>

</head>



<body>

  <div class="container">



    <div class="forminline">


      <ul>

        <li></li>

      </ul>

    </div>

    <div id="map">



    </div>

  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">

  </script>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js'></script>

  <script type="text/javascript" src='app.js'></script>

  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCE5O2RkGKfoHcOJt3JFg4ayHVizN7Dmgk&callback=initMap">

  </script>

</body>



</html>

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.312676 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO