Customize the Mapply Display

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.

 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.

 


 

  1. Visit the Mapply Account Page and log in.

    Mapply Login

  2. Select Display Settings.

    Mapply Display Settings

  3. Enter your custom CSS.

    HTML Fields

  4. Select Save.

    Save

  1. Visit the Mapply Account Page and log in.

    Mapply Log In

  2. Select Display Settings.

    Mapply Display Settings

  3. Adjust the display settings as you see fit.

    Adjust Display Settings

  4. Select Save.

    Save

  1. Visit the Mapply Account Page and log in.

    Mapply Login

  2. Select Display Settings.

    Display Settings

  3. 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

  4. Select Save.

    Save

Change the Map Placement

  1. Visit the Mapply Account Page and log in.

    Mapply Login

  2. Select Preview & Install.

    Preview and Install

  3. Copy the custom Javascript code.

    Mapply Javascript Code

  4. Paste the code into the HTML on your website (wherever you would like it to appear).

    Mapply Code 1

  5. Select Save.

    Mapply Code 2

  1. Visit the Mapply Account Page and log in.

    Mapply Login

  2. Select Display Settings.

    Display Settings

  3. 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

  4. Select Save.

    Save

  1. Visit the Mapply Account Page and log in.

    Mapply Login

  2. Select Display Settings.

    Display Settings

  3. 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

  4. Select Save.

    Save

Was this article helpful?
1 out of 1 found this helpful