I'm using this code to set the bounds of a google map based on a list of locations:
Strange thing is that this is working fine in Firefox: the map pans and scales to fit the given locations. In Safari the map instead loads on the middle of the Pacific Ocean.
Can you help me?
Thanks, Augusto
LatLngList = []
var bounds = new google.maps.LatLngBounds();
function add_point_to_list(point) {
var lat = point.split(" ")[0]
var lng = point.split(" ")[1]
var Gpoint = new google.maps.LatLng(lat,lng)
LatLngList.push(Gpoint)
bounds.extend(Gpoint);
}
$.getJSON('/locations/user_map?id=' + <%= @user.id %>, function(data){
if (data.posts) {
for (var i in data.posts) {
var cord = (data.posts[i].lat + " " + data.posts[i].开发者_开发技巧lng)
add_point_to_list(cord)
}
}
})
function map_init() {
var myOptions = {
zoom: 6,
mapTypeControl: false,
panControl: false,
zoomControl: false,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//set map center
// map.setCenter(latlng);
map.fitBounds (bounds);
//updateMapOverlays();
//google.maps.event.addListener(map, 'idle', updateMapOverlays);
markerCluster = new MarkerClusterer(map, [], {gridSize: 70, maxZoom: 14, zIndex: 1});
geocoder = new google.maps.Geocoder();
refresh_overlays('/locations/user_map?id=' + <%= @user.id %>);
marker = new google.maps.Marker({
map: map,
icon: userMarkerImage,
position: latlng,
zIndex: 100
});
}
Solved. The map init was calling the bounds variable when it was still not ready.
So I put map.fitBounds (bounds); at the end of the AJAX callback:
$.getJSON('/locations/user_map?id=' + <%= @user.id %>, function(data){
if (data.posts) {
for (var i in data.posts) {
var cord = (data.posts[i].lat + " " + data.posts[i].lng)
add_point_to_list(cord)
}
map.fitBounds (bounds);
}
})
精彩评论