Dynamic Map using Salesforce, Google Maps and WordPress
Ropes Courses has over 300 product installations all over the world. The previous map on the web site displayed each location, but was manually maintained. New locations also were manually added to the map, requiring time to maintain and test each time. They wanted a way for the map to update automatically. All of their locations were already entered into their cloud-based customer relationship management (CRM) software, Salesforce. On top of that, they wanted the map to display the visitor's location so all markers were centered locally.
When the map is requested by the web site visitor, we gather location information from the device. If it is a mobile phone, we ask for permission and have a fallback that gets us pretty close. We need that location information to pass to Salesforce when we request the live dataset.
The Ropes Courses engineers created an API using Salesforce to organize the data and provide all the elements we need for the public display. We tapped into it using OAuth2 and pull custom data each time a visitor hits the page. The dataset includes every installations around the world, including the customer name, GPS coordinates and product IDs for each installation. We pass the GEO location information to the Salesforce request and the API sorts the records based on proximity to the visitor's current location. There is a lot going on in about 250 milliseconds.
Connect to WordPress
After pulling down the live dataset from Salesforce, we map the Salesforce product IDs to the WordPress product IDs. This way when the map renders, we can link each location back to the actual product information page on the website. This provides detailed information for the visitor and helps the sales team as well.
After all the data is gathered, sorted and processed, we render all markers on a Google Maps canvas and center the map based on the web site visitor's location. Then, below the map, we list the locations closest to the visitor for easily-located installations near them in descending order by distance; distance is displayed in miles or kilometers depending on the location of the web site visitor. Infowindows are created for each location that includes the customer name, location and a list of products at that location. Finally, the map marker visually indicates the number of products installed at that location.