Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Brett Fullam 119 posts 629 karma points
    Jun 28, 2017 @ 21:27
    Brett Fullam
    0

    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.

  • Tom Engan 430 posts 1173 karma points
    Jun 28, 2017 @ 22:38
    Tom Engan
    0

    Have you tried an iframe where you insert embedded link from Google?

    Create a XSLT file:

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
    <xsl:stylesheet
      version="1.0"
      xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
      xmlns:msxml="urn:schemas-microsoft-com:xslt"
      xmlns:umbraco.library="urn:umbraco.library"
      xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" 
      xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" 
      xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" 
      xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" 
      xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" 
      xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets" 
      xmlns:seoChecker.MetaData="urn:seoChecker.MetaData" 
      xmlns:PS.XSLTsearch="urn:PS.XSLTsearch"
      exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets seoChecker.MetaData PS.XSLTsearch ">
    
    <xsl:output method="xml" omit-xml-declaration="yes"/>
    
    <xsl:param name="currentPage"/>
    <xsl:variable name="location" select="/macro/location"/>
    <xsl:variable name="height" select="/macro/height"/>
    <xsl:template match="/">
    <iframe src="{$location}" height="{$height}" style="border:0; width: 100%">
        Beklager, din nettleser støtter ikke IFRAMES, og kartet kan ikke vises.
      </iframe>
    </xsl:template>
    </xsl:stylesheet>
    
  • Tom Engan 430 posts 1173 karma points
    Jun 28, 2017 @ 22:49
    Tom Engan
    0

    Then a Macro with two parameters (I've used with=100% in a Grid)

    enter image description here

  • Tom Engan 430 posts 1173 karma points
    Jun 28, 2017 @ 22:52
    Tom Engan
    0

    Then insert the embedded link (into location) from Google when the iframe macro is selected.

    enter image description here

  • Brett Fullam 119 posts 629 karma points
    Jun 29, 2017 @ 14:30
    Brett Fullam
    0

    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:

    @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.

  • Tom Engan 430 posts 1173 karma points
    Jun 28, 2017 @ 22:56
    Tom Engan
    0

    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/

  • Brett Fullam 119 posts 629 karma points
    Jun 29, 2017 @ 15:11
    Brett Fullam
    0

    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.

  • Brett Fullam 119 posts 629 karma points
    Jun 29, 2017 @ 12:36
    Brett Fullam
    0

    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.

  • Tom Engan 430 posts 1173 karma points
    Jun 29, 2017 @ 15:53
    Tom Engan
    1

    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/

  • Brett Fullam 119 posts 629 karma points
    Jun 29, 2017 @ 15:57
    Brett Fullam
    0

    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.

  • Brett Fullam 119 posts 629 karma points
    Jun 29, 2017 @ 15:54
    Brett Fullam
    0

    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?

  • Brett Fullam 119 posts 629 karma points
    Jun 29, 2017 @ 20:47
    Brett Fullam
    100

    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:

    • 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.

  • Ken Schnell 35 posts 147 karma points
    Jul 30, 2020 @ 19:26
    Ken Schnell
    0

    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.

  • Tom Engan 430 posts 1173 karma points
    Jun 29, 2017 @ 21:12
    Tom Engan
    1

    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/

  • Brett Fullam 119 posts 629 karma points
    Jun 29, 2017 @ 21:15
    Brett Fullam
    0

    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).

Please Sign in or register to post replies

Write your reply to:

Draft