/** * 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);