Google 加载时未显示地图

Question

我正在开发一个应用程序，我使用 2 API 的 a.k.a Instagram API 和 Google 地图 API。使用 AJAX，我通过 tag 名称获得了第一组图像 filtered。在第一组中，我们收到 20 张图像。在接收到的图像中，具有 latitude 和 longitude 信息的图像（地理标记图像）显示在地图上。

现在第一次加载我的页面时，我看不到地图。但是当我按下加载更多按钮以获取下一组图像时，地图也可以正常显示我之前的图像。

这是页面加载时发生的代码：

$( window ).load(function() {
    $.ajax({
      type: "GET",
      url: "https://api.instagram.com/v1/tags/nyc/media/recent?client_id=02e****",
      dataType:'JSONP',
      success: function(result) {
        onAction(result, 2, tag);
        instaMap(result, 2, from);
      }
    });
});

这些是被调用的函数：

 /**
  * [initialize description]
  * Initialize the map with markers showing all photos that are geotagged.
 */
 var initialize = function(markers) {
 var bounds = new google.maps.LatLngBounds(),
mapOptions = {
  scrollwheel: false,
  mapTypeId: 'roadmap',
  center: new google.maps.LatLng(22.50, 6.50),
  minZoom: 2
},
gmarkers = [],
map,
positions,
markCluster;

markers = remDuplicate(markers);

// Info Window Content
var infoWindowContent = [];
for (var j = 0; j < markers.length; j++ ) {
  var content = [
  '<div class="info_content">' +
  '<h3>' + markers[j][2] + '</h3>' +
  '<a href="' + markers[j][3] + '" target="_blank">' +
  '<img src="' + markers[j][4] + '" style="z-index:99999">' + '</a>' +
  '</div>'
  ];
  infoWindowContent.push(content);
}

// Display a map on the page
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setTilt(45);

// Display multiple markers on a map
var oms = new OverlappingMarkerSpiderfier(map);
var infoWindow = new google.maps.InfoWindow(), marker, i;

// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
  positions = new google.maps.LatLng(markers[i][0], markers[i][1]);
  marker = new google.maps.Marker({
    position: positions,
    map: map,
    animation:google.maps.Animation.BOUNCE,
    title: markers[i][2]
  });

  oms.addMarker(marker);

  // Allow each marker to have an info window
  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infoWindow.close();
      infoWindow.setContent(infoWindowContent[i][0]);
      infoWindow.open(map, marker);
      map.setCenter(marker.getPosition());
    };
  })(marker, i));

  gmarkers.push(marker);
}

google.maps.event.addListener(map, 'click', function() {
  infoWindow.setMap(null);
});

markCluster = new MarkerClusterer(map, gmarkers);

// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
  map.setZoom(2);
  google.maps.event.removeListener(boundsListener);
});

};

 /**
  * [onAction]
  * OnAction() function helps in loading non-geotagged pics.
  *
  * @param  {[type]} result [Result retruned from the Instagram API in json format]
  * @param  {[type]} likey  [hearts the user has entered as per which the posts will be filtered]
  */
  var onAction = function (result, likey, tag) {
$('.load-pics').remove();

if (result.pagination.next_url) {
  paginate = removeURLParameter(result.pagination.next_url, 'count');
}

$.each(result, function(key, value) {
  if (key === 'data') {
    $.each(value, function(index, val) {
      liked = val.likes.count;
      link = val.link;
      imgUrl = val.images.low_resolution.url;
      locations = val.location;

      if (liked >= likey) {
        if (locations === null) {
          output = '<li class="img-wrap">' + '<div class="main-img">' +
          '<a href="' + link + '" target="_blank">' +
          '<img src="' + imgUrl + '" ><span class="hover-lay"></span></a>' +'<p>' +
          '<span class="heart"></span><span class="likes-no">' + liked + '</span>' +
          '<span class="comment-box"></span><span class="comment-no">' +
          val.comments.count + '</span> ' + '</p>' + '</div>' +
          '<div class="img-bottom-part">'+ '<a href="" class="profile-pic"></a>' + '<div class="headin-hastag">' +
          'by ' + '<h2>Sebastien Dekoninck</h2><a href="" class="has-trand">#hello  <span>#kanye</span>  #helloagain  #tagsgohere</a></div>'
          +'</div></li>';
          $('#instafeed').append(output);
        }
      }
    });
  }
});

if ($('#instafeed').children().length === 0) {
  alert('There are no pics with ' + likey + ' likes or #' + tag + ' was not found.');
} else {
  // $('.not-geo').remove();
  // $('#instafeed').before('<button class="not-geo">Click To See Images That Are Not Geotagged <img src="assets/imgs/down.png" ></button>');
}
$('#instafeed').append('<div class="load-pics"><button id="show-more">Show more <span></span></button> </div>');
};

/**
 * [instaMap]
 * instaMap() will be the function which will deal with all map based functionalities.
*/
var instaMap = function(result, likey, from) {
$('.load-mark').remove();

if (result.pagination.next_url) {
  pagiMap = removeURLParameter(result.pagination.next_url, 'count');
}
$.each(result, function(key, value) {
  if (key === 'data') {
    $.each(value, function(index, val) {
      liked = val.likes.count;
      link = val.link;
      imgUrl = val.images.low_resolution.url;
      locations = val.location;

      if (liked >= likey) {
        if (locations && locations.latitude !== null) {
          tempArr = [
          locations.latitude,
          locations.longitude,
          val.user.username,
          val.link,
          val.images.low_resolution.url
          ];
          mark.push(tempArr);
        }
      }
    });
  }
});
if (mark.length) {
    initialize(mark);
    $('.map-parent-wrapper').append('<div class="load-mark"><button id="show-mark">See More </button></div>');
} else {
    alert('No geotagged pics found in the retrieved set. Click see more');
    $('.map-parent-wrapper').append('<div class="load-mark"><button id="show-mark">See More </button></div>');
}
};

我创建了一个 查看更多 按钮来检索下一组图像并将它们加载到地图上。单击查看更多时，一切似乎都正常。不知道为什么会这样。 Console.log 没有显示任何错误。此外，我提供的所有值都可以适当地流动。我什至尝试清除缓存。不确定，为什么会这样。

Answer 1

如果 instaMap 是要处理所有基于地图的功能的函数，它必须是在 $( window ).load 函数 () 中加载地图的函数 ();

否则，如果您希望 Google 地图在初始 window 加载时加载，您需要在下方添加：

google.maps.event.addDomListener(window, 'load', initialize);

Google 加载时未显示地图

Google Map doesn't appear on load

ajax

google-maps

google-maps-api-3

instagram

instagram-api