How to create a custom Google Map with a bespoke pointer icon in Wordpress

Google Maps are fantastic, we take it for granted how easy they are to use and how easy they are to embed into our websites, but what if you want to create your own custom Google Map using your own pointer icon or logo, not only that but what if you want that icon to link to the main Google Maps page for that location or business? This snippet will hopefully enable you to do just that.

First start the process by creating an HTML element to contain your map, this can be any block level element.

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

Next we need to utalise the Googles Maps API, visit here and click on the ‘Get a Key’ link to to get your own Google Maps API Key, this you’ll need to use in the code snippet below below.

Once you’ve got your Google Maps API Key you need to link to your main Javascript/JQuery theme file or setup one if you haven’t already, I recommend doing this via the enqueue method that is recommended by WOrdpress, this keeps everything neat and tidy within your themes functions.php file and will be loaded via wp_head (if set to ‘true’) or wp_footer (if set to ‘false’), you’ll also need to enqueue the Google Maps API Javascript file itself (served by Google themselves), both are outlined in the snippet below.

function js() {
      if ( !is_admin()) {
            wp_register_script('scripts', get_template_directory_uri() . '/YOURJSFILEPATHHERE/scripts.js', '1.0', true);
            wp_enqueue_script('scripts');
            wp_register_script('googlemapsjs', 'https://maps.googleapis.com/maps/api/js?key=YOURGOOGLEMAPAPIHERE&callback=initMap', true);
            wp_enqueue_script('googlemapsjs');
      }
}
add_action('wp_enqueue_scripts', 'js');

Now both files are loading within your theme it’s time to get the map actually working. This following script will render a Google Map with a custom pointer icon into the element you’ve specified above. You can find out the Longitude & Latitude via the Google Maps URL when your on the Location/Company Google Map page, for example if you visit Google Maps and search for a Company or Location it’ll return a URL in the address bar along the lines of this https://www.google.co.uk/maps/place/Pixels+%26+Things/@51.4424943,-2.5577207,17z/data=!3m1!4b1!4m5!3m4!1s0x48718ef9b2dee149:0xa0b5494a0a3c6de9!8m2!3d51.442491!4d-2.555532, the Latitude & Longitude are in Bold, simply add those coordinates to the script below as well as the path to the icon you wish to use on the map itself.

Also use that URL within the script below to link out to when the custom icon is clicked.

I’ve also included a script which makes sure the pointer always is central regardless of orientation or screen size. Once rendered you should see a Google Map with your custom icon which links through to the main Google Maps search landing page for the particular Company or Location.

if (document.getElementById("google-map")) {
	
	//GOOGLE MAP
	window.onload = function(){
	    
	    //Marker Position
	    var myLatLng = {lat: YOURLATITUDEHERE, lng: YOURLONGITUDEHERE};
	    
	    //Map Variables
	    var map = new google.maps.Map(document.getElementById('google-map'), {
	      	zoom: 14,
	        scrollwheel: false,
			mapTypeControl: false,
	        disableDefaultUI: false,
			center: myLatLng
	    });
		
		//Marker Image
	    var image = '../../wp-content/themes/YOURTHEMENAMEHERE/IMAGEPATHNAMEHERE';
	    
	    //Marker
		var marker = new google.maps.Marker({
			position: myLatLng,
			url: 'THECOOMPANYGOOGLEMAPURLHERE',
			map: map,
			icon: image
	    });
	    
	    //Map Marker Link To Google Maps
	    google.maps.event.addListener(marker, 'click', function() {
	    	window.location.href = marker.url;
	    });
	    
	    //Keep Marker Centered on Resize
	    google.maps.event.addDomListener(window, 'resize', function() {
	    	var center = map.getCenter()
		    google.maps.event.trigger(map, "resize")
		    map.setCenter(center)
		})
	    
	}
}

Hopefully this snippet helps you getting a custom Google Map with a custom icon working on your website, you can go further by customising the actual colour and design of the maps itself but that is a whole other tutorial in itself. For a little inspiration visit https://mapstyle.withgoogle.com/.

Prev Next