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

Issues rendering image from nested AJAX call in google map infowindow

user5637 Published in March 20, 2018, 3:24 pm

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 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) {
        var response = data.response.venues["0"];
		var venue_id = response.id;
		var baseUrl = 'https://api.foursquare.com/v2/venues/';
		var picUrl = baseUrl + venue_id + fsParam;
			var venue_data = pic.response.venue;
			self.img_url = venue_data.bestPhoto.prefix + '192x144' + venue_data.bestPhoto.suffix;
          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() {

          infowindow.open(map, marker);
          // sets animation to bounce 2 times when marker is clicked
                    setTimeout(function() {
                    }, 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>



  <meta charset="utf-8">

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

  <title> Local Map</title>



  <div class="container">

    <div class="forminline">





    <div id="map">



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


  <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">




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!

You need to login account before you can post.

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

© 2016 Powered by mzan.com design MATCHINFO