Copied to clipboard

Flag this post as spam?

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


  • Levente Kosa 116 posts 300 karma points
    Sep 18, 2019 @ 22:48
    Levente Kosa
    0

    Our.Umbraco.GMaps package example

    Hi,

    Does anybody know how to use this package (https://our.umbraco.com/packages/backoffice-extensions/ourumbracogmaps-google-maps-for-umbraco-8/)?

    I have this code, but I only receive Our.Umbraco.GMaps.Models.GmapsModel result for @gmap. Just try to show the location of the marker.

    My code so far:

    @inherits Umbraco.Web.Mvc.UmbracoViewPage
    
    @{
       var locations = Model.Root().Children.Where(x => x.IsDocumentType("homepage")).FirstOrDefault();
    
        foreach (var location in locations)
        {
            var gmap = location.Value("location");
            <div>@gmap</div>
        }
    }
    
  • Shaishav Karnani from digitallymedia.com 346 posts 1623 karma points
    Sep 19, 2019 @ 00:41
    Shaishav Karnani from digitallymedia.com
    0

    Hi Levente,

    I have checked on the developer source code and it mentions as below.

    @using Our.Umbraco.GMaps.Extensions

    @Html.RenderMapScripts(location.Value("location"))

    Please try. https://github.com/ArnoldV/Our.Umbraco.GMaps/tree/master/src/Our.Umbraco.GMaps.Web

    Hope it helps to solve the issue.

    Cheers,

    Shaishav

  • Levente Kosa 116 posts 300 karma points
    Sep 19, 2019 @ 05:56
    Levente Kosa
    0

    Hi Shaishav,

    Thank you for have a look at it for me. I tried and I got this error for @Html.RenderMapScripts(location.Value("location"))

    Argument 2: cannot convert from 'object' to 'Our.Umbraco.GMaps.Models.GmapsModel'
    

    Do you know what can be the problem?

  • Shaishav Karnani from digitallymedia.com 346 posts 1623 karma points
    Sep 19, 2019 @ 08:19
    Shaishav Karnani from digitallymedia.com
    101

    Can you try this instead please?

    location.Value<Our.Umbraco.GMaps.Models.GmapsMode>("location")
    
  • Levente Kosa 116 posts 300 karma points
    Sep 19, 2019 @ 08:32
    Levente Kosa
    1

    If you mean like this:

    var gmap = location.Value<Our.Umbraco.GMaps.Models.GmapsModel>("location");
    <div>@gmap</div>
    

    The result is <div>Our.Umbraco.GMaps.Models.GmapsModel</div>


    If you mean like this:

    var gmap = Html.RenderMapScripts(development.Value<Our.Umbraco.GMaps.Models.GmapsModel>("location"));
    

    I got an error saying:

    The model item passed into the dictionary is of type 'Umbraco.Web.PublishedModels.DevelopmentLanding', but this dictionary requires a model item of type 'Our.Umbraco.GMaps.Models.GmapsModel'.
    
  • Levente Kosa 116 posts 300 karma points
    Sep 21, 2019 @ 15:36
    Levente Kosa
    0

    Thanks a lot Shaishav! This worked

  • Lukaz 20 posts 161 karma points
    Sep 19, 2019 @ 13:03
    Lukaz
    0

    First in Settings -> Data types -> Google Maps Umbraco 8 -> Enter Google API Key, check other setting as well and Save.

    in your template add:

    @using Our.Umbraco.GMaps.Extensions
    
    <section>
        @Html.Partial("Our.Umbraco.GMaps/MapScripts", Model.Value("location"))  
    </section>
    

    I also have done some changes to Our.Umbraco.GMaps/MapScripts.cshtml partial view as I was getting some errors regarding mapStyles, and wasn't satisfied how marker pin wasn't centered after applaying lat and lng of the location.

    Here is my code of modified partial view:

    @using Newtonsoft.Json
    @model Our.Umbraco.GMaps.Models.GmapsModel
    
    @if (Model.Address != null && Model.MapConfig != null)
    {
        <div id="map" style="width: 100%; min-height: 400px;"></div>
    
        <script>
            // Initialize and add the map
            function initMap() {
                // The location of the chosen point
                var markerPosition = new google.maps.LatLng(@(Model.Address.Coordinates));
    
                var map = new google.maps.Map(document.getElementById('map'),
                    { zoom: 16, center: new google.maps.LatLng(@(Model.Address.Coordinates)) } );
                // The marker, positioned at the chosen point
                var marker = new google.maps.Marker({ position: markerPosition, map: map });
            }
        </script>
        <script async defer src="https://maps.googleapis.com/maps/api/js?key=@Model.MapConfig.ApiKey&callback=initMap"></script>
    }
    

    Hope this helps, works for me. :)

  • Levente Kosa 116 posts 300 karma points
    Sep 19, 2019 @ 13:28
    Levente Kosa
    0

    Thanks for the response.

    My settings are fine and saved.

    The problem is I think that I need to add other data to the map, so I need to inherit with @inherits Umbraco.Web.Mvc.UmbracoViewPage And with @model Our.Umbraco.GMaps.Models.GmapsModel it doesn't work.

    What I need is to loop through some pages and grab the coordinates from the map which has location alias to show all the markers. After I can handle the map myself. I hope it's clear how I explained.

  • Simon Edward Czerwinski 5 posts 96 karma points
    Mar 20, 2020 @ 10:56
    Simon Edward Czerwinski
    0

    Hi,

    Do anyone of you got problem to get the value of the City when using the marker?

    If I search for the city in the searchfield, I get the value with no problem. But when I use the marker to place the location so the coordinates displays in the searchfield, the City is null. enter image description here

    Here is my debugg result: (Ignore the different coordinates in the printscreens, I managed to touch the mark after the debuggresult)

    enter image description here

    Best regards,

    Simon

Please Sign in or register to post replies

Write your reply to:

Draft