GEO my WP and Google Maps Styled

In this tutorial I will show you how to apply Google Maps style to the map of forms created by GEO my WP. The tutorial uses a new action hook which introduced in GEO my WP 2.5 and Google Maps Styled API. We will use the action hook to modify the global object gmwMapOptions. gmwMapOptions object holds the map options of all maps being created and displayed on a page.

The action hook we are going to use is:

do_action( 'gmw_map_options' );

which can be found in /wp-content/plugins/geo-my-wp/geo-my-wp.php

The hook, as show in this tutorial, can be use to apply style for Google maps created by GEO my WP but it can also be used to apply/modify any of the other map options being used with Google Maps API.

In the below example I will add style to the map of the form with ID 1. For this example I will use the "Blue Water" map style posted on this page. You can of course use your own style which you can also create using Google Styled Map wizard. The map style to be used must be an array.

Using Google Maps Styled with GEO my WP

First we will create a new function in the functions.php file of the theme that being used and we will execute the function using the hook mentioned above.

function gmw_map_options( $gmw ) 
add_action( 'gmw_map_options', 'gmw_map_options' );

Next, we declare a new element for the gmwMapOptions object. gmwMapOptions object is already being created by GEO my WP and will hold the map style of the different forms. Since the object is already created we only need to add a new element ( array ) to it. It is important that the new element key will be the form ID we creating the style for. Note, This is a JavaScript element and so we will need to use the function within SCRIPT tags.

Last step is to take the style array that we created ( for this example I copy the style array of the "blue Water" style from this page ) and append it as the value of the object element we created in the step above. Since the element we created above holds all the different map options we will need to make sure we apply the map style to to "styles" options and we doing it by declaring a new array key "styles". So our final code should look like:

Now all you need to do is save the file and test it.