This is a followup form my previous post. I tried Dan Diplo's
suggestion, 'replace the lat/long and zoom values (from the 'hello
world' gmap sample) with variables from your razor script' to learn how
to get google maps working for my site but the value doesn't make it
through. This is my razor script:
@{ var myLatLon = @Model.LatLon; }
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"> </script> <script type="text/javascript"> var myJavaLatLon = '@myLatLon'; function initialize() { var myOptions = { center: new google.maps.LatLng('myJavaLatLon'), zoom: 4, mapTypeId: google.maps.MapTypeId.SATELLITE }; var map = new google.maps.Map(document.getElementById("topimg"), myOptions); } </script>
I think viewing the source shows the value is getting into the script var but not the function:
var myJavaLatLon = '41.771312,-102.304687';
function initialize() {
var myOptions = {
center: new google.maps.LatLng('myJavaLatLon'),
but the page just shows the div with the Google Maps corner controls but no actual map.
I
was reading some posts that said you can't access a razor variable in
javascript but it sure looks like it's getting in there in the source,
at least to where I try to use it to define the js var.
Can you make it work if you enter the long and lat manually in the code? I don't see any call to Initialize() ? Should it be within $(document).ready(function(){...}); ?
Another thing : you don't necessarily need to add an extra razor variable, you can remove the inititial var myLatLon and use the model directly in javascript:
Ok, so it does work with manually numbers, is the format exactly the same as when you look in the source. Try move the variable declaration to inside the initialize()
Ouch, I got it working by removing the other var too and just putting the @Model.LatLon directly in the google.maps:
center: new google.maps.LatLng(@Model.LatLon),
I will swear on a stack of Batman comics that that was the first thing I tried and it didn't work and that's why I added in all the extra junk. Man, is my face red. Thanks for helping me work through it though and my apologies to all for consuming world wide resources.
var from razor not working in javascript
This is a followup form my previous post. I tried Dan Diplo's suggestion, 'replace the lat/long and zoom values (from the 'hello world' gmap sample) with variables from your razor script' to learn how to get google maps working for my site but the value doesn't make it through. This is my razor script:
@{ var myLatLon = @Model.LatLon;}
I think viewing the source shows the value is getting into the script var but not the function:
function initialize() {var myOptions = {center: new google.maps.LatLng('myJavaLatLon'),but the page just shows the div with the Google Maps corner controls but no actual map.
I was reading some posts that said you can't access a razor variable in javascript but it sure looks like it's getting in there in the source, at least to where I try to use it to define the js var.
Can someone please straighten me out? Thanks.
Hi, you have enclosed the var in quotes, I think this is the way you should do it:
Thank you for the reply, Jonas. I tried it that way too and it produced the same result.
Can you make it work if you enter the long and lat manually in the code? I don't see any call to Initialize() ? Should it be within $(document).ready(function(){...}); ?
Another thing : you don't necessarily need to add an extra razor variable, you can remove the inititial var myLatLon and use the model directly in javascript:
Yes, it works with the numbers entered manually, without any quotes around them.
I have <body onload="initialize()"> in the template, which I assumed was ok since it works with the manually entered numbers.
And thanks for the tip on the redundant variable, I've removed it and it still works with manually entered numbers, but not with the var.
Ok, so it does work with manually numbers, is the format exactly the same as when you look in the source. Try move the variable declaration to inside the initialize()
Ouch, I got it working by removing the other var too and just putting the @Model.LatLon directly in the google.maps:
I will swear on a stack of Batman comics that that was the first thing I tried and it didn't work and that's why I added in all the extra junk. Man, is my face red. Thanks for helping me work through it though and my apologies to all for consuming world wide resources.
Ah, it requires two variables, not one string
center:new google.maps.LatLng(-34.397,150.644),
so you'll need to split the string into two values
something like this
@{
var splitLatLong = Model.LatLng.ToString().Split(',');
var lat = splitLatLng [0];
var lng = splitLatLng [1];
}
center:new google.maps.LatLng(@lat,@lng),
On a stack of Batman comics and all. :)
NP. Glad you made it work. Cheers
is working on a reply...