Hi lele

The coordinates is the only thing that is saved.

So you fetch the value of your property alias you'll get the coordinates returned as "lat,lng" for instance like 55.4000,12.0000

So you need to instantiate a map based on the coordinates using the Google Map API.

You can read more about how to do that here https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map

Hope this helps.

/Jan

Hi Jan

Thank you for your answer. Well when I try to get the cordinaates (@Umbraco.Field("googleMaps")),  I receive this text "GMapsLocation" and not the coordinates.  

best regards

manuel

lele,

You need to use @Model.Content.GetPropertyValue<GMapsLocation>("googleMaps") which returns a strongly typed "GMapsLocation" object holding Lat/Lng coordinates. And you can use those coordinates in your map

--Dirk

Hey Dirk,

This code @Model.Content.GetPropertyValue<GMapsLocation>("googleMaps") don't work in Umbraco 7.1.2. I receive a compilation error....

System.Web.WebPages.WebPageExecutingBase.Write(System.Web.WebPages.HelperResult) has a bad argument

manuel

Sounds a bit weird, do you have 2 Gmaps*.cs files in your App_Code folder?

--Dirk

yes I have....

Ok, let's try digging deeper...

Can you list your code so I can have a look at it? 

--Dirk

Hi Lele

I just noticed you're running Umbraco 7.1.2 - It contains some bugs, which have been fixed with 7.1.3. Not sure if the above issue is related to these bugs but eventually you'll run into some of them so therefore I would encourage you to upgrade - You can download 7.1.3 here http://our.umbraco.org/contribute/releases/713 and make sure you follow the upgrade instructions.

Before doing anything make sure to make a backup of your files so you can easily rollback in case something does not work as expected.

Just a tip.

/Jan

Hi, I have the same problem here on 7.1.3 installation, MVC.

If I use the  @Model.Content.GetPropertyValue<GMapsLocation>("googleMaps")

I get this error: CS1502: The best overloaded method match for 'System.Web.WebPages.WebPageExecutingBase.Write(System.Web.WebPages.HelperResult)' has some invalid arguments

Any Idea?

Here is my code:

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script>
      function initialize() {
        var map_canvas = document.getElementById('map_canvas');
        var map_options = {
          center: new google.maps.LatLng(32.0554,34.7595),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(map_canvas, map_options)
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>

<article class="mainCol">
    <h1>@CurrentPage.title</h1>
    @CurrentPage.content
    <p>@Umbraco.Field("googleMap")</p>
    <div id="map_canvas"></div>
</article>

Hi There

Could you show the whole part of the code? Would like to see your using statements etc. as well.

/Jan

Hi,

Thanks for your help. its:

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = "Master.cshtml";
}
@section scripts{
    <style>
      #map_canvas {
        width: 600px;
        height: 240px;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script>
      function initialize() {
        var map_canvas = document.getElementById('map_canvas');
        var map_options = {
          center: new google.maps.LatLng(32.0554,34.7595),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(map_canvas, map_options)
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
}

<div class="topMarging"></div>
<aside class="rightCol">
    <h2>@CurrentPage.asideTitle</h2>
    @CurrentPage.asideContent
</aside>

<article class="mainCol">
    <h1>@CurrentPage.title</h1>
    @CurrentPage.content
    <p>@Umbraco.Field("googleMap")</p>
    <div id="map_canvas"></div>
</article>

Showing the values doesn't work if your culture uses comma as decimal separator. Following change is needed in GMapsvalueConverter:

                Lat = decimal.Parse(coordinates[0], System.Globalization.CultureInfo.InvariantCulture),

                Lng = decimal.Parse(coordinates[1], System.Globalization.CultureInfo.InvariantCulture)

Thanks Daniel,

My culture defind as he-IL, hebrew. Maybe it is the reason for this problem, but even after I change the GMapsvalueConverter I still get this annoying error:

CS1502: The best overloaded method match for 'System.Web.WebPages.WebPageExecutingBase.Write(System.Web.WebPages.HelperResult)' has some invalid arguments

For me this is also not working.

This code crashes:

@foreach (var childPage in Model.Content.Children.Where(x => x.IsVisible()))
{
    <div class="widget mapwidget block">
        <article>
            <div class="map">
                @childPage.GetPropertyValue<GMapsLocation>("location")                          
            </div>
        </article>
    </div>
}

This code gives me the following output "GMapsLocation"

@foreach (var childPage in Model.Content.Children.Where(x => x.IsVisible()))
{
    <div class="widget mapwidget block">
        <article>
            <div class="map">
                @childPage.GetPropertyValue("location")                             
            </div>
        </article>
    </div>
}

So I can't seem to get the coordinates to the screen unfortunately.

I also tried adding this to the GMapsvalueConverter as suggested by Daniel, with no success.

            Lat = decimal.Parse(coordinates[0], System.Globalization.CultureInfo.InvariantCulture),
            Lng = decimal.Parse(coordinates[1], System.Globalization.CultureInfo.InvariantCulture)

Roel:

When you access the property it's an object of type GMapsLocation. This object has values in Lat and Lng, so you need to do something like:

@{
var coordinates =  childPage.GetPropertyValue<GMapsLocation>("location");
<span>@coordinates.Lat</span>
<span>@coordinates.Lng</span>
}

Alternatively @coordinates["Lat"]. I don't quite remember. :)

/Daniel

Thanks Daniel, now it's working!

Also if I use the standard GMapsValueConverter.cs

using this code:

Lat = decimal.Parse(coordinates[0]),
Lng = decimal.Parse(coordinates[1])

I get coordinates without dots or commas.

If I use the version which is changed by Daniel.

using this code:

Lat = decimal.Parse(coordinates[0], System.Globalization.CultureInfo.InvariantCulture),
Lng = decimal.Parse(coordinates[1], System.Globalization.CultureInfo.InvariantCulture)

I get coordinates with commas.

Rather than have everyone struggle with this, would it be possible to update the one line text file in the "Resources" tab on the project page with a simple example of how to get the coordinates out of Umbraco? I've just spent an hour and still none the wiser. Most of the time it's the syntax that trips people up once you've understood the concept.

My view code is:-

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = "BasePage.cshtml";
}

        @Html.Partial("topPageImage", Model.Content)

        <div class="row main-content">
            <h1>@Model.Content.Name</h1>
            <div class="col-md-8">
                @Umbraco.Field("bodyText") 
            </div>
            <aside class="col-md-4">
                <!-- Map -->
                <div class="side-gallery">
                    <h4>Map</h4>
                    <div id="map-canvas" style="width:100%;height:300px"></div>

                </div>  
            </aside>
        </div>

        @section footerScripts {

        <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script>
            var map;
            var property = '@Model.Content.Name';
            var latLng = '@Html.Raw(Model.Content.GetPropertyValue<GMapsLocation>("googleMap"))';

            function initialize() {
                var mapCanvas = document.getElementById('map-canvas');
                var mapOptions = {
                  center: new google.maps.LatLng(latLng),
                  zoom: 6,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
                }
                var map = new google.maps.Map(mapCanvas, mapOptions)
              }
              google.maps.event.addDomListener(window, 'load', initialize)
        </script>           
        }

The latLng variable is populated with 'GMapsLocation' instead of the saved coordinates. Could you please show us how to extract the coords from Umbraco?

Many thanks.

Craig

is working on a reply...