Create a Google Maps Shortcode in WordPress
Google Maps is one of the most widely used services on the internet. In the first decade of the 21st century, it and its counterparts like Mapquest and Bing maps have completely revolutionized how people find destinations. Before these came on the scene, people used to call each other up and ask for directions and write things like “2nd right after the gas station” on *paper*. How did we live like this? 😀
While there are definitely a lot of great and easy-to-use WordPress plugins out there (maybe, too many in a saturated WordPress plugin market), I’m a fan of not installing a plugin for every little thing if it is something that could be accomplished by adding a relatively small amount of code to a page. In what follows, we’re going to create a Google Maps shortcode to quickly integrate Google Maps into your website without the need for a plugin. That way you can just drop it into your editor and be on your merry way.
First, in order to get Google Maps to work in your WordPress site you’re going to want to include the JavaScript for Google Maps. If you wanted to, you could place the following in the <head> section of your header.php file…
<script src="" type="text/javascript"></script>
However, if you are using the “proper way” that you’re supposed to load scripts in WordPress using the wp_enqueue_script function you could add the following to your functions.php file or a class if you are wrapping your WordPress functionality up in classes…
function enqueue_custom_scripts() {
wp_register_script('googlemaps', ('http://maps.google.com/maps/api/js?sensor=false'), false, null, true);
wp_enqueue_script('googlemaps');
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');
Here we hook our script registration to the wp_enqueue_scripts action hook.
For our shortcode we’re going to want a bunch of different options that we can set in the attributes of our shortcode. As can be found in the Google Maps Developer Documentation, there are a bunch of different elements of a Google map that we can customize.
First, we’re going to want to have an “id” attribute to support multiple maps on the same page. This can be a simple string value that we’ll use for our element that we create (which will be a <div>). Obviously, we’re going to want to be able to center the map around a locale that we specify. Unfortunately with Google Maps we can’t just pass in an address in code. Rather than dealing with parsing all of the different formats of addresses all the world over, Google Maps instead uses a latitude/longitude system. Fortunately, there are good services out there like this one from iTouchMap where you can enter an address and you’ll get the correct latitude/longitude coordinates back.
We’re going to want to control the zoom (how far away or how close we’re zoomed in to our locale) and we’re also going to want to be able to customize the “type” of map to initialize: satellite, terrain, roadmap, or hybrid. Finally, we’ll also want to add a click handler so that when we click on the marker, we get a message box that pops-up with a message. Width and height are also good things to specify so we can set how large we want our map to be.
So with all of those options taken into account the finished shortcode is below…
/*** Google Map ***/
function googleMapShortcode($atts, $content = null)
{
extract(shortcode_atts(array("id" => 'myMap', "type" => 'road', "latitude" => '36.394757', "longitude" => '-105.600586', "zoom" => '9', "message" => 'This is the message...', "width" => '300', "height" => '300'), $atts));
$mapType = '';
if($type == "satellite")
$mapType = "SATELLITE";
else if($type == "terrain")
$mapType = "TERRAIN";
else if($type == "hybrid")
$mapType = "HYBRID";
else
$mapType = "ROADMAP";
echo '<!-- Google Map -->
<script type="text/javascript">
$(document).ready(function() {
function initializeGoogleMap() {
var myLatlng = new google.maps.LatLng('.$latitude.','.$longitude.');
var myOptions = {
center: myLatlng,
zoom: '.$zoom.',
mapTypeId: google.maps.MapTypeId.'.$mapType.'
};
var map = new google.maps.Map(document.getElementById("'.$id.'"), myOptions);
var contentString = "'.$message.'";
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng
});
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map,marker);
});
marker.setMap(map);
}
initializeGoogleMap();
});
</script>';
return '<div id="'.$id.'" style="width:'.$width.'px; height:'.$height.'px;" class="googleMap"></div>';
}
We also have to make sure that we register the shortcode. Add the following immediately after the googleMapShortcode function…
add_shortcode('googlemap','googleMapShortcode');
Then to use the shortcode you just have to do the following…
[googlemap id="myMap" zoom="9" latitude="21.306944" longitude="-157.858333" message="We are here"]
If you wanted to use this code outside of the WordPress Loop, such as your sidebar.php or footer.php files, you could use the following….
echo do_shortcode(‘[googlemap id="anotherMap" zoom="9" latitude="21.306944" longitude="-157.858333" message="We are here"]‘);
Now we have an easy way of adding Google Maps to our WordPress website!
function enqueue_custom_scripts() { wp_register_script('googlemaps', ('http://maps.google.com/maps/api/js?sensor=false'), false, null, true); wp_enqueue_script('googlemaps'); } add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');- then I also inserted the other part of the code snippet inside functions.php right after the previous one as follows:/*** Google Map ***/ function googleMapShortcode($atts, $content = null) { extract(shortcode_atts(array("id" => 'myMap', "type" => 'road', "latitude" => '36.394757', "longitude" => '-105.600586', "zoom" => '9', "message" => 'This is the message...', "width" => '300', "height" => '300'), $atts)); $mapType = ''; if($type == "satellite") $mapType = "SATELLITE"; else if($type == "terrain") $mapType = "TERRAIN"; else if($type == "hybrid") $mapType = "HYBRID"; else $mapType = "ROADMAP"; echo ' $(document).ready(function() { function initializeGoogleMap() { var myLatlng = new google.maps.LatLng('.$latitude.','.$longitude.'); var myOptions = { center: myLatlng, zoom: '.$zoom.', mapTypeId: google.maps.MapTypeId.'.$mapType.' }; var map = new google.maps.Map(document.getElementById("'.$id.'"), myOptions); var contentString = "'.$message.'"; var infowindow = new google.maps.InfoWindow({ content: contentString }); var marker = new google.maps.Marker({ position: myLatlng }); google.maps.event.addListener(marker, "click", function() { infowindow.open(map,marker); }); marker.setMap(map); } initializeGoogleMap(); }); '; return ''; }- The last thing I did is to use the shortcode inside a wordpress page, like this: As you can guess, this didn't work for me. Can you point me in the right direction? Thank you again. Vincenzoadd_shortcode('googlemap','googleMapShortcode');I unfortunately forgot to include it in the tutorial. I have added it in now.