Google map with custom icon + custom balloon Google Maps Custom markers info: https://developers.google.com/maps/tutorials/customizing/custom-markers Google MAPS API: https://developers.google.com/maps/documentation/javascript/reference#InfoWindow -------> ATTENTION: do not put this code in de document load part <---------------

google_map_custom_icon.html

// add this to your html page (e.g. in a block)
<div id="map_canvas">map_canvas</div>

google_map_custom_icon.js

// *************************
  // CUSTOM GOOGLE MAPS ICON *
  // *************************
  function LoadGmaps() {
    
    // set the base url for the marker icons
    var iconBase = '/sites/dekoning/themes/the_aim_theme/img/';

    // set the map positions
    var pos120 = new google.maps.LatLng(51.094994,3.827168);    // Crelan huisnr. 120
    //var pos122 = new google.maps.LatLng(51.094992,3.827169);  // De Koning huisnr. 122
    //var pos150 = new google.maps.LatLng(51.094521,3.825731);  // huisnr. 150
    //var pos135 = new google.maps.LatLng(51.093685,3.822985);  // huisnr. 135
    var pos125 = new google.maps.LatLng(51.094655,3.826268);    // huisnr. 125

    // MAP
    var mapCanvas = document.getElementById('map_canvas');
    var mapOptions = {
        zoom: 17,
        center: pos120,
        disableDefaultUI: true,
        navigationControl: false,
        mapTypeControl: false,
        streetViewControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        }
    var map = new google.maps.Map(mapCanvas, mapOptions);

    //************************
    // CRELAN BANK
    
    // marker
    var markerCrelan = new google.maps.Marker({
        position: pos120,
        map: map,
        icon: iconBase + 'crelan_maps.png',
        title:"Crelan Bank"
    });
    
    // bubble
    var bubbleOptionsCrelan = {
        content: '<h4><strong>CRELAN BANK</strong><h4><p>Dorp-west 120<br />9080 Lochristi</p><p>Tel. 09 355 31 91<br />Fax 09 355 64 12<br /><a href="mailto:[email protected]">[email protected]</a></p><a href="https://maps.google.be/maps?q=Dorp-west+120+-+9080+Lochristi&hl=nl&sll=51.09623,4.227975&sspn=1.457516,3.749084&hnear=Dorp-West+120,+9080+Lochristi,+Oost-Vlaanderen,+Vlaams+Gewest&t=m&z=16" target="_blank">Routebeschrijving</a>'
        }
    var bubble = new google.maps.InfoWindow(bubbleOptionsCrelan);
    google.maps.event.addListener(markerCrelan, 'click', function() {
      bubble.open(map,markerCrelan);
    });

    //************************
    // DE KONING VERZEKERINGEN
    
    // marker
    var markerDeKoning = new google.maps.Marker({
        position: pos125,
        map: map,
        icon: iconBase + 'dekoning_maps.png',
        title:"De Koning"
    });
    
    //bubble
    var bubbleOptionsDeKoning = {
        content: '<h4><strong>DE KONING VERZ.</strong><h4><p>Dorp-west 122<br />9080 Lochristi</p><p>Tel. 09 355 63 67<br />Fax 09 355 97 53<br /><a href="mailto:[email protected]">[email protected]</a></p><a href="https://maps.google.be/maps?q=Dorp-west+122+-+9080+Lochristi&hl=nl&ll=51.095046,3.827212&spn=0.011387,0.02929&sll=51.094858,3.827062&sspn=0.011387,0.02929&hnear=Dorp-West+122,+9080+Lochristi&t=m&z=16" target="_blank">Routebeschrijving</a>'
        }
    var bubbleDeKoning = new google.maps.InfoWindow(bubbleOptionsDeKoning);
    google.maps.event.addListener(markerDeKoning, 'click', function() {
      bubbleDeKoning.open(map,markerDeKoning);
    });
  }

  google.maps.event.addDomListener(window, 'load', LoadGmaps);

google_map_custom_icon.scss

//----------------
//-- GOOGLEMAPS --
//----------------
#map_canvas {
  width: 500px;
  height: 400px;
  background-color: #CCC;
}

html.tpl.php

// add this line in the head tag
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>