I keep seeing things that say you can do Google Maps with Razor, which I'm trying to learn, but the only actual example I can find is Warren's v5 version (which I assume won't work in v.4.72) and the Cultiv Razor Examples, which diabolically does the Google Maps with jquery. Everything else seems to be with javascript and xslt, which I never learned.
I want to do a map on every page, the Home page map will have pointers to every location in the site, regional pages will have pointers to just the locations w/in that region, individual location pages will have a map for just that location.
So the criteria is, all maps are the same size, but each will zoom to an appropriate level to show all relevant location(s). I won't have editors doing this, just me, so all I need to input in a content node is latitude, longitude and zoom level. I have the GM datatype package installed.
I thought it might be as simple as creating a GMap doctype with lat, lon and zoom properties, and that applying that with the methods provided by Google Maps would do it but now I've researched it, I don't think so. I'd suer like to get off on the right foot.
Is there an example of how to do this with razor already out there I haven't been able to find? Or can you, dear reader, make a suggestion? Very much appreciated, I promise, this will be the last time. <g>
Google maps are rendered client side, so you will need to use "diabolical" JavaScript or jQuery!
Your basic idea is sound - you add the GM datatype which will then store the lat/long and zoom for you. After that, you need to write some Razor script that generates the JavaScript required to render the map. There are plenty of examples of how to do this in the Google docs at https://developers.google.com/maps/documentation/javascript/tutorial
It's easiest to first create a basic map in pure JavaScript (or jQuery) and then substitute hard-coded values for lat and lng with the ones stored in your Model.
The thing is, Google maps is infinitely customisable, so you'll never find a script that does everything you want. But seriously, just take the "hello world" example below and replace the lat/long and zoom values with variables from your razor script.
<!DOCTYPE html> <html> <head> <metaname="viewport"content="initial-scale=1.0, user-scalable=no"/> <styletype="text/css"> html {height:100%} body {height:100%;margin:0;padding:0} #map_canvas {height:100%} </style> <scripttype="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"> </script> <scripttype="text/javascript"> function initialize(){ var myOptions ={ center:new google.maps.LatLng(-34.397,150.644), zoom:8, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map =new google.maps.Map(document.getElementById("map_canvas"), myOptions); } </script> </head> <bodyonload="initialize()"> <divid="map_canvas"style="width:100%;height:100%"></div> </body> </html>
Doh! I was just in the middle of trying to do this with the code right off the GM page when I checked back and your 'sensor=false' unclogged it for me. I think I get it now, thanks again. Sorry to be so thick, I'm a visual learner so seeing a working sample really helps.
I agree, it's much easier to see an example. The Google ones can be a bit confusing - I've made exactly the same mistake you have in the past. Also note you don't need an API key, even if they imply you do (the key is only really useful if you want to check you are not exceeding the usage limits).
Google maps w/Razor v4.72
I keep seeing things that say you can do Google Maps with Razor, which I'm trying to learn, but the only actual example I can find is Warren's v5 version (which I assume won't work in v.4.72) and the Cultiv Razor Examples, which diabolically does the Google Maps with jquery. Everything else seems to be with javascript and xslt, which I never learned.
I want to do a map on every page, the Home page map will have pointers to every location in the site, regional pages will have pointers to just the locations w/in that region, individual location pages will have a map for just that location.
So the criteria is, all maps are the same size, but each will zoom to an appropriate level to show all relevant location(s). I won't have editors doing this, just me, so all I need to input in a content node is latitude, longitude and zoom level. I have the GM datatype package installed.
I thought it might be as simple as creating a GMap doctype with lat, lon and zoom properties, and that applying that with the methods provided by Google Maps would do it but now I've researched it, I don't think so. I'd suer like to get off on the right foot.
Is there an example of how to do this with razor already out there I haven't been able to find? Or can you, dear reader, make a suggestion? Very much appreciated, I promise, this will be the last time. <g>
Google maps are rendered client side, so you will need to use "diabolical" JavaScript or jQuery!
Your basic idea is sound - you add the GM datatype which will then store the lat/long and zoom for you. After that, you need to write some Razor script that generates the JavaScript required to render the map. There are plenty of examples of how to do this in the Google docs at https://developers.google.com/maps/documentation/javascript/tutorial
It's easiest to first create a basic map in pure JavaScript (or jQuery) and then substitute hard-coded values for lat and lng with the ones stored in your Model.
Thank you, Dan, I appreciate the guidance. I'm guess I'm off again to hunt the elusive Razor script.
The thing is, Google maps is infinitely customisable, so you'll never find a script that does everything you want. But seriously, just take the "hello world" example below and replace the lat/long and zoom values with variables from your razor script.
Doh! I was just in the middle of trying to do this with the code right off the GM page when I checked back and your 'sensor=false' unclogged it for me. I think I get it now, thanks again. Sorry to be so thick, I'm a visual learner so seeing a working sample really helps.
I agree, it's much easier to see an example. The Google ones can be a bit confusing - I've made exactly the same mistake you have in the past. Also note you don't need an API key, even if they imply you do (the key is only really useful if you want to check you are not exceeding the usage limits).
is working on a reply...