Hi all, can anyone give me an example on how to render a google map using Our.Umbraco.GMaps in modern Umbraco websites please? I've done all the setup and added the data type and property to the page etc. I just don't know how to render it on the page.

Don't forget to give the Div it's in a height! I forget all the time and wonder where it is. lol.

<h2>Map</h2>
<div id="map-canvas" class="map"></div>

<script>
        var map;
        var property = '@Model.Name';

        @{
          var homeCoords = Model.GoogleMap.Address.Coordinates.Latitude.ToString() + ',' + Model.GoogleMap.Address.Coordinates.Longitude.ToString();
          var zoom = Model.GoogleMap.MapConfig.Zoom;
        }

    function initMap() {
      var home = new google.maps.LatLng(@homeCoords);
      var map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: @zoom,
        center: home,
    mapTypeId: google.maps.MapTypeId.ROADMAP
      });
      var marker = new google.maps.Marker({
        position: home,
        map: map
      });
    }

    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=@(Model.GoogleMap.MapConfig.ApiKey)&callback=initMap"></script>

Might be a good idea to output the latitude and longitude in a culture invariant way. Eg. Danish uses a comma instead, which would then ruin the

homeCoords

string.

@Craig100 thanks mate

Been burned by that one to many times 😄

I just custom made it using the props of the property editor, but then again, all I need was a iframe:

csharp
<iframe width="100%" height="350px" style="border:0" loading="lazyload" referrerpolicy="no-referrer-when-downgrade" allowfullscreen src="https://www.google.com/maps/embed/v1/place?key=xxxxxxxxxxxx=@Uri.EscapeDataString(Model.PageTitle)¢er=@Model.Coordinates.MapConfig.CenterCoordinates"></iframe>

Nice one @Ambert

This isn't specific to the GMaps package, but you can implement a few small C# classes to help you with the JS generation. Eg. as in my Gist example: https://gist.github.com/abjerner/7c10ab845db315ed28715de558a78130 This of course doesn't match Google Maps' full feature set. But if you need extra functionality around the markers, you can extend the marker class with some additional options.