Determine the Center of the Map by Customer Location

Created by Brett Mikulik, Modified on Mon, 07 Nov 2022 at 04:05 PM by Brett Mikulik

Overview

By default, Store Locator will show a general map of your region on page load. You can customize the view of your map to show your customer's current location.

If your customer has location services enabled in their browser, it will show their current location in the center of the map. The map would also include any nearby stores in their area.

To determine the center of the map by customer location, please follow the steps below.


Setup

  1. From within the Store Locator app, select Settings.

    select settings

  2. Select Display Settings.

    select display settings

  3. Copy and paste this code into the Page Footer HTML field:
    <script>
    jQuery(document).ready(function(){
    var map = boldMap
    if (typeof map === 'undefined') {
    return
    }
    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>

  4. Select Save.

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article