Insert A Google Map Anywhere In Your WordPress Site

premiseGoogleMap() allows you to insert a Google Map in any page or post by passing a simple set of arguments.

 

Getting Started

All you need to start using this plugin is a Google Maps API key – which you can obtain easily by clicking on Get A Key here. Once you have an API key you can set it as a global option or pass it to every map you create, like this:

$( '.el_selector' ).premiseGoogleMap( {
    key: 'your_API_key_goes_here',
    center: '123 street address, City State, Zip',
    marker: true
} );

The example above will create a map on any element that has a class el_selector and it will automatically add a marker using the address provided for center as the position and title for the marker.

To avoid having to pass the key every time you use the plugin set it globally by inserting the following line of code before you call the plugin.

$.fn.premiseGoogleMap.defaults.key = 'your_API_key_goes_here';

 

Options

Let’s take a look at the options that you can pass to this plugin to customize your map.

key string Required. Google Maps API Key.

center string Required. An address to use as the center of the map

marker mixed Optional Default true. Boolean value to display default marker or not. Object builds a custom marker.

infowindow object Optional. Object to build infowindow for marker

zoom integer Optional 0-18 Default 15. Set the default zoom for the map.

minHeight integer Optional Default 300. Set the min-height for the map. If the element does not have a height the map will fail to load properly.

bindInfowindow boolean Optional Default true. whether to bind the infowindow to open when a marker is clicked.

onMapLoad function Optional. this callback is called right after that map loads.

 

Declaring Global Defaults

Being able to declare global defaults comes in handy when you are using the plugin in more than one place on your site. We already discussed briefly how to set your API Key as a global default to avoid having to pass it every time you load a map. Here is an example on declaring global defaults for the API key and the min-height for each map. Two very useful and common global parameters to set.

// declare it globally as a default
$.fn.premiseGoogleMap.defaults.key = 'your_API_key_goes_here';

// change the default 300px to 500px
$.fn.premiseGoogleMap.defaults.minHeight = 500;

// call the map after our globals 
$( 'el_selector' ).premiseGoogleMap( { 
    center: '123 street address, City State, Zip', 
    marker: true
} );

Being able to declare global parameters also gives us the ability to “get rid of it” if it makes sense for us. For example, you may want to control the height for each map from your stylesheet and not the plugin. To do this, we can set the min-height to nothing, which in turn wont set it on the element allowing us to control it via CSS.

// get rid of the min-height param
$.fn.premiseGoogleMap.defaults.minHeight = '';

 

Tips ‘n Tricks

Setting a dynamic and responsive height to your map

We can use Premise WP CSS Framework to add a wrapper around our map that will ensure our map is always proportionate in size! By wrapping our map using the premise-aspect-ratio-(16-9|4-3|1-1) class we can ensure our map will always keep its aspect ratio. Here is how to use it, we are going to keep our map proportionate to a 16:9 ratio.

// Our html will look like this
<div class="premise-aspect-ratio-16-9">
    <div class="my-map"></div>
</div>

// Our JS will look like this. needs to be wrapped in script tags.
(function($){
    $(document).ready(function(){
        // set gloabl params
        $.fn.premiseGoogleMap.defaults.key = '_key_';
        $.fn.premiseGoogleMap.defaults.minHeight = '';
        // build our map
        $('.my-map').premiseGoogleMap({
            center: 'the address you want',
            marker: true
        });
    });
}(jQuery));

Here is the result of the code above:

Send us your comments..

Your email address will not be published. Required fields are marked *