Customize the Mapply Display

Alexa

Published: August 16, 2017 19:19

Last Updated: June 04, 2021 18:45

Mapply
All Versions
Basic CSS + Javascript knowledge required
10 Minutes

Caution

At this time, Mapply is unavailable for new installations. If you are currently using Mapply, you will be able to continue using the app as your account will now be grandfathered.

Overview

Mapply is extremely flexible, and allows you to customize its look and feel to suit your store's branding. Through its Display Settings, you're able to adjust the map language, measurement units, and even add in custom CSS, HTML, and Javascript.

Making styling changes within Mapply requires knowledge of CSS, HTML, and Javascript. If you are not comfortable with completing this on your store, please contact our Merchant Success team.

Customize the Map Display

Visit the Mapply Account Page and log in.
Select Display Settings.
Enter your custom CSS.
Select Save.

Customize the Map Language

Visit the Mapply Account Page and log in.
Select Display Settings.
Adjust the display settings as you see fit.
Select Save.

Change the Search Radius

Visit the Mapply Account Page and log in.
Select Display Settings.

Copy and paste this code into the Page Footer HTML section of the display settings.

Note: This code will display dropdown distances of 1, 2, 5, 10, and 25 miles with an option for no limit. The 1-mile option is the default.

<script>
jQuery(function() {
 setTimeout(function() {
 jQuery(".search_within_distance select")[0].length=0;
 jQuery(".search_within_distance select").html('<option value="1" selected="selected">1 Mi</option><option value="2">2 Mi</option><option value="5">5 Mi</option><option value="10" >10 Mi</option><option value="25">25 Mi</option><option value="9999">No Limit</option>');
 }, 200);
});
</script>

Page Footer HTML

Select Save.

Change the Map Placement

Visit the Mapply Account Page and log in.
Select Preview & Install.
Copy the custom Javascript code.
Paste the code into the HTML on your website (wherever you would like it to appear).
Select Save.

Make the Email Address Selectable

Visit the Mapply Account Page and log in.
Select Display Settings.

Copy and paste this code into the Page Header HTML section of the display settings:

<script>
 jQuery(document).ready(function(){
 var old_focus_and_popup = focus_and_popup;

 focus_and_popup = function (id){
 return_val = old_focus_and_popup (id);
setTimeout(function (){

 jQuery(".gm_popup .email").click(function(){
 var text = jQuery(this).text();
 document.location = "mailto:" + text.trim();
 });

 jQuery(".gm_popup .email").css('text-decoration','underline').css('color','#2aa8e0');
}, 200);
 return return_val ;
 }
});

</script>

Page Header HTML

Select Save.

Determine the Center of the Map (by customer location)

Visit the Mapply Account Page and log in.
Select Display Settings.

Copy and paste this code into the Page Footer HTML section of the display settings:

<script>
jQuery(document).ready(function(){
var infoWindow = new google.maps.InfoWindow({map: map});
 navigator.geolocation.getCurrentPosition(function(position) {
 var pos = {
 lat: position.coords.latitude,
 lng: position.coords.longitude
 };

 infoWindow.setPosition(pos);
 infoWindow.setContent('Location found.');
 map.setCenter(pos);
 jQuery('.search_bar button').click();
 }, function() {
 handleLocationError(true, infoWindow, map.getCenter());
 });

 function handleLocationError(browserHasGeolocation, infoWindow, pos) {
 infoWindow.setPosition(pos);
 infoWindow.setContent(browserHasGeolocation ?
 'Error: The Geolocation service failed.' :
 'Error: Your browser doesn\'t support geolocation.');
 }
});
</script>

Page Footer HTML

Select Save.