unable to modify global variable in javascript

var address ="<%= params[:search] %>";

var lat;

var long;

var geocoder = new google.maps.Geocoder();

geocoder.geocode( { 'address': address}, function(results, status) {

	lat = results[0].geometry.location.lat();

	long = results[0].geometry.location.lng();

}); 

alert(lat);

//wanna use lat and long here!

browser always alert "undefined" when called outside the function, works when called from within the function.

asked Jan 20 at 13:57

Ashutosh Gupta

add a comment |

var address ="<%= params[:search] %>";

var lat;

var long;

var geocoder = new google.maps.Geocoder();

geocoder.geocode( { 'address': address}, function(results, status) {

	lat = results[0].geometry.location.lat();

	long = results[0].geometry.location.lng();

}); 

alert(lat);

//wanna use lat and long here!

browser always alert "undefined" when called outside the function, works when called from within the function.

asked Jan 20 at 13:57

Ashutosh Gupta

add a comment |

var address ="<%= params[:search] %>";

var lat;

var long;

var geocoder = new google.maps.Geocoder();

geocoder.geocode( { 'address': address}, function(results, status) {

	lat = results[0].geometry.location.lat();

	long = results[0].geometry.location.lng();

}); 

alert(lat);

//wanna use lat and long here!

browser always alert "undefined" when called outside the function, works when called from within the function.

asked Jan 20 at 13:57

Ashutosh Gupta

var address ="<%= params[:search] %>";

var lat;

var long;

var geocoder = new google.maps.Geocoder();

geocoder.geocode( { 'address': address}, function(results, status) {

	lat = results[0].geometry.location.lat();

	long = results[0].geometry.location.lng();

}); 

alert(lat);

//wanna use lat and long here!

browser always alert "undefined" when called outside the function, works when called from within the function.

var address ="<%= params[:search] %>";

var lat;

var long;

var geocoder = new google.maps.Geocoder();

geocoder.geocode( { 'address': address}, function(results, status) {

	lat = results[0].geometry.location.lat();

	long = results[0].geometry.location.lng();

}); 

alert(lat);

//wanna use lat and long here!

var address ="<%= params[:search] %>";

var lat;

var long;

var geocoder = new google.maps.Geocoder();

geocoder.geocode( { 'address': address}, function(results, status) {

	lat = results[0].geometry.location.lat();

	long = results[0].geometry.location.lng();

}); 

alert(lat);

//wanna use lat and long here!

javascript ruby-on-rails google-maps google-maps-api-3 geocode

asked Jan 20 at 13:57

Ashutosh Gupta

asked Jan 20 at 13:57

Ashutosh Gupta

asked Jan 20 at 13:57

Ashutosh Gupta

asked Jan 20 at 13:57

Ashutosh Gupta

asked Jan 20 at 13:57

Ashutosh Gupta

add a comment |

2 Answers
2

active

oldest

votes

The geocoder.geocode function is asynchronous, and it receives latitude and longitude inside a callback function - after the asynchronous operation is complete. Only then the lat and long variables are defined.

Your alert runs immediately after starting the asynchronous operation, meaning that it's still not complete by the time the alert is fired. So, lat and long are still undefined.

You cannot use latitude and longitude outside of the callback block. Move it inside the callback block and it will work:

var address ="<%= params[:search] %>";

var lat;

var long;

var geocoder = new google.maps.Geocoder();

geocoder.geocode( { 'address': address}, function(results, status) {

    lat = results[0].geometry.location.lat();

    long = results[0].geometry.location.lng();

    // you can use lat and lng inside here! :)

    alert(lat);

});

Read this post if you want to get a better understanding of asynchronous code in JavaScript: https://stackoverflow.com/a/14220323/2401947

edited Jan 20 at 15:25

answered Jan 20 at 15:06

Filipe Oliveira

6626

1

thanks a lot! I moved the whole code inside those parenthesis.

– Ashutosh Gupta
Jan 22 at 9:39

add a comment |

Hello Ashutosh Gupta,

this happens because your alert() happens before variable assignment.
You can use Promise to solve this issue, like

var address ="<%= params[:search] %>";

var lat;

var lng;

var geocoder = new google.maps.Geocoder();



new Promise((resolve, reject) => {

geocoder.geocode( { 'address': address}, function(results, status) {

    lat = results[0].geometry.location.lat();

    lng = results[0].geometry.location.lng();

    resolve({lat: lat, lng: lng});

}));

}).then((data) => {

    alert(data);

});

answered Jan 20 at 14:06

Sebastian Waldbauer

365312

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54277175%2funable-to-modify-global-variable-in-javascript%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

Your alert runs immediately after starting the asynchronous operation, meaning that it's still not complete by the time the alert is fired. So, lat and long are still undefined.

You cannot use latitude and longitude outside of the callback block. Move it inside the callback block and it will work:

var address ="<%= params[:search] %>";

var lat;

var long;

var geocoder = new google.maps.Geocoder();

geocoder.geocode( { 'address': address}, function(results, status) {

    lat = results[0].geometry.location.lat();

    long = results[0].geometry.location.lng();

    // you can use lat and lng inside here! :)

    alert(lat);

});

Read this post if you want to get a better understanding of asynchronous code in JavaScript: https://stackoverflow.com/a/14220323/2401947

edited Jan 20 at 15:25

answered Jan 20 at 15:06

Filipe Oliveira

6626

1

thanks a lot! I moved the whole code inside those parenthesis.

– Ashutosh Gupta
Jan 22 at 9:39

add a comment |

Your alert runs immediately after starting the asynchronous operation, meaning that it's still not complete by the time the alert is fired. So, lat and long are still undefined.

