Challenge: On hover over element changes map centre and zoom

January 22, 2015 1:45 pm Published by 2 Comments

In this Challenge, we will be demonstrating how you can add a non-map element to your page or website, so as to manipulate the map center and zoom on hover. As this is a non-map entity, you can place it in your header, your footer or even as a link or button above or below your map (however, for the last mentioned elements you might need to alter your jQuery slightly – don’t worry, we will guide you through this).

We will be showing you how to make these changes in a HTML image. You can alter this element to suit your requirements.

Step 1

See your WordPress Dashboard → Pages → Edit the page your map is on. View the Editor in Text Mode. Add the following above/below your Maps Shortcode:

<img src="imagesrc.jpg" title="image title"/>

Use your preferred title and insert your image name. Example: blue.png

<img src="blue.png" title="Blue"/>

step1

Step 2

Add the following custom attributes to the image:

  • lat = Latitude of where to zoom to
  • lng = latitude of where to zoom to to
  • zoom = Zoom level of the map
  • map_id = ID of the map in question
  • class=’wpgmza_zoom_link’ = This is the trigger class that we will be using

Example:

<img src="blue.png" title="Blue" lat="51.588902910414824" lng="-0.13037145137786865" zoom="10" class="wpgmza_zoom_link" map_id="1" />

Step 3

Find the following jQuery code segment in the core.js file. PluginsEdit WP Google Maps core.js

jQuery('body').on('tabsactivate', function(event, ui) {

for(var entry in wpgmaps_localize) {

InitMap(wpgmaps_localize[entry]['id'],'all');

}

});

(You can do a Ctrl+F to Search for “tabsactivate”). Below this, add the following code:

jQuery('body').on('mouseenter', '.wpgmza_zoom_link', function(event, ui) {

var mid = jQuery(this).attr('map_id');

var mlat = jQuery(this).attr('lat');

var mlon = jQuery(this).attr('lng');

var mzoom = jQuery(this).attr('zoom');

var myLatLng = new google.maps.LatLng(mlat,mlon);

MYMAP[mid].map.setCenter(myLatLng);

MYMAP[mid].map.setZoom(mzoom);

});

code

This will allow your users to hover over the image on your website, to change the location and center of the map.

This code can be altered in many ways. You can also have a “mouseleave” event in which the user has to move out of the image boundaries, before the changes take effect.

Create a Button

You can also have the click event “jQuery(‘body’).on(‘click’…”, which will allow you to use a button to manage the process. To do this, you will need to slightly alter the HTML and jQuery code.

Change “img” to “button”:

<button type=”button” lat="51.588902910414824" lng="-0.13037145137786865" zoom="10" class="wpgmza_zoom_link" map_id="1">Button Text</button>

Alter the jQuery as shown before, by changing the mouseenter to click:

jQuery('body').on('click', '.wpgmza_zoom_link', function(event, ui) {...

We hope enjoyed this Challenge. If you have any questions, please get in touch with our support team.

Tags: , , ,

Categorised in:

This post was written by Nick Duncan

Leave a Reply to Josie Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.