Google maps v3 geocode
I am trying to geocode an place name, however when I run the function, I get,
"an empty string" in my console,
below is my code why would this be happening?
function getLatLong(address)
{
var geocoder = new google.maps.Geocoder();
var result = "";
geocoder.geocode( { 'address': address, 'region': 'uk' }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
result = results[0].geometry.location;
} else {
result = "Unable to find address: " + status;
}
});
console.log(result);
}
UPDATE
Ok, so I have got my value going to the console, now when I try and push the value of element into the function, I get undefined as a return, below is the full code,
function getLatLong(address)
{
var geocoder = new google.maps.Geocoder();
var result = "";
geocoder.geocode( { 'address': address, 'region': 'uk' }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
result = results[0].geometry.location;
return result;
} else {
result = "Unable to find address: " + status;
alert(result);
}
});
}
//getLatLong("YORK");
function loadScript(postcode){
alert(postcode);
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize?"+postcode;
document.body.appendChild(script);
}
/* load map on visitors location */
function initialize(postcode){
var myLatlng = new google.maps.LatLng(getLatLong(postcode));
var myOptions = {
center: myLatlng,
zoom:13,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map'), myOptions);
google.maps.event.trigger(map, 'resize');
map.setZoom(map.getZoom());
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
开发者_JAVA百科icon:'http://google-maps-icons.googlecode.com/files/home.png',
});
}
And it is called like this,
$(function(){
$("dd a, dt a").live("click", function(){
var self = $(this);
$("#overlay").fadeIn('slow');
var targetProcent = 85;
var targetWidth = $(window).width() * (targetProcent / 100);
var targetHeight = $(window).height() * (targetProcent / 100);
var targetX = ($(window).width() - targetWidth) / 2;
var targetY = ($(window).height() - targetHeight) / 2 + $(document).scrollTop();
$('#lightbox').height(700);
$('#lightbox').width(targetWidth);
$('#lightbox').load(self.attr("href"));
loadScript($("#postcode").val());
//usePointFromPostcode(document.getElementById('postcode').value, placeMarkerAtPoint)
$('#lightbox').css({
"position": "absolute",
"top": targetY+"px",
"left": targetX+"px"
}).fadeIn('slow');
return false;
});
});
$("#postcode").val() relates to an element that is loaded in when using load()
you make an async call, and then print to console. the call hasnt returned yet
solution:
move the console.log into the callback
edit:
the callback is the anonymous function that you pass as an argument to geocode, its signature is function(results, status)
you should put your console.log
call at the END of that function
EDIT for your edit:
your script url looks like its wrong:
"http://maps.google.com/maps/api/js?sensor=false&callback=initialize?"+postcode
i am pretty sure that tacking on ?postcode doesnt do anything. If anything, the url should only contain one ? before the start of the query params.
It seems like you want to pass the postcode to the initialize
function, the easiest way to do that would be via a global variable.
set the global variable in the loadScript
function and read it in the initialize
function
精彩评论