Skip to content

Instantly share code, notes, and snippets.

@0xcrypto
Created August 1, 2017 12:01
Show Gist options
  • Save 0xcrypto/4f30d0bc28cd5ced3a27d92709c7a9ff to your computer and use it in GitHub Desktop.
Save 0xcrypto/4f30d0bc28cd5ced3a27d92709c7a9ff to your computer and use it in GitHub Desktop.
Map implementation on OSCoI's official Website.
// 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();
}
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment