Each page that contains a google map should have a script at the end of the page which shows off the google map API key.

The script should look something like this:

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkey2t16mYOK9K0_Z0zJr-cTo9fRO7jSA&callback=initMap" async defer></script>

In order to get an API key please visit: https://developers.google.com/maps/documentation/javascript/get-api-key

Also, the google map can be customized from the google map init function which can be found at the bottom of the page.

<script type="text/javascript">
 var map;
 var myLatlng;
 var marker;
 function initMap() {
 var contentString = '<div id="content">'+
 '<div id="siteNotice">'+
 '</div>'+
 '<h1 id="firstHeading" class="firstHeading">Greek Hotel</h1>'+
 '<div id="bodyContent">'+
 '<p>77 Winchester Lane Coachella, CA 92236</p>'+
 '</div>'+
 '</div>';
var infowindow = new google.maps.InfoWindow({
 content: contentString
 });
 myLatlng = new google.maps.LatLng(40.713287,-74.016626);
 var infowindow = new google.maps.InfoWindow({
 content: contentString
 });
 marker = new google.maps.Marker({
 position: myLatlng,
 title:"Hello World!",
 icon: 'img-assets/logotype.png'
 });
marker.addListener('click', function() {
 infowindow.open(map, marker);
 });
 map = new google.maps.Map(document.getElementById('map'), {
 center: {lat: 40.713287, lng: -74.016626},
 zoom: 14,
 styles: [
 {
 "featureType": "administrative",
 "elementType": "labels.text.fill",
 "stylers": [
 {
 "color": "#444444"
 }
 ]
 },
 {
 "featureType": "administrative.province",
 "elementType": "labels.text",
 "stylers": [
 {
 "lightness": "27"
 }
 ]
 },
{
 "featureType": "administrative.locality",
 "elementType": "labels.text",
 "stylers": [
 {
 "color": "#3b3939"
 },
 {
 "weight": "0.76"
 },
 {
 "saturation": "-21"
 },
 {
 "lightness": "45"
 }
 ]
 },
 {
 "featureType": "landscape",
 "elementType": "all",
 "stylers": [
 {
 "color": "#f2f2f2"
 }
 ]
 },
 {
 "featureType": "landscape",
 "elementType": "labels.text",
 "stylers": [
 {
 "visibility": "simplified"
 }
 ]
 },
 {
 "featureType": "poi",
 "elementType": "all",
 "stylers": [
 {
 "visibility": "off"
 }
 ]
 },
{
 "featureType": "poi",
 "elementType": "labels.text",
 "stylers": [
 {
 "weight": "0.70"
 },
 {
 "color": "#8a8a8a"
 }
 ]
 },
 {
 "featureType": "road",
 "elementType": "all",
 "stylers": [
 {
 "saturation": -100
 },
 {
 "lightness": 45
 }
 ]
 },
 {
 "featureType": "road.highway",
 "elementType": "all",
 "stylers": [
 {
 "visibility": "simplified"
 }
 ]
 },
 {
 "featureType": "road.arterial",
 "elementType": "labels.icon",
 "stylers": [
 {
 "visibility": "off"
 }
 ]
 },
 {
 "featureType": "transit",
 "elementType": "all",
 "stylers": [
 {
 "visibility": "off"
 }
 ]
 },
 {
 "featureType": "water",
 "elementType": "all",
 "stylers": [
 {
 "color": "#e4e4e4"
 },
 {
 "visibility": "on"
 }
 ]
 }
 ]});
 marker.setMap(map);
 }
 </script>

The image for the logo on the map is located in app  >  img-assets> logotype.png

The settings needed to change the logo and the pop-up bubble are in the code line bellow

The style of the map was created with Snazzy maps