Google Maps API -- is it ABSOLUTELY necessary to add Google Maps via doctype if it's not meant to be managed by the back office?
Is it really necessary to add-connect Google Maps API via a package in the back office if it's NEVER going to be managed by the client-end users?
If so ... can anyone at least confirm if either of these packages is working for their site ... "AngularGoogleMaps" has been deprecated and "Terratype" is only supported-tested up to v7.5.
I tried dropping it straight in to the html on my homepage but it keeps throwing "initMap is not a fucntion" error. I can't find any info on other umbraco users with this issue so I'm assuming it's not recommended to go this route.
I have everything setup for the iframe solution ... but I couldn't get it to render the macro in the layout? ( I'm running umbraco v7.6.1 )
I created a property type "macro picker" for the macro in my doctype:
"Macro Picker" ( Umbraco.MacroContainer )
... and I was using the following to render the macro in the page layout:
@Umbraco.RenderMacro("myMacroAlias")
There's no error ... it's just a hole in the code ... nothing gets added to the html in the published page. I checked the macro alias, property type alias ... and then the xslt file. THE XSLT FILE DID NOT SAVE ANY OF THE EDITS I MADE TO IT. What's weird is that it didn't throw an error when I left that area of the back office.
NOW ... I'm seeing erros in the browser console IN THE BACK OFFICE (?) for the following:
Failed to load resource: the server responded with a status of 400 (Bad Request): umbraco/backoffice/UmbracoApi/Authentication/PostLogin
Followed by several errors just like this one:
JQMIGRATE: Migrate is installed, version 1.4.0 DependencyHandler.axd.3
It went away as soon as I stripped out the xslt file, macro and property type associated with to the iframe solution (and rebuilt the solution-site).
It came back the moment I tried to edit-save a new xslt file, and this is the error that appear in the browser console:
VM957 DependencyHandler.axd?s=L3VtYnJhY28vbGliL0NvZGVNaXJyb3IvbGliL2NvZGVtaXJyb3IuanM7L3VtYnJhY28vb…:1212 Uncaught TypeError: Cannot read property 'is' of undefined
at _class.doSubmit (VM957 DependencyHandler.axd?s=L3VtYnJhY28vbGliL0NvZGVNaXJyb3IvbGliL2NvZGVtaXJyb3IuanM7L3VtYnJhY28vb…:1212)
at HTMLAnchorElement.<anonymous> (VM957 DependencyHandler.axd?s=L3VtYnJhY28vbGliL0NvZGVNaXJyb3IvbGliL2NvZGVtaXJyb3IuanM7L3VtYnJhY28vb…:1211)
at HTMLAnchorElement.dispatch (VM949 DependencyHandler.axd?s=L3VtYnJhY29fY2xpZW50L3VpL2pxdWVyeS5qczsvdW1icmFjb19jbGllbnQvdWkvanF1Z…:1)
at HTMLAnchorElement.r.handle (VM949 DependencyHandler.axd?s=L3VtYnJhY29fY2xpZW50L3VpL2pxdWVyeS5qczsvdW1icmFjb19jbGllbnQvdWkvanF1Z…:1)
* THIS IS A BUG ... CONFIRMED IN THIS THREAD (for v7.6.1) Can not save modifications to XSLT in version 7.6 * I'll leave this info here if anyone else runs into this issue. However, the "fix" is to upgrade to v7.6.3.
Please disregard the errors related to xslt not saving in my previous post. Apparently it's an issue-bug with v7.6.1 ... upgrading to v7.6.3 supposedly resolves this.
I'm going to upgrade to v7.6.3 (and hope that nothing else breaks in the process) and retry your solution using iframe and get back to you if I run into any other issues.
Thanks for jumping in on this ... I really appreciate it. I'll give them both a try.
I have a custom "directions map" that I'll be modifying (heavily) to only show the transit layer with advanced features and possiblly custom icons. I'll also be customizing the controls for this as well ... so AngularGoogleMaps and Terratype won't work for what I need in this instance.
In your example with the iframe ... how did you create the side-panel with the list of custom location info? Is that a "feature" in Google maps documentation ... I didn't see anything like that for Directions maps.
Don't have a much time now, but note that Google Maps is not the same as Google My Maps, where you can personalize the maps with your own data.
https://www.google.com/maps/about/mymaps/
OK ... v7.6.3 seems to have fixed the bug with xslt files and I'm back on track.
I have the xslt file created along with the macro and it's 2 parameters. I have created a property type for a Macro Picker, and added values for both the location and height parameters, but neither one gets added to the iframe.
The iframe renders in the layout ... no issues there but both the src and height values are empty.
You CAN add a custom google map (completely modified ... including adding custom controls) to an Umbraco site just like you would with any other website ... you DO NOT need to add it to a document type in the back office (unless you plan on giving your users access-ability to manage it ... then that's an entirely different animal). I finally managed to get it to work (and work correctly).
FYI ... I tried dropping the html into an iFrame and rendering it into the layout via xslt and a partial view macro (I also tried using just a macro) but that was thowing errors in both Google Chrome and Firefox. Neither browser would allow this to take place ... a security concern I think.
While these weren't necessary for me, there are packages to check out if you want to add-incorporate it into the back office:
AngularGoogleMaps
Terratype
GridMaps
Another noteworthy mention is the difference between "Google Maps" and "Google My Maps" which can ad some interesting depth-control via different types of interactivity you can use to elevate your visitors user experience. (thanks Tom Engan for pointing that out to me)
I hope this helps anyone else looking for Google Maps options.
I would love to see an example of how you did this, it seems that you allude to not using the xslt and other things and perhaps just a link back to a map ?
I simply want the map to show this is where we are - right cheer in this place where that location pin sits.
I definitely will check this other method out ... unfortunately for me, LeBlender was breaking my site every time I added it in. I'm one of the "lucky few" who had this problem so for me LeBlender is not in my list of options for this project.
Thanks again for all your help, and it's nice to get some of these items documented in the same location. Now everyone has 4 options to look check out for adding Google Maps into their back office (and grid with LeBlender).
Google Maps API -- is it ABSOLUTELY necessary to add Google Maps via doctype if it's not meant to be managed by the back office?
Is it really necessary to add-connect Google Maps API via a package in the back office if it's NEVER going to be managed by the client-end users?
If so ... can anyone at least confirm if either of these packages is working for their site ... "AngularGoogleMaps" has been deprecated and "Terratype" is only supported-tested up to v7.5.
I tried dropping it straight in to the html on my homepage but it keeps throwing "initMap is not a fucntion" error. I can't find any info on other umbraco users with this issue so I'm assuming it's not recommended to go this route.
Have you tried an iframe where you insert embedded link from Google?
Create a XSLT file:
Then a Macro with two parameters (I've used with=100% in a Grid)
Then insert the embedded link (into location) from Google when the iframe macro is selected.
Hi Tom,
I have everything setup for the iframe solution ... but I couldn't get it to render the macro in the layout? ( I'm running umbraco v7.6.1 )
I created a property type "macro picker" for the macro in my doctype: "Macro Picker" ( Umbraco.MacroContainer )
... and I was using the following to render the macro in the page layout:
There's no error ... it's just a hole in the code ... nothing gets added to the html in the published page. I checked the macro alias, property type alias ... and then the xslt file. THE XSLT FILE DID NOT SAVE ANY OF THE EDITS I MADE TO IT. What's weird is that it didn't throw an error when I left that area of the back office.
NOW ... I'm seeing erros in the browser console IN THE BACK OFFICE (?) for the following:
Followed by several errors just like this one:
It went away as soon as I stripped out the xslt file, macro and property type associated with to the iframe solution (and rebuilt the solution-site).
It came back the moment I tried to edit-save a new xslt file, and this is the error that appear in the browser console:
* THIS IS A BUG ... CONFIRMED IN THIS THREAD (for v7.6.1) Can not save modifications to XSLT in version 7.6 * I'll leave this info here if anyone else runs into this issue. However, the "fix" is to upgrade to v7.6.3.
Iframe like this was mostly used for Google My Maps earlier, like here: http://listerfriluft.no/friluftsaktiviteter/flekkefjord/badeliv/groennes/
I also use GridMaps for Google Maps in some cases: https://our.umbraco.org/projects/website-utilities/gridmaps/
Example GridMaps, with use of Google Maps: http://listerfriluft.no/friluftsaktiviteter/flekkefjord/badeliv/kongevollvatnet/
Hi Tom,
Please disregard the errors related to xslt not saving in my previous post. Apparently it's an issue-bug with v7.6.1 ... upgrading to v7.6.3 supposedly resolves this.
I'm going to upgrade to v7.6.3 (and hope that nothing else breaks in the process) and retry your solution using iframe and get back to you if I run into any other issues.
Hi Tom,
Thanks for jumping in on this ... I really appreciate it. I'll give them both a try.
I have a custom "directions map" that I'll be modifying (heavily) to only show the transit layer with advanced features and possiblly custom icons. I'll also be customizing the controls for this as well ... so AngularGoogleMaps and Terratype won't work for what I need in this instance.
In your example with the iframe ... how did you create the side-panel with the list of custom location info? Is that a "feature" in Google maps documentation ... I didn't see anything like that for Directions maps.
Thanks again for share these methods with me.
Don't have a much time now, but note that Google Maps is not the same as Google My Maps, where you can personalize the maps with your own data. https://www.google.com/maps/about/mymaps/
No worries ... this isn't a rush-priority at the moment.
OH ... I wasn't aware of "Google My Maps" ... that would explain why I wasn't seeing those additional options.
I appreciate your help ... thanks again for taking the time to get me on the right track.
OK ... v7.6.3 seems to have fixed the bug with xslt files and I'm back on track.
I have the xslt file created along with the macro and it's 2 parameters. I have created a property type for a Macro Picker, and added values for both the location and height parameters, but neither one gets added to the iframe.
The iframe renders in the layout ... no issues there but both the src and height values are empty.
Any thoughts on what I'm overlooking?
OK, here's an UPDATE:
You CAN add a custom google map (completely modified ... including adding custom controls) to an Umbraco site just like you would with any other website ... you DO NOT need to add it to a document type in the back office (unless you plan on giving your users access-ability to manage it ... then that's an entirely different animal). I finally managed to get it to work (and work correctly).
FYI ... I tried dropping the html into an iFrame and rendering it into the layout via xslt and a partial view macro (I also tried using just a macro) but that was thowing errors in both Google Chrome and Firefox. Neither browser would allow this to take place ... a security concern I think.
While these weren't necessary for me, there are packages to check out if you want to add-incorporate it into the back office:
Another noteworthy mention is the difference between "Google Maps" and "Google My Maps" which can ad some interesting depth-control via different types of interactivity you can use to elevate your visitors user experience. (thanks Tom Engan for pointing that out to me)
I hope this helps anyone else looking for Google Maps options.
I would love to see an example of how you did this, it seems that you allude to not using the xslt and other things and perhaps just a link back to a map ?
I simply want the map to show this is where we are - right cheer in this place where that location pin sits.
The XSLT iFrame in previous example, was something I made for a customer a couple of years ago.
But later I do the same with a LeBlender editor - iFrame with link and height properties, and this is what I now prefer: https://our.umbraco.org/projects/backoffice-extensions/leblender/
Example, my website (Google Maps): http://neoweb.no/kontakt/
I definitely will check this other method out ... unfortunately for me, LeBlender was breaking my site every time I added it in. I'm one of the "lucky few" who had this problem so for me LeBlender is not in my list of options for this project.
Thanks again for all your help, and it's nice to get some of these items documented in the same location. Now everyone has 4 options to look check out for adding Google Maps into their back office (and grid with LeBlender).
is working on a reply...