To help others, I have now got this to work.

On my page template I have -

@{
    var lat = CurrentPage.location.Latitude;
    var lng = CurrentPage.location.Longitude;
    var zoom = CurrentPage.location.Zoom;
    var latlng = lat+","+lng;
}

<!-- GOOGLE MAPS -->

        <style type="text/css">
      html, body, #map-canvas { height: 200px; margin: 0; padding: 0;}
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=[YOUR-API-KEY]">
    </script>
    <script type="text/javascript">
      function initialize() {
        var myLatlng = new google.maps.LatLng(@latlng);

          var mapOptions = {
          center: { lat: @lat, lng: @lng},
          zoom: 11
        };
        var map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);

          var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Hello World!',
          animation: google.maps.Animation.DROP

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

The section above the GOOGLE MAP comment is populated from this project, so if you call your map property myMap within the datatype, you need to change location to myMap.

e.g.

var lat = CurrentPage.location.Latitude;

becomes

var lat = CurrentPage.myMap.Latitude;

You will need to get your own API Key. I just followed the instructions on here: https://developers.google.com/maps/documentation/javascript/tutorial to get mine and then just replace the [YOUR-API-KEY] with your API in the code.

You then place a Div where you want the map to display :

<div id="map-canvas"></div>

Simple!