You cannot use latitude and longitude outside of the callback block. Move it inside the callback block and it will work:

var address ="<%= params[:search] %>";

var lat;

var long;

var geocoder = new google.maps.Geocoder();

geocoder.geocode( { 'address': address}, function(results, status) {

    lat = results[0].geometry.location.lat();

    long = results[0].geometry.location.lng();

    // you can use lat and lng inside here! :)

    alert(lat);

});

Read this post if you want to get a better understanding of asynchronous code in JavaScript: https://stackoverflow.com/a/14220323/2401947

edited Jan 20 at 15:25

answered Jan 20 at 15:06

Filipe Oliveira

6626

1

thanks a lot! I moved the whole code inside those parenthesis.

– Ashutosh Gupta
Jan 22 at 9:39

add a comment |

Your alert runs immediately after starting the asynchronous operation, meaning that it's still not complete by the time the alert is fired. So, lat and long are still undefined.

You cannot use latitude and longitude outside of the callback block. Move it inside the callback block and it will work:

var address ="<%= params[:search] %>";

var lat;

var long;

var geocoder = new google.maps.Geocoder();

geocoder.geocode( { 'address': address}, function(results, status) {

    lat = results[0].geometry.location.lat();

    long = results[0].geometry.location.lng();

    // you can use lat and lng inside here! :)

    alert(lat);

});

Read this post if you want to get a better understanding of asynchronous code in JavaScript: https://stackoverflow.com/a/14220323/2401947

edited Jan 20 at 15:25

answered Jan 20 at 15:06

Filipe Oliveira

6626

Your alert runs immediately after starting the asynchronous operation, meaning that it's still not complete by the time the alert is fired. So, lat and long are still undefined.

You cannot use latitude and longitude outside of the callback block. Move it inside the callback block and it will work:

var address ="<%= params[:search] %>";

var lat;

var long;

var geocoder = new google.maps.Geocoder();

geocoder.geocode( { 'address': address}, function(results, status) {

    lat = results[0].geometry.location.lat();

    long = results[0].geometry.location.lng();

    // you can use lat and lng inside here! :)

    alert(lat);

});

Read this post if you want to get a better understanding of asynchronous code in JavaScript: https://stackoverflow.com/a/14220323/2401947

edited Jan 20 at 15:25

answered Jan 20 at 15:06

Filipe Oliveira

6626

edited Jan 20 at 15:25

answered Jan 20 at 15:06

Filipe Oliveira

6626

answered Jan 20 at 15:06

Filipe Oliveira

6626

answered Jan 20 at 15:06

Filipe Oliveira

6626

1

thanks a lot! I moved the whole code inside those parenthesis.

– Ashutosh Gupta
Jan 22 at 9:39

add a comment |

1

thanks a lot! I moved the whole code inside those parenthesis.

– Ashutosh Gupta
Jan 22 at 9:39

thanks a lot! I moved the whole code inside those parenthesis.

– Ashutosh Gupta
Jan 22 at 9:39

add a comment |

Hello Ashutosh Gupta,

this happens because your alert() happens before variable assignment.
You can use Promise to solve this issue, like

var address ="<%= params[:search] %>";

var lat;

var lng;

var geocoder = new google.maps.Geocoder();



new Promise((resolve, reject) => {

geocoder.geocode( { 'address': address}, function(results, status) {

    lat = results[0].geometry.location.lat();

    lng = results[0].geometry.location.lng();

    resolve({lat: lat, lng: lng});

}));

}).then((data) => {

    alert(data);

});

answered Jan 20 at 14:06

Sebastian Waldbauer

365312

add a comment |

Hello Ashutosh Gupta,

this happens because your alert() happens before variable assignment.
You can use Promise to solve this issue, like

var address ="<%= params[:search] %>";

var lat;

var lng;

var geocoder = new google.maps.Geocoder();



new Promise((resolve, reject) => {

geocoder.geocode( { 'address': address}, function(results, status) {

    lat = results[0].geometry.location.lat();

    lng = results[0].geometry.location.lng();

    resolve({lat: lat, lng: lng});

}));

}).then((data) => {

    alert(data);

});

answered Jan 20 at 14:06

Sebastian Waldbauer

365312

add a comment |

Hello Ashutosh Gupta,

this happens because your alert() happens before variable assignment.
You can use Promise to solve this issue, like

var address ="<%= params[:search] %>";

var lat;

var lng;

var geocoder = new google.maps.Geocoder();



new Promise((resolve, reject) => {

geocoder.geocode( { 'address': address}, function(results, status) {

    lat = results[0].geometry.location.lat();

    lng = results[0].geometry.location.lng();

    resolve({lat: lat, lng: lng});

}));

}).then((data) => {

    alert(data);

});

answered Jan 20 at 14:06

Sebastian Waldbauer

365312

Hello Ashutosh Gupta,

this happens because your alert() happens before variable assignment.
You can use Promise to solve this issue, like

var address ="<%= params[:search] %>";

var lat;

var lng;

var geocoder = new google.maps.Geocoder();



new Promise((resolve, reject) => {

geocoder.geocode( { 'address': address}, function(results, status) {

    lat = results[0].geometry.location.lat();

    lng = results[0].geometry.location.lng();

    resolve({lat: lat, lng: lng});

}));

}).then((data) => {

    alert(data);

});

answered Jan 20 at 14:06

Sebastian Waldbauer

365312

answered Jan 20 at 14:06

Sebastian Waldbauer

365312

answered Jan 20 at 14:06

Sebastian Waldbauer

365312

answered Jan 20 at 14:06

Sebastian Waldbauer

365312

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Brtdku