﻿@using System.Web.Mvc.Html
@inherits Umbraco.Web.Mvc.UmbracoViewPage<dynamic>
@if (Model.value != null)
{
    string value = Model.value.ToString();    
    var id = Guid.NewGuid().ToString() + "_map";
    var js_id = id.Replace('-', '_');
    <div class="map gridmaps" id="@id" style="width:100%;"></div>
    <script type="text/javascript">
        var settings = @Html.Raw(value);

        var mapCenter = new google.maps.LatLng(settings.latitude, settings.longitude);

        var mapElement = document.getElementById('@id');
        mapElement.style.height = settings.height + "px";

        var mapOptions = { 
            zoom: settings.zoom, 
            center: mapCenter, 
            mapTypeId: google.maps.MapTypeId[settings.mapType]
        };
        var panoramaOptions = { position: mapCenter };

        map = new google.maps.Map(mapElement, mapOptions);

        if (settings.streetView) {
            var panorama = new google.maps.StreetViewPanorama(mapElement, panoramaOptions);
            map.setStreetView(panorama);
        }

        marker = new google.maps.Marker({
            map: map,
            position: new google.maps.LatLng(settings.latitude, settings.longitude),
            draggable: true
        });
        marker.setMap(map);     
    </script>
}
@inherits Umbraco.Web.Mvc.UmbracoViewPage<dynamic>
@if (Model.value != null)
{
    string value = Model.value.ToString();
    var id = string.Format("{0}_map", Guid.NewGuid());

    <div class="map gridmaps" id="@id" style="width:100%;"></div>

    <script type="text/javascript">
        function initializeMap() {
            var mapElement = document.getElementById('@id');
            var settings = @Html.Raw(value);
            var mapCenter = new google.maps.LatLng(settings.latitude, settings.longitude);
            
            mapElement.style.height = settings.height + "px";

            var mapOptions = {
                zoom: settings.zoom,
                center: mapCenter,
                mapTypeId: google.maps.MapTypeId[settings.mapType]
            };
            
            var map = new google.maps.Map(mapElement, mapOptions);
            
            var marker = new google.maps.Marker({
                map: map,
                position: new google.maps.LatLng(settings.latitude, settings.longitude),
                draggable: true
            });

            marker.setMap(map);
        }
    </script>
}

Change code to use async defer call for Google Maps
Change code to use async defer call for Google Maps

Changed the map code so it uses the callback function of Google Maps. This way the google maps API can be called async.

<script src="https://maps.googleapis.com/maps/api/js?key=YOURAPIKEY&callback=initializeMap" async defer></script>