только что посмотрел на ваш код:
var lat = 0;
var lng = 0;
request.onreadystatechange = function()
{
...
lat = parseFloat(markers[i].getAttribute("lat"));
lng = parseFloat(markers[i].getAttribute("lng"));
...
} // Closing onReadyStateChange
request.send(null);
var myLatlng = new google.maps.LatLng(lat , lng ); // Have to make the center as the hike coordinates.
var myOptions =
{
zoom: 9,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
map установлен на (0,0), потому что вы определили lat, lng, поэтому похоже, что вы полагаетесь на lat, lng изменяется в функции обратного вызова ajax, но это асинхронно, поэтому, когда браузер получает
var myLatlng = new google.maps.LatLng(lat , lng );
lat и lng в 99,99% случаев будут равны 0, и только через некоторое время (в зависимости от сети и т. Д.) Они будут изменены, но это будет после построения карты ... В противном случае вам придется создайте свою карту в функции обратного вызова:
function createMap( lat, lng )
{
var myLatlng = new google.maps.LatLng(lat , lng ); // Have to make the center as the hike coordinates.
var myOptions =
{
zoom: 9,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
return new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function initialize( hike_id ) {
var lat = 0;
var lng = 0;
var map;
request.onreadystatechange = function()
{
...
lat = parseFloat(markers[i].getAttribute("lat"));
lng = parseFloat(markers[i].getAttribute("lng"));
...
map = createMap( lat, lng );
} // Closing onReadyStateChange
request.send(null);
}
Вскоре вы должны быть уверены, что lat и lng определены так, как вам нужно, перед созданием карты ... Таким образом, это должно работать. В качестве альтернативы вы можете создать карту с центром в (0,0) или где-то еще, но предварительно определенным, а затем в обратном вызове ajax используйте map.setCenter( center_latlng );
также вы не создаете маркеры ... ваш обратный вызов имеет
// create the marker
center_latlng = new google.maps.LatLng( lat , lng );
global_markers[i] = marker;
вы определяете значение center_latlng, но не используете его ... вместо этого вы помещаете marker, определенный вне обратного вызова, в ваш массив маркеров. Должно быть что-то вроде:
// create the marker
center_latlng = new google.maps.LatLng( lat , lng );
var hikeMarker = new google.maps.Marker({
position: center_latlng,
map: map,
title:"Hike Start"
});
global_markers[i] = hikeMarker ;
РЕДАКТИРОВАТЬ: Взглянул на вашу последнюю реализацию:
function createMap( center_lat , center_lng ) {
...
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
...
}
эта функция создает map в глобальной области видимости, это не хорошо, пока вам действительно не нужно, чтобы она была глобальной. Я обновил свой код выше, так что я бы вернул карту в этой функции (посмотрите). В противном случае, если вам действительно нужно, чтобы карта была глобальной (это означает, что ее может использовать кто-то другой), то я бы предпочел другой способ (также было кратко сказано выше): создать карту с центром в любом месте, а затем установить ее центр в обратном вызове ajax. Таким образом, вы будете уверены, что карта будет создана как можно скорее, и у вас не возникнет проблем со значением «null» (опять же, если оно используется вне метода инициализации или даже из обратного вызова ajax:
function createMap( lat, lng )
{
var myLatlng = new google.maps.LatLng(lat , lng ); // Have to make the center as the hike coordinates.
var myOptions =
{
zoom: 9,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
return new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function initialize( hike_id ) {
var lat = 0;
var lng = 0;
var map = createMap( lat, lng ); // create with center in (0,0); probably would be better to use San Francisco
request.onreadystatechange = function()
{
...
lat = parseFloat(markers[i].getAttribute("lat"));
lng = parseFloat(markers[i].getAttribute("lng"));
...
map.setCenter( lat, lng ); // it will change position of map to real one
} // Closing onReadyStateChange
request.send(null);
}