383 lines
11 KiB
JavaScript
383 lines
11 KiB
JavaScript
/**
|
|
* Gmap wrapper.
|
|
*
|
|
* @author Htmlstream
|
|
* @version 1.0
|
|
* @requires
|
|
*
|
|
*/
|
|
;(function ($) {
|
|
'use strict';
|
|
|
|
$.HSCore.components.HSGMap = {
|
|
/**
|
|
*
|
|
*
|
|
* @var Object _baseConfig
|
|
*/
|
|
_baseConfig: {
|
|
zoom: 14,
|
|
scrollwheel: false
|
|
},
|
|
|
|
/**
|
|
*
|
|
*
|
|
* @var jQuery pageCollection
|
|
*/
|
|
pageCollection: $(),
|
|
|
|
/**
|
|
* Initialization of Gmap wrapper.
|
|
*
|
|
* @param String selector (optional)
|
|
* @param Object config (optional)
|
|
*
|
|
* @return jQuery pageCollection - collection of initialized items.
|
|
*/
|
|
|
|
init: function (selector, config) {
|
|
|
|
this.collection = selector && $(selector).length ? $(selector) : $();
|
|
if (!$(selector).length) return;
|
|
|
|
this.config = config && $.isPlainObject(config) ?
|
|
$.extend({}, this._baseConfig, config) : this._baseConfig;
|
|
|
|
this.config.itemSelector = selector;
|
|
|
|
this.initGMap();
|
|
|
|
return this.pageCollection;
|
|
|
|
},
|
|
|
|
initGMap: function () {
|
|
//Variables
|
|
var $self = this,
|
|
config = $self.config,
|
|
collection = $self.pageCollection;
|
|
|
|
//Actions
|
|
this.collection.each(function (i, el) {
|
|
//Variables
|
|
var $this = $(el),
|
|
ID = $this.attr('id'),
|
|
gMapType = $this.data('type'),
|
|
gMapLat = $this.data('lat'),
|
|
gMapLng = $this.data('lng'),
|
|
gMapZoom = $this.data('zoom'),
|
|
gMapTitle = $this.data('title'),
|
|
|
|
gMapStyles = JSON.parse(el.getAttribute('data-styles')),
|
|
gMapStylesArray = [],
|
|
|
|
polygon,
|
|
gMapPolygon = Boolean($this.data('polygon')),
|
|
gMapPolygonCords = JSON.parse(el.getAttribute('data-polygon-cords')),
|
|
gMapPolygonStyles = JSON.parse(el.getAttribute('data-polygon-styles')),
|
|
|
|
polylines,
|
|
gMapPolylines = Boolean($this.data('polylines')),
|
|
gMapPolylinesCords = JSON.parse(el.getAttribute('data-polylines-cords')),
|
|
gMapPolylinesStyles = JSON.parse(el.getAttribute('data-polylines-styles')),
|
|
|
|
gMapRoutes = Boolean($this.data('routes')),
|
|
gMapRoutesCords = JSON.parse(el.getAttribute('data-routes-cords')),
|
|
gMapRoutesStyles = JSON.parse(el.getAttribute('data-routes-styles')),
|
|
|
|
gMapGeolocation = Boolean($this.data('geolocation')),
|
|
|
|
gMapGeocoding = Boolean($this.data('geocoding')),
|
|
gMapCordsTarget = $this.data('cords-target'),
|
|
|
|
gMapPin = Boolean($this.data('pin')),
|
|
gMapPinIcon = $this.data('pin-icon'),
|
|
|
|
gMapMultipleMarkers = Boolean($this.data('multiple-markers')),
|
|
gMapMarkersLocations = JSON.parse(el.getAttribute('data-markers-locations')),
|
|
|
|
$gMap;
|
|
|
|
//Map Type
|
|
if (gMapType == 'satellite') {
|
|
$gMap = new google.maps.Map(document.getElementById(ID), {
|
|
zoom: gMapZoom ? gMapZoom : config['zoom'],
|
|
scrollwheel: config['scrollwheel']
|
|
});
|
|
|
|
$gMap.setCenter({
|
|
lat: gMapLat,
|
|
lng: gMapLng
|
|
});
|
|
|
|
$gMap.setMapTypeId(google.maps.MapTypeId.SATELLITE);
|
|
} else if (gMapType == 'terrain') {
|
|
$gMap = new google.maps.Map(document.getElementById(ID), {
|
|
zoom: gMapZoom ? gMapZoom : config['zoom'],
|
|
scrollwheel: config['scrollwheel']
|
|
});
|
|
|
|
$gMap.setCenter({
|
|
lat: gMapLat,
|
|
lng: gMapLng
|
|
});
|
|
|
|
$gMap.setMapTypeId(google.maps.MapTypeId.TERRAIN);
|
|
} else if (gMapType == 'street-view') {
|
|
$gMap = new google.maps.StreetViewPanorama(document.getElementById(ID), {
|
|
zoom: gMapZoom ? gMapZoom : config['zoom'],
|
|
scrollwheel: config['scrollwheel']
|
|
});
|
|
|
|
$gMap.setPosition({
|
|
lat: gMapLat,
|
|
lng: gMapLng
|
|
});
|
|
} else if (gMapType == 'static') {
|
|
$(document).ready(function () {
|
|
$gMap = GMaps.staticMapURL({
|
|
size: [2048, 2048],
|
|
lat: gMapLat,
|
|
lng: gMapLng,
|
|
zoom: gMapZoom ? gMapZoom : config['zoom']
|
|
});
|
|
|
|
$('#' + ID).css('background-image', 'url(' + $gMap + ')');
|
|
});
|
|
} else if (gMapType == 'custom') {
|
|
var arrL = gMapStyles.length;
|
|
|
|
for (var i = 0; i < arrL; i++) {
|
|
var featureType = gMapStyles[i][0],
|
|
elementType = gMapStyles[i][1],
|
|
stylers = gMapStyles[i][2],
|
|
obj = $.extend({}, gMapStylesArray[i]);
|
|
|
|
if (featureType != "") {
|
|
obj.featureType = featureType;
|
|
}
|
|
|
|
if (elementType != "") {
|
|
obj.elementType = elementType;
|
|
}
|
|
|
|
obj.stylers = stylers;
|
|
|
|
gMapStylesArray.push(obj);
|
|
}
|
|
|
|
$gMap = new GMaps({
|
|
div: '#' + ID,
|
|
lat: gMapLat,
|
|
lng: gMapLng,
|
|
zoom: gMapZoom ? gMapZoom : config['zoom'],
|
|
scrollwheel: config['scrollwheel'],
|
|
styles: gMapStylesArray
|
|
});
|
|
|
|
//Pin
|
|
if (gMapPin) {
|
|
$gMap.addMarker({
|
|
lat: gMapLat,
|
|
lng: gMapLng,
|
|
title: gMapTitle,
|
|
icon: gMapPinIcon
|
|
});
|
|
}
|
|
//End Pin
|
|
} else {
|
|
$gMap = new GMaps({
|
|
div: '#' + ID,
|
|
lat: gMapLat,
|
|
lng: gMapLng,
|
|
zoom: gMapZoom ? gMapZoom : config['zoom'],
|
|
scrollwheel: config['scrollwheel']
|
|
});
|
|
|
|
//Pin
|
|
if (gMapPin) {
|
|
$gMap.addMarker({
|
|
lat: gMapLat,
|
|
lng: gMapLng,
|
|
title: gMapTitle,
|
|
icon: gMapPinIcon
|
|
});
|
|
}
|
|
//End Pin
|
|
}
|
|
//End Map Type
|
|
|
|
//Pin
|
|
if (gMapPin && gMapType == 'satellite' || gMapType == 'terrain' || gMapType == 'street-view') {
|
|
//Variables
|
|
var $pin = new google.maps.Marker({
|
|
position: {
|
|
lat: gMapLat,
|
|
lng: gMapLng
|
|
},
|
|
map: $gMap
|
|
});
|
|
|
|
if (gMapPinIcon) {
|
|
var $pinIcon = new google.maps.MarkerImage(gMapPinIcon);
|
|
$pin.setIcon($pinIcon);
|
|
}
|
|
|
|
if (gMapTitle) {
|
|
$pin.setOptions({
|
|
title: gMapTitle
|
|
});
|
|
}
|
|
}
|
|
//End Pin
|
|
|
|
//Multiple markers
|
|
if (gMapMultipleMarkers == true) {
|
|
var infowindow = new google.maps.InfoWindow(),
|
|
marker,
|
|
i2;
|
|
|
|
for (i2 = 0; i2 < gMapMarkersLocations.length; i2++) {
|
|
marker = new google.maps.Marker({
|
|
position: new google.maps.LatLng(gMapMarkersLocations[i2][1], gMapMarkersLocations[i2][2]),
|
|
map: $gMap
|
|
});
|
|
|
|
google.maps.event.addListener(marker, 'click', (function (marker, i2) {
|
|
return function () {
|
|
infowindow.setContent(gMapMarkersLocations[i2][0]);
|
|
infowindow.open($gMap, marker);
|
|
}
|
|
})(marker, i2));
|
|
}
|
|
}
|
|
//End Multiple markers
|
|
|
|
//Auto Center markers on window resize
|
|
if (!gMapGeolocation) {
|
|
google.maps.event.addDomListener(window, 'resize', function () {
|
|
setTimeout(function () {
|
|
$gMap.setCenter({
|
|
lat: gMapLat,
|
|
lng: gMapLng
|
|
});
|
|
}, 100);
|
|
});
|
|
}
|
|
|
|
//Polygon
|
|
if (gMapPolygon) {
|
|
$(document).ready(function () {
|
|
polygon = $gMap.drawPolygon({
|
|
paths: gMapPolygonCords,
|
|
strokeColor: gMapPolygonStyles.strokeColor,
|
|
strokeOpacity: gMapPolygonStyles.strokeOpacity,
|
|
strokeWeight: gMapPolygonStyles.strokeWeight,
|
|
fillColor: gMapPolygonStyles.fillColor,
|
|
fillOpacity: gMapPolygonStyles.fillOpacity
|
|
});
|
|
});
|
|
}
|
|
//End Polygon
|
|
|
|
//Polylines
|
|
if (gMapPolylines) {
|
|
$(document).ready(function () {
|
|
$gMap.drawPolyline({
|
|
path: gMapPolylinesCords,
|
|
strokeColor: gMapPolylinesStyles.strokeColor,
|
|
strokeOpacity: gMapPolylinesStyles.strokeOpacity,
|
|
strokeWeight: gMapPolylinesStyles.strokeWeight
|
|
});
|
|
});
|
|
}
|
|
//End Polylines
|
|
|
|
//Routes
|
|
if (gMapRoutes) {
|
|
$(document).ready(function () {
|
|
$gMap.drawRoute({
|
|
origin: gMapRoutesCords[0],
|
|
destination: gMapRoutesCords[1],
|
|
travelMode: gMapRoutesStyles.travelMode,
|
|
strokeColor: gMapRoutesStyles.strokeColor,
|
|
strokeOpacity: gMapRoutesStyles.strokeOpacity,
|
|
strokeWeight: gMapRoutesStyles.strokeWeight
|
|
});
|
|
});
|
|
}
|
|
//End Routes
|
|
|
|
//Geolocation
|
|
if (gMapGeolocation) {
|
|
GMaps.geolocate({
|
|
success: function (position) {
|
|
$gMap.setCenter({
|
|
lat: position.coords.latitude,
|
|
lng: position.coords.longitude
|
|
});
|
|
|
|
$gMap.addMarker({
|
|
lat: position.coords.latitude,
|
|
lng: position.coords.longitude,
|
|
title: gMapTitle,
|
|
icon: gMapPinIcon
|
|
});
|
|
|
|
google.maps.event.addDomListener(window, 'resize', function () {
|
|
setTimeout(function () {
|
|
$gMap.setCenter({
|
|
lat: position.coords.latitude,
|
|
lng: position.coords.longitude
|
|
});
|
|
}, 100);
|
|
});
|
|
},
|
|
error: function (error) {
|
|
alert('Geolocation failed: ' + error.message);
|
|
},
|
|
not_supported: function () {
|
|
alert('Your browser does not support geolocation');
|
|
}
|
|
});
|
|
}
|
|
//End Geolocation
|
|
|
|
//Geocoding
|
|
if (gMapGeocoding) {
|
|
$(document).ready(function () {
|
|
var targetCordsParent = $(gMapCordsTarget).closest('form');
|
|
|
|
$(targetCordsParent).submit(function (e) {
|
|
e.preventDefault();
|
|
|
|
GMaps.geocode({
|
|
address: $(gMapCordsTarget).val().trim(),
|
|
callback: function (results, status) {
|
|
if (status == 'OK') {
|
|
var latlng = results[0].geometry.location;
|
|
|
|
$gMap.setCenter(latlng.lat(), latlng.lng());
|
|
$gMap.addMarker({
|
|
lat: latlng.lat(),
|
|
lng: latlng.lng()
|
|
});
|
|
|
|
gMapLat = latlng.lat();
|
|
gMapLng = latlng.lng();
|
|
}
|
|
}
|
|
});
|
|
});
|
|
});
|
|
}
|
|
//End Geocoding
|
|
|
|
//Actions
|
|
collection = collection.add($this);
|
|
});
|
|
}
|
|
}
|
|
})(jQuery);
|