Trouble getting "new look" Google Maps embedded

Question

Building a website for a client I would need to embed GMaps on a regular basis. For the purpose, I use maplace.js.

It all works rather nicely but I have noticed something odd.

I have enabled the new "look" of google maps on my Google account, so now it looks very nice and clean:

Here, I can generate an iFrame for manual embedding of a GMap on my website, keeping that new, clean look and rather convenient "get directions" overlay:

However, when using maplace.js (and thus, in effect the maps API) I still get the old look and noe of the nice and clean controls:

I have searched high and low for a way to make thinks look the same as in the Google generated frames, but no luck.

These are the includes I use to get things done:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry&v=3.exp"></script>
<script type="text/javascript" src="/Scripts/maplace.min.js"></script>

And this is the CSS that is applied to the map:

#gmap {
    height: 300px;
    width: 100%;
}

And the actual map embedding:

<script>
new Maplace({
    map_options: {
        scrollwheel: false,
        navigationControl: true,
        mapTypeControl: false,
        scaleControl: false,
        draggable: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    },
    visualRefresh: true,
    locations: [

            {lat: 50.871197, lon:  4.696941000000038, zoom: 15}



    ]
}).Load();
</script>

Anybody have thoughts on this?

Answer 1

I finally figured this out (actually it is odd nobody else seems to have done so already).

The "new look" maps I refer to in my question are generated as part of the Google Maps Embed API.

This API offers a number of benefits (apart from the nice look and context for the user looking at them):

• No usage/traffic limits
• Context for the user looking at the map is provided if that user is logged in to his/her account

Furthermore, it seems easy enough to embed this sort of map from any given content manager if you intend to use them on your site. This is because the src attribute of the to embed them always has following layout:

https://www.google.com/maps/embed/v1/MODE?key=API_KEY&parameters

Which, according to the documentation is as follows:

• {MODE}: is one of place, directions, search, or view.
• {API_KEY} is your free API key.
• Parameters include optional parameters

The provided examples seem to show that it should be easy enough to e.g. link content fields of your CMS to the {MODE} field of the iframe src attribute:

https://www.google.com/maps/embed/v1/place?key=API_KEY&q=Fisht+Olympic+Stadium,Sochi+Russia

Which is all I ever wanted to achieve. It seems I was just overly focused on the Maps API itself and somehow mist the other stuff :-/