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

2 Comments

  • Josie says:

    Thanks for this! Was able to modify the answer to create tabs that when clicked will move the map.

  • Lewis Ho says:

    I got some error on the zoom base on your coding, it seems the zoom value is a string, it need to change to integer, so I add the code to convert the string to int.
    MYMAP[mid].map.setZoom(parseInt(mzoom));

Leave a 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.