The client is a non-profit environmental organization of the USA working to protect and preserve oceans, waves, and beaches. The client is focused on the issues such as water quality, beach access, beach and surf spot preservation, and sustaining marine and coastal ecosystems.
The client needed to integrate Google Maps with their new website design to publish comprehended information of their campaigns and victories easily.
The objectives of the project were as following:
Integration of Google Maps with Expression Engine to enable the users to:
Rapidly recognize and search for client’s campaigns
Display region specific programs and campaigns on Google Maps
Develop a comprehensive Search functionality and integrate it with Google Maps to find Program and Campaign locations and display it on Google Maps.
Expression Engine v2.8.1
MySQL 5
Google Maps API
Google Calendar API
Google Geocoder Service
Google Marker Cluster Library
JQuery 1.10
JavaScript
CSS 3.0
HTML 5
JSON
XML
REST API
Eternus Solutions team worked with the client’s Subject Matter Experts (SME) and implemented the solution leveraging Google technologies and Expression Engine content management system. This involved the following:
Google Maps API V.3 was used to integrate Google Maps with Expression Engine and configured Google Map Markers, using XML Parsing.
Google Geocoder API was utilized to integrate the Search functionality with Google Maps to show Program and Campaign locations with the marker and information popups as per the specified Geocodes.
To avoid language limitation in fetching results from a Google Search or Google Calendar, REST protocol and JSON lightweight data interchange formats were used.
To search Chapters, Campaigns and other things, collapsible search on Google Maps was developed. There were three types of search:
Quick search – It would display the list of all Chapters/ Campaigns/ Victories.
Primary search – It would provide keyword based search functionality to fetch specific result for the entered keyword in the search box.
Secondary search – It would fetch the results using Google custom search engine and display it as per Google style.
3-Step development methodology that consisted of application development on the local machine, testing in the Remote Sandbox and moving to the Production
Utilized Marker Cluster Library of Google Services to make the map uncluttered
Configured Google Maps Marker for each Chapter to provide quick access
Customized the Expression Engine for Chapters, Programs and Campaigns
Cascade the Search facility with Google Maps to display the search result on it
Use of XML parsing to fetch the results from the Chapter channel
Use of Google Map API V.3 to integrate Google Maps with an Expression Engine
Use of Geocoder API to popup information, Program and Campaign locations on the Google Maps
Use of REST protocol and JSON lightweight data interchange format to avoid language limitations in fetching results from a Google Search or Google Calendar
Development using best practices and industry standards
