When it comes to location, Google map is a really powerful tool. It requires just a couple of minutes to create a new map!
Unfortunately  the style of the map doesn't always fit properly the  website style.
This resource allows you to set a main colour for your map (plus a saturation and brightness level) an to add a custom map marker.
The default map controls have been replaced with custom zoom-in/zoom-out buttons.

Creating the structure

We created a section#cd-google-map to contain our google map, the custom #cd-zoom-in and #cd-zoom-out buttons and the address bar.

<section id="cd-google-map">
   <!-- #google-container will contain the map  -->
   <div id="google-container"></div>
   <!-- #cd-zoom-in and #zoom-out will be used to create our custom buttons for zooming-in/out -->
   <div id="cd-zoom-in"></div>
   <div id="cd-zoom-out"></div>
   <address>86-90 Paul Street, London, EC2A 4NE</address> 
</section>

The #cd-zoom-in and #cd-zoom-out buttons will be appended to the map using jQuery (more in the Events handling section).

We inserted the link to the Google Map API before the body closing tag:

<script src="https://maps.googleapis.com/maps/api/js?key={YOUR_API_KEY}"></script>

You have to replace {YOUR_API_KEY} with a real key number (here you can find out how to create an API key).

Adding style

We set width: 100%; to the section#cd-google-map (and to the div#google-container) so that the map covers the entire width of the viewport. We also added some basic style to the #cd-zoom-in/#cd-zoom-out buttons.
The style of the map has been set into the jQuery file.

One thing to note: on mobile, we reduced the high of the map to  facilitate scrolling through the page (scrolling on the map just drags the map but doesn't scroll the page).

Events handling

First of all, we defined our google map parameters:

var latitude = 51.5255069,
    longitude = -0.0836207,
    map_zoom = 14;

//google map custom marker icon - .png fallback for IE11
var is_internetExplorer11= navigator.userAgent.toLowerCase().indexOf('trident') > -1;
var marker_url = ( is_internetExplorer11 ) ? 'img/cd-icon-location.png' : 'img/cd-icon-location.svg';

We used a svg image as custom marker,  but added a png fallback for IE11.

To style our map, we defined a main color, a value of saturation and a value of brightness:

var main_color = '#2d313f',
    saturation_value= -20,
    brightness_value= 5;

These 3 values determine the style of our custom map. I.e., to style the highways we set:

var style= [ 
   {
      //don't show highways lables on the map
      featureType: 'road.highway',
      elementType: 'labels',
      stylers: [
         {visibility: "off"}
      ]
   }, 
   {
      //set highway colors/brightness/saturation
      featureType: "road.highway",
      elementType: "geometry.fill",
      stylers: [
         { hue: main_color },
         { visibility: "on" }, 
         { lightness: brightness_value }, 
         { saturation: saturation_value }
      ]
   }, 
   // other elements style here
];

You can have a look at the complete list of the featureTypes on the Google developer's guide.

Note: we set the scrollwheel option to false to disable scrollwheel zooming on the map.

As final touch, we appended to the map our custom #cd-zoom-in/#cd-zoom-out buttons (we defined the CustomZoomControl function to do that) and placed them on the top-left of the map:

map.controls[google.maps.ControlPosition.LEFT_TOP].push(zoomControlDiv);