When a dot on the map is clicked, the information box overlaid on the map gets populated with that office’s contact information, as well as a button to open a contact form that will get sent to the admins of that particular office. As an alternative view to the map, there is also a toggle on the map info box to display the global offices in an alphabetical list.
This enhanced functionality makes it possible for a potential client to reach out to any office within the global company with potential new work, making it a great lead generation tool as well as a handy visual aid.
To accomplish this design feature, we needed a way to:
- display the office data in an interactive map
- store the data for each office shown on the map
Displaying the Office Map
I looked into using the Google Maps API, but found it to be cost-prohibitive for such a large site that would be making API calls with every page load on the site (since this is a global footer element). I also found that Google Maps did not allow for us to use the custom artwork we wanted to generate the maps tiles, and having the map be “branded” was a priority for this design module.
Storing the Office Data
jVector Map utilizes JSON data to display map markers, so I decided just to store the data for the Resolution Media offices in a flat JSON file in the theme directory. In each node of the JSON file, there are the following data points:
- “Display” – the name that should be used for display purposes on the office list and hover state on the map dots.
- “Latitude/Longitude” – the actual global coordinates of the office, used by jVector Map to plot each office dot/pin on the interactive map.
- “Region” – used as a taxonomy to group global offices together by their location.
- “Address” – the physical address of the office, shown in the contact info box on the map.
- “Person” – the name of the employee that is listed as the Contact person in the info box on the map.
- “Email” – the email(s) of the employee(s) that is listed as the Contact person in the info box on the map. This email(s) is also used as the “recipient” of the contact form when it is used.
- “Press” – the name, title and contact information of the press contact associated with each office.