How to build a Google Maps overlay using the API and PHP.

Project Summary:

The goal of this project was to design and build an interactive Google Maps overlay directory and search functionality that displays store information on a searchable map. The biggest challenge was how we were going to implement the dynamic display of store information when filtered with search criteria. For anyone looking to emulate this, note that Google has made available map labeling info and useful code snippets here: https://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/maplabel/src/maplabel.js?r=300 and here https://github.com/googlemaps/js-map-label Again the main challenge on this project was working with the Google Map API (managing coordinates specifically), map Labels & polygons. Consider checking out the reference site here if you are looking to build your own version: http://stackoverflow.com/questions/12714031/google-maps-javascript-api-v3-map-label-and-polygons.

In our case, the client also wanted the ability to dynamically edit (via WordPress) the store information within each store mouse over on the map itself and link them back to a post within their WordPress site. This allowed the user to learn more information about each store and provided the client a means of driving user traffic to other parts of their website.

Tools Used:

HTML5, CSS3, JQuery, AJAX, Google Map API, AngularJS v1.4.5, PHP, WordPress

Demo Link:

http://venetian.mckillen.net/directory-map/#.W-nCbJNKiUk