So far I've successfully use Data Type Grid Injector, and therefore has a choice of recalling the macro, which I have named Google Maps. But I do not see the map. Below you two examples of codes (under "partiel View Macro Files") I've tested, but it is not working when I insert Data Type Document Type as normal.

Option 1 tested:
inherits Umbraco.Web.Macros.PartialViewMacroPage
<Script>
was map;
was property = '@ Model.Content.Name';
@ {
was latLng = Model.Content.GetPropertyValue <GMapsLocation> ("GoogleMap");
}

function initialize () {
was theLatLng = new google.maps.LatLng (@ Html.Raw (latLng.Lat) @ Html.Raw (latLng.Lng));
was mapCanvas = document.getElementById ('map-canvas');
was mapOptions = {
center: theLatLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.HYBRID
}
was map = new google.maps.Map (mapCanvas, mapOptions)

was marker = new google.maps.Marker ({
position: theLatLng,
map: map,
title: 'The Property'
});
}
google.maps.event.addDomListener (window, 'load', initialize)
</ Script>
<Div id = "map-canvas" style = "width: 100%; height: 400px;"> </ div>

Option 2 tested:
<Div ng controller = "GMaps.GoogleMapsController" class = "umb editor umb-google maps test">

    <Span id = "geoCodeError" class = "hide">
        <Gmaps-localize key = "geoCodeError"> Oops! Having trouble geocoding Specified address! Please try again. </ Gmaps-localize>
    </ Span>
    
    <Span id = "locationSet" class = "hide">
        <Gmaps-localize key = "locationSet"> Location set to </ gmaps-localize>
    </ Span>

    <Div>
        <Input type = "text" id = "{{}} _ model.alias lookup" class = "umb editor umb-text string text string" />
    </ Div>
    <Div>
        <Div class = "map" id = "{{}} _ model.alias map"> </ div>
    </ Div>
    <Div>
        <Span> {{}} formattedAddress </ span>
    </ Div>
    <Div>
    <Button type = "submit" id = "umb-google maps reset" class = "btn">
            <Gmaps-localize key = "resetTxt"> Reset position </ gmaps-localize>
        </ Button>
    </ Div>
</ Div>

Data Type Document Type normally displayed correctly:

Sorry. missing this code-line in top of Option 2:

@inherits Umbraco.Web.Macros.PartialViewMacroPage

This is what I've tested, and the result is what picture two show.

Just a quick reply, but for your Option 1 / Macro did you make sure "Render in rich text editor and the grid" was turned on in the Macro Properties?

There's a Google Map Project that may help, although I haven't looked into it much yet (my task for next week!)

https://our.umbraco.org/projects/backoffice-extensions/google-maps-property-editor-w-google-places-autocomplete-lookup

BTW what is "was" ? Shouldn't it be "var" ?

The answer is yes, "render in rich text editor and the grid" is turned on, and you link to the Project I try to integrate in grid layout. I've got the map (Picture 3), but I still miss the integrating in grid part (Picture 2).

Yes VAR, not WAS - something happend with the formattings somewhere..

(this is translation: WAS is the same as VAR in Norwegian, my language..)

For furter info: This is how it look when I start with the content:

One (bootstrap) carousel, and (hopefully) one Google Map - two macros.

(Hope we'll see many of these choises as standard in Grid layout in Umbraco in the future, or at least easy to integrate via NuGet/Package or something..)

Hi Tom,

I got it working! I dug around in the code and the Google Maps API call was actually throwing a JavaScript error "Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened."

After a bit of digging it seems that we need to call the API a bit differently (References: https://developers.google.com/maps/documentation/javascript/tutorial?hl=en#asynch)

So I removed this line: 

google.maps.event.addDomListener (window, 'load', initialize)

and removed my script reference to:

"//maps.google.com/maps/api/js?sensor=false&language=en"

 I then added this after the initialize function, but in the same script tags.

function loadScript() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = '//maps.googleapis.com/maps/api/js?v=3.exp&' + 'callback=initialize';
    document.body.appendChild(script);
}

$(document).ready(loadScript());

So it's basically the same as you had it, but the API is being called asynchronously now... I've got this working as a macro, and also as a grid property editor (so I can have a fancy map icon haha)

I have not gotten this to work yet.

The idea is to create a data type with different coordinates for each map (I think). The map will then be recalled in a macro, and Google Maps lookup feature in the map should work so that the position in map first reading the position in the data type which is selected - and then move to the area you are looking up when you write name of places, and then save the document in the usual way with selected coordinates on the map. And it should work not only as data type in the document type as shown in the example/documentation, but also inside of a the grid.

Then read the map on the page. I've can see the map with the use of:

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@using ClientDependency.Core.Mvc
@{
    Layout = "Master.cshtml";
    Html.RequiresJs("https://maps.googleapis.com/maps/api/js?sensor=false");
}

<script>
    var map;
    var property = '@Model.Content.Name';
    @{
        var latLng = Model.Content.GetPropertyValue<GMapsLocation>("googleMap");
    }

    function initialize() {
        var theLatLng = new google.maps.LatLng(@Html.Raw(latLng.Lat),@Html.Raw(latLng.Lng));
        var mapCanvas = document.getElementById('map-canvas');
        var mapOptions = {
              center: theLatLng,
                zoom: 15,
           mapTypeId: google.maps.MapTypeId.HYBRID
        }
        var map = new google.maps.Map(mapCanvas, mapOptions)
           
            var marker = new google.maps.Marker({
                position: theLatLng,
                     map: map,
                   title: 'The Property'
            });
    }

    google.maps.event.addDomListener(window, 'load', initialize)
</script>

<div class="map" style="height: 200px;" id="map-canvas"></div>

But the idea is well that we should use angular controller, with something like this?
<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <div ng-controller="Umbraco.PropertyEditors.GoogleMapsController" class="umb-editor umb-googlemaps">
                <div class="map" style="height: 200px;" id="{{model.alias}}_map"></div>
            </div>
        </div>
    </div>
</div>   

This I do not get to work. But this is not the inside of a Grid, but on the outside (this is not what I want).

Possible it is I who do not know AngularJS well enough, but if someone can give a rough overview of where we need what to get maps feature to work as desired, and often in detail also, if anyone has gotten to all of this to work.

(and what am I missing since the source code in the document still prints as id = "{{}} _ model.alias map"?)

Hard to get an overview here, but usually want at least one rough list of where to use what etc ..

I now use this solution instead that works the way I want
https://our.umbraco.org/projects/website-utilities/gridmaps

Forum:
https://our.umbraco.org/forum/umbraco-7/developing-umbraco-7-packages/64898-GridMaps-ver-10-GridMaps-for-Umbraco?p=0#comment219699

Case closed.

is working on a reply...