Map implementation on OSCoI's official Website.

map.js

// Usage: <li class="locate" address="some address">Some Chapter title</li>

"use strict"


// global map object. Note that map is not real Map object (google maps api)
// this is a wrapper to keep objects organized.
var map = {
	objectMap: {},
	infoWindow: {},
	API_KEY: 'AIzaSyBDYgJ89m5s1VqrnD2EoQoL3K7OlSIiHko',
	settings: {
		'zoom': 4,
		'center': {lat: 22, lng: 80}
	},
};


// array of chapters
var chapters = [];

// method to find needed chapter from the array
chapters.lookFor = function(domKey) {
	for(var i = 0; i < chapters.length; i++) {
		if(domKey == chapters[i].DOM || domKey == chapters[i].jQuery)
			return chapters[i];
	} return false;
}

function Chapter($chapter) {
	// $chapter should be a jQuery Object.
	if( !($chapter instanceof jQuery) ) $chapter = jQuery($chapter);

	// some non asynced properties
	this.name = $chapter.text();
	this.given_address = $chapter.attr('address');
	this.DOM = $chapter[0];
	this.jQuery = $(this);
	this.content = '<h1>' + this.name + '</h1>' +	'<p>' + this.give_address + '</p>';

	// methods are dependent on asynced properties
	// so we will call them later
	this.locate = function () {
		this.callMethod('locate', '');
	}

	this.onClicking = function () {
		this.callMethod('onClicking', '');
	};

	// all methods will be waiting in functionStack until
	// ajax requests complete.
	this.functionStack = {};
	this.callMethod = function(functionname, args) {
		this.functionStack[functionname] = args;
	}

	// async processes 
	jQuery.when( jQuery.ajax( {
		url: 'https://maps.googleapis.com/maps/api/geocode/json?address='+ this.given_address + '&key=' + map.API_KEY,
		type: 'get',
		// async: false,			// setting async to false can be used to sync the process (depreciated)
		parentObject: this,
		success: function(data) {
			// set fetched json data to the properties of object.
			this.parentObject.coordinates = data.results[0].geometry.location;
			this.parentObject.address = data.results[0].formatted_address;
			this.parentObject.marker = new google.maps.Marker({
				position: this.parentObject.coordinates,
				map: map.objectMap
			});
			// content object for infoWindow (note that we have only one infoWindow object)
			this.parentObject.content = '<h1>' + this.parentObject.name + '</h1>' +	'<p>' + this.parentObject.address + '</p>';
		}
	}) )
	.done( function() {
		// This another block is unnecessary and can be implemented in the above success method
		// but used to keep things tidy.

		var $this = this;			// this will be undefined inside function blocks


		// methods dependent on async data can be defined now

		this.parentObject.locate = function() {
			// method to move the view to a specific location
			map.objectMap.setCenter($this.parentObject.coordinates);
			map.objectMap.setZoom(14);
			map.infoWindow.open(map.objectMap, $this.parentObject.marker);
		}

		this.parentObject.onClicking = function(clicked) {
			// method for click events and setting infoWindow's content
			map.infoWindow.setContent($this.parentObject.content);

			if( clicked )				// if the method was called after click event (outside of map)
				$this.parentObject.locate();

			google.maps.event.addListener($this.parentObject.marker, 'click', function() {
					// if the method was called after click event on markers
					map.infoWindow.setContent($this.parentObject.content);
					$this.parentObject.locate();
			});
		};

		// all async is done so we can run functions stored in functionStack.
		for(var name in this.parentObject.functionStack) {
				var fn = this.parentObject[name];
				if(typeof fn === 'function') fn(this.parentObject.functionStack[name]);
			}
	} );
}


// 
function initMap() {
	map.objectMap = new google.maps.Map( jQuery('#map')[0], map.settings );
	map.infoWindow = new google.maps.InfoWindow();

	jQuery('.locate').click(function() {
		// onclick listener for outside events from map
		chapters.lookFor( this ).onClicking(true);	
	}).each(function() {
	// creating chapter objects using jQuery object of html elements with .locate
		chapters.push( new Chapter( jQuery(this) ) );
		if(chapters.lookFor(this)) {
			chapters.lookFor(this).onClicking();
		}
	});
}