Sign in Register
Go to solution
Copied to clipboard

Flag this post as spam?

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


  • Mario Lopez 168 posts 958 karma points MVP 4x c-trib
    May 14, 2018 @ 09:52
    Mario Lopez
    0

    Map doesn't display on frontend

    On the frontend I'm using the HTML helper and the model that is coming from the published content looks right. The code is on the page but the map doesn't render. Everything seems to work ok on the backend. I'm using the package on Umbraco 7.10.4.

    The height of the Terratype container is 0.

    This is what is generated on code:

    <div class="Terratype">
    <script src="/App_Plugins/Terratype/scripts/terratype.renderer.js?cache=1.0.17">

    </script><div data-markerclusterer-url="/App_Plugins/Terratype.GoogleMapsV3/images/m" data-model="%7b%22provider%22%3a%7b%22id%22%3a%22Terratype.GoogleMapsV3%22%2c%22version%22%3a%223%22%2c%22apiKey%22%3a%22AIzaSyBZdFJZpfUaQkgkWxT_CS5uNK6w2ZrCNjU%22%2c%22forceHttps%22%3afalse%2c%22language%22%3a%22%22%2c%22predefineStyling%22%3a%22hotel%22%2c%22showRoads%22%3atrue%2c%22showLandmarks%22%3atrue%2c%22showLabels%22%3atrue%2c%22styles%22%3a%5b%7b%22featureType%22%3a%22landscape.man_made%22%2c%22elementType%22%3a%22geometry.fill%22%2c%22stylers%22%3a%5b%7b%22lightness%22%3a%22-5%22%7d%5d%7d%2c%7b%22featureType%22%3a%22landscape.man_made%22%2c%22elementType%22%3a%22labels.text.fill%22%2c%22stylers%22%3a%5b%7b%22saturation%22%3a%2221%22%7d%5d%7d%2c%7b%22featureType%22%3a%22landscape.natural%22%2c%22elementType%22%3a%22geometry.fill%22%2c%22stylers%22%3a%5b%7b%22saturation%22%3a%221%22%7d%2c%7b%22color%22%3a%22%23eae2d3%22%7d%2c%7b%22lightness%22%3a%2220%22%7d%5d%7d%2c%7b%22featureType%22%3a%22road.highway%22%2c%22elementType%22%3a%22labels.icon%22%2c%22stylers%22%3a%5b%7b%22saturation%22%3a%2239%22%7d%2c%7b%22lightness%22%3a%227%22%7d%2c%7b%22gamma%22%3a%221.06%22%7d%2c%7b%22hue%22%3a%22%2300b8ff%22%7d%2c%7b%22weight%22%3a%221.44%22%7d%5d%7d%2c%7b%22featureType%22%3a%22road.arterial%22%2c%22elementType%22%3a%22geometry.stroke%22%2c%22stylers%22%3a%5b%7b%22lightness%22%3a%22100%22%7d%2c%7b%22weight%22%3a%221.16%22%7d%2c%7b%22color%22%3a%22%23e0e0e0%22%7d%5d%7d%2c%7b%22featureType%22%3a%22road.arterial%22%2c%22elementType%22%3a%22labels.icon%22%2c%22stylers%22%3a%5b%7b%22saturation%22%3a%22-16%22%7d%2c%7b%22lightness%22%3a%2228%22%7d%2c%7b%22gamma%22%3a%220.87%22%7d%5d%7d%2c%7b%22featureType%22%3a%22water%22%2c%22elementType%22%3a%22geometry.fill%22%2c%22stylers%22%3a%5b%7b%22saturation%22%3a%22-75%22%7d%2c%7b%22lightness%22%3a%22-15%22%7d%2c%7b%22gamma%22%3a%221.35%22%7d%2c%7b%22weight%22%3a%221.45%22%7d%2c%7b%22hue%22%3a%22%2300dcff%22%7d%5d%7d%2c%7b%22featureType%22%3a%22water%22%2c%22elementType%22%3a%22labels.text.fill%22%2c%22stylers%22%3a%5b%7b%22color%22%3a%22%23626262%22%7d%5d%7d%2c%7b%22featureType%22%3a%22water%22%2c%22elementType%22%3a%22labels.text.stroke%22%2c%22stylers%22%3a%5b%7b%22saturation%22%3a%2219%22%7d%2c%7b%22weight%22%3a%221.84%22%7d%5d%7d%5d%2c%22variety%22%3a%7b%22basic%22%3atrue%2c%22satellite%22%3afalse%2c%22terrain%22%3afalse%2c%22selector%22%3a%7b%22type%22%3a1%2c%22position%22%3a0%7d%7d%2c%22streetView%22%3a%7b%22enable%22%3afalse%2c%22position%22%3a0%7d%2c%22fullscreen%22%3a%7b%22enable%22%3afalse%2c%22position%22%3a0%7d%2c%22scale%22%3a%7b%22enable%22%3afalse%2c%22position%22%3a0%7d%2c%22zoomControl%22%3a%7b%22enable%22%3atrue%2c%22position%22%3a0%7d%2c%22search%22%3anull%7d%2c%22position%22%3a%7b%22id%22%3a%22WGS84%22%2c%22datum%22%3a%2240.416775%2c-3.70379%22%7d%2c%22icon%22%3a%7b%22id%22%3a%22redmarker%22%2c%22url%22%3a%22https%3a%2f%2fmt.google.com%2fvt%2ficon%2fname%3dicons%2fspotlight%2fspotlight-poi.png%22%2c%22size%22%3a%7b%22width%22%3a22%2c%22height%22%3a40%7d%2c%22anchor%22%3a%7b%22horizontal%22%3a%22center%22%2c%22vertical%22%3a%22bottom%22%7d%7d%2c%22zoom%22%3a12%2c%22lookup%22%3anull%2c%22label%22%3anull%2c%22height%22%3a400%7d" data-map-id="65536" data-dom-detection-type="0" data-id="TerratypeGoogleMapsV343dab16c-462d-4188-acf3-f77900b6c3e4" data-tag="TerratypeGoogleMapsV343dab16c-462d-4188-acf3-f77900b6c3e4" class="Terratype.GoogleMapsV3" style="display:none;">
        <script src="/App_Plugins/Terratype.GoogleMapsV3/scripts/Terratype.GoogleMapsV3.Renderer.js?cache=1.0.17" defer="">

        </script><script src="/App_Plugins/Terratype.GoogleMapsV3/scripts/markerclusterer.min.js?cache=1.0.17" defer="">

        </script><script src="//maps.googleapis.com/maps/api/js?v=3&amp;libraries=places&amp;callback=TerratypeGoogleMapsV3CallbackRender&amp;key=AIzaSyBZdFJZpfUaQkgkWxT_CS5uNK6w2ZrCNjU" defer="">

        </script><div id="TerratypeGoogleMapsV343dab16c-462d-4188-acf3-f77900b6c3e4" style="height:400px;opacity:0.01;filter:alpha(opacity=1);">

        </div>
    </div>
</div>
    Copy Link
  • Mario Lopez 168 posts 958 karma points MVP 4x c-trib
    May 14, 2018 @ 09:57
    Mario Lopez
    0

    Sorry, I think it's something with my code. If I remove the layout and keep the map in its own view it works ok.

    Copy Link
  • Jonathan Richards 288 posts 1742 karma points MVP
    May 14, 2018 @ 10:11
    Jonathan Richards
    0

    Hi Mario,

    I can see your trying to render a Google Map using Terratype version 1.0.17, can you say what browser you are using and have you tried in other browsers?

    Also is there any console errors ?

    If you are able to, can you launch Developer Tools (Press F12 in Chrome for example) and see if 

      <div id="TerratypeGoogleMapsV343dab16c-462d-4188-acf3-f77900b6c3e4" style="height:400px;opacity:0.01;filter:alpha(opacity=1);">

    Has any children elements? (If the map is loading there should be hundreds of new DOM elements within).

    Things to note: Once the map has successfully loaded that <div> should have a style of 'Opacity:1' and its parent <div> should be 'display:block'. If there is something in the javascript failing, then the block will stay hidden.

    Cheers

    Jonathan

    EDIT: I note as I was writing this reply that you have already replied yourself. I will leave my answer up, for anyone else that might have your issue and it might offer some direction.

    Copy Link
  • Mario Lopez 168 posts 958 karma points MVP 4x c-trib
    May 15, 2018 @ 03:04
    Mario Lopez
    0

    Thanks Jonathan, that pointed me into the right direction. The issue is that I'm using Vuejs to render a component. That component takes the rendered Razor template using ajax and inject it into the component's template.

    So at this point the markup is there but I'll have to trigger the initialisation of the map manually after the DOM is loaded. Is there anyway I can reload the map?

    Could I use something like?:

    google.maps.event.trigger(map, 'resize');

    If so, which would be the map...?

    Thanks.

    Copy Link
  • Jonathan Richards 288 posts 1742 karma points MVP
    May 15, 2018 @ 10:10
    Jonathan Richards
    100

    Hi Mario,

    There is some code you can call just for this purpose

    It can only be called after the DOM elements of Terratype have loaded.

    <script>
      terratype.init();
</script>

    or if you wish call

    terratype.init()

    in your own js code, when you require the maps to be initialised.

    You can find more info about the javascript framework built into Terratype in the manual, in the section called 'Javascript events'

    Cheers

    Jonathan

    Copy Link
  • Mario Lopez 168 posts 958 karma points MVP 4x c-trib
    May 15, 2018 @ 23:17
    Mario Lopez
    1

    Thanks for the info. In my case I had to include the scripts on the main layout as the html coming from the server is just html and the <script> tags that Terratype creates are not executed and no scripts is loaded.

    As a suggestion, and for this case, it would be nice to have an option on the Html helper to not render the scripts ;)

    thanks man.

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft