Google – Nonprofits – Google Maps Integration – Success Story

Client Overview

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.

Business Challenge

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.

Technical Requirements

  • 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

Solution Strategy

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.

Development Methodology

  • 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

Share This Case Study