var GoogleMapsEngine = function(mapElement){ var $this = this; $this.NAME = 'GoogleMapsEngine'; $this.events = { INIT_COMPLETE: 'initComplete', MAP_CLICK: 'mapClick' } $this.mapObject = null; $this.config = { startLat: 0, startLng: 0, startZoom: 11, startAtUserLocation: false, autoInit: true, setGrey: false, waitTime: 10000, scrollwheel: true, draggable: true, disableDoubleClickZoom: true, clickable: false, minZoom: 2, maxZoom: 20, mapTypeControl: false, panControl: true, zoomControl: true, scaleControl: false, streetViewControl: false } $this.geoTimeout = null; $this.markerIcon = { url: 'view/img/marker.png', size: new google.maps.Size(89, 51), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(17, 39) }; $this.infoWindow = null; $this.markers = {}; if( typeof mapElement == 'object' ){ $this.mapObject = mapElement.get(0); }else if( typeof mapElement == 'string' ){ $this.mapObject = $(mapElement).get(0); }else{ throw $this.NAME + ': not a proper mapElement'; } // TODO: add basic DOM Element type if( $this.mapObject == 'undefined' || $this.mapObject == null || $this.mapObject.length == 0 ){ throw $this.NAME + ": can't find DOM element"; } if( typeof arguments[1] == 'object' ){ var prop; for( prop in arguments[1] ){ if( $this.config.hasOwnProperty(prop) ){ $this.config[prop] = arguments[1][prop]; } } } //TODO: add custom marker look setup in config options $this.preInitMap = function(){ if( $this.config.startAtUserLocation ){ $this.getLocation(); }else{ $this.initMap(); } } $this.initMap = function(){ $this.mapOptions.center = new google.maps.LatLng( $this.config.startLat, $this.config.startLng ); $this.maps = new google.maps.Map($this.mapObject, $this.mapOptions); $this.mapsLimitResolution(); if( $this.config.setGrey ){ $this.mapsSetInGrayscale(); } if( $this.config.clickable ){ google.maps.event.addListener($this.maps, 'click', function(evt){ $this.geocoder.geocode({'latLng': evt.latLng}, $this.processRevGeocode); }); } $( $this ).trigger( $this.events.INIT_COMPLETE ); } $this.mapsLimitResolution = function() { $this.maps.setOptions({minZoom: $this.config.minZoom}); $this.maps.setOptions({maxZoom: $this.config.maxZoom}); } $this.mapsResizeAndCenter = function() { var center = $this.maps.getCenter(); google.maps.event.trigger($this.maps, 'resize'); $this.maps.setCenter(center); } $this.mapsSetInGrayscale = function() { var mapType = null; var mapStyles = [ { featureType: 'all', elementType: 'all', stylers: [ {gamma: 0.7}, {lightness: 0}, {saturation: -100} ] } ]; mapType = new google.maps.StyledMapType(mapStyles, {name: 'Grayscale'}); $this.maps.mapTypes.set('roadgray', mapType); $this.maps.setMapTypeId('roadgray'); } $this.addMarker = function(name, lat, lng, draggable, title, infoContent, clickFunction) { var markersLength = $this.objectSize( $this.markers ); var position = new google.maps.LatLng(lat, lng); var marker = new google.maps.Marker({ position: position, map: $this.maps, draggable: draggable, icon: $this.markerIcon, title: title, zIndex: markersLength + 1 }); if( typeof infoContent != 'undefined' && infoContent != '' ){ if( $this.infoWindow == null ){ $this.infoWindow = new google.maps.InfoWindow({content: ''}); } marker.infoContent = infoContent; google.maps.event.addListener(marker, 'click', function() { $this.infoWindow.content = this.infoContent; $this.infoWindow.open($this.maps, marker); }); }else if( typeof clickFunction != 'undefined' ){ google.maps.event.addListener(marker, 'click', clickFunction); } if( name == '' || name == 'auto' ){ name = 'marker' + markersLength; } $this.markers[name] = marker; return name; } $this.removeMarker = function(name){ if( typeof $this.markers[key] != 'undefined' ){ $this.markers[key].setMap(null); delete $this.markers[key]; } } $this.mapsClearOverlay = function() { var key; for (key in $this.markers) { $this.markers[key].setMap(null); } $this.markers = {}; } $this.getLocation = function(){ if (navigator.geolocation){ navigator.geolocation.getCurrentPosition($this.showPosition, $this.unknownUserPosition ); }else{ $this.unknownUserPosition(); } $this.geoTimeout = setTimeout($this.unknownUserPosition, $this.config.waitTime); } $this.showPosition = function(position){ if( $this.geoTimeout ){ clearTimeout( $this.geoTimeout ); } $this.config.startLat = position.coords.latitude; $this.config.startLng = position.coords.longitude; $this.initMap(); } $this.unknownUserPosition = function(errorCode){ if( $this.geoTimeout ){ clearTimeout( $this.geoTimeout ); } $this.initMap(); } $this.processRevGeocode = function(results, status) { if( status == google.maps.GeocoderStatus.OK ){ var result; if( results.length > 1 ){ result = results[1]; }else{ result = results[0]; } if( result.geometry.viewport ){ $this.maps.fitBounds(result.geometry.viewport); }else if( result.geometry.bounds ){ $this.maps.fitBounds(result.geometry.bounds); }else{ $this.maps.setCenter(result.geometry.location); } $this.maps.setZoom(11); $( $this ).trigger( $this.events.MAP_CLICK, results ); //TODO: Obrobic dane przed wyslanie zbey bylo latwiej }else{ trace('Geocoder failed due to: ' + status); } } $this.center = function(lat, lng){ var pos = new google.maps.LatLng(lat, lng); $this.maps.setCenter( pos ); } $this.objectSize = function(obj){ var size = 0, key; for( key in obj ){ if( obj.hasOwnProperty(key) ){ size++; } } return size; } $this.mapOptions = { zoom: $this.config.startZoom, center: new google.maps.LatLng( $this.config.startLat, $this.config.startLng ), //mapTypeId : google.maps.MapTypeId.ROADMAP, mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'roadgray'], mapTypeControl: $this.config.mapTypeControl, mapTypeControlOptions: {position: google.maps.ControlPosition.RIGHT_BOTTOM}, panControl: $this.config.panControl, panControlOptions: {position: google.maps.ControlPosition.LEFT_TOP}, zoomControl: $this.config.zoomControl, zoomControlOptions: {position: google.maps.ControlPosition.LEFT_TOP}, scaleControl: $this.config.scaleControl, scaleControlOptions: {position: google.maps.ControlPosition.LEFT_BOTTOM}, streetViewControl: $this.config.streetViewControl, streetViewControlOptions: {position: google.maps.ControlPosition.RIGHT_CENTER}, scrollwheel: $this.config.scrollwheel, draggable: $this.config.draggable, disableDoubleClickZoom: $this.config.disableDoubleClickZoom }; $this.geocoder = new google.maps.Geocoder(); if( $this.config.autoInit ){ if( $this.config.startAtUserLocation ){ $this.getLocation(); }else{ $this.initMap(); } } return { events: $this.events, init: $this.preInitMap, addMarker: $this.addMarker, center: $this.center, map: $this, resize: $this.mapsResizeAndCenter } };