var _rootGoogleMaps; Map = {}; Map.GoogleMaps = function(el) { if (typeof _rootGoogleMaps === "undefined") { if (!el) { console.error("you must give a dom element in order to create the map."); } else { this.initialize(el); } } return _rootGoogleMaps; }; Map.GoogleMaps.prototype.initialize = function(el) { this.el = el; this.$el = $(el); this.defaultzoom = 17; this.options = {}; this.geolocalizables = new Backbone.Collection(); this.geolocalizables.on("add", this.refreshToolbarEnterprisesAround, this); this.itinerarySteps = new Backbone.Collection(); this.itinerarySteps.on("add", this.refreshToolbarItinerary, this); }; Map.GoogleMaps.prototype.render = function() { var referencePoint; if (!this.referenceGeolocalizable) { if (this.geolocalizables.length > 0) { this.referenceGeolocalizable = this.geolocalizables.at(0); } } this.referenceGeolocalizable.isReference = true; referencePoint = new google.maps.LatLng(parseFloat(this.referenceGeolocalizable.latitude), parseFloat(this.referenceGeolocalizable.longitude)); this.referenceGeolocalizable.point = referencePoint; var mapOptions = { disableDefaultUI: false, navigationControl: false, mapTypeControl: true, scaleControl: true, zoom: this.defaultzoom, center: referencePoint, mapTypeId: google.maps.MapTypeId.ROADMAP }; this.GMap = new google.maps.Map(this.el, mapOptions); this.markerCluster = new MarkerClusterer(this.GMap); this.bindEvents(); var referenceMarker = this.createGeoLocalizableMarker(this.referenceGeolocalizable); referenceMarker.address = this.referenceGeolocalizable.gMapFormattedAddress; this.referenceGeolocalizable.marker = referenceMarker; this.geolocalizables.add(this.referenceGeolocalizable); google.maps.event.trigger(this.referenceGeolocalizable.marker, 'click'); this.createControls(); this.createToolbar(); var that = this; $(document).on("actorGeolocalized", function() { if (that.itinerarySteps.length == 0) { that.itinerarySteps.add({marker:{address:""}}); } that.itinerarySteps.add({marker: that.referenceGeolocalizable.marker}); that.refreshToolbarItinerary(); that.refreshToolbarEnterprisesAround();} ); this.createActorMarkers(); }; Map.GoogleMaps.prototype.createToolbar = function() { $("#toolbar").append("
"); if (this.options.itinerary) { $("ul", "#tabs").append('
  • ' + edApplication().labels.ITINERARY + '
  • '); } if (this.options.enterprisesAround) { $("ul", "#tabs").append('
  • ' + edApplication().labels.POI + '
  • '); } if (this.options.legend) { $("ul", "#tabs").append('
  • ' + edApplication().labels.LEGEND + '
  • '); } if ($("ul", "#tabs").html() != "") { if (this.options.itinerary) { $("#tabs").append(this.createItineraryTabContent()); } if (this.options.enterprisesAround) { $("#tabs").append(this.createEnterprisesTabContent()); } if (this.options.legend) { $("#tabs").append(this.createLegendTabContent()); } $("#tabs").tabs({collapsible: true}); } else { $("#optionsControl").remove(); } }; Map.GoogleMaps.prototype.createItineraryTabContent = function() { var div = "
    "; div = div + "
    "; return div; }; Map.GoogleMaps.prototype.createEnterprisesTabContent = function() { var div = "
    "; div = div + "
    "; return div; }; Map.GoogleMaps.prototype.createLegendTabContent = function() { var div = "
    "; div = div + ""; div = div + "
    "; return div; }; Map.GoogleMaps.prototype.computeItinerary = function() { var i=0; var origin; var destination; var waypoints = []; var that = this; this.itinerarySteps.each(function(markerStep) { if (i==0) { origin = $('#startAddress').val(); } else if (i==that.itinerarySteps.length - 1) { destination = $('#endAddress').val(); } else { waypoints.push({location: $('#stepAddress_' + i).val()}); } i++; }); var directionsService = new google.maps.DirectionsService(); var directionsDisplay = new google.maps.DirectionsRenderer(); directionsDisplay.setMap(this.GMap); var mode = google.maps.DirectionsTravelMode.DRIVING; /*switch (document.getElementById("mode").value) { case "bicycling": mode = google.maps.DirectionsTravelMode.BICYCLING; break; case "driving": mode = google.maps.DirectionsTravelMode.DRIVING; break; case "walking": mode = google.maps.DirectionsTravelMode.WALKING; break; }*/ var request = { origin: origin, destination: destination, optimizeWaypoints: true, waypoints: waypoints, travelMode: mode }; if (this.attachedToView) { this.attachedToView.displayNowLoading(); } directionsService.route(request, function(response, status) { if (that.attachedToView) { that.attachedToView.removeNowLoading(); } if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } else { $("#itineraryResult").html("" + edApplication().labels.ITINERARYCOMPUTEFAILED + "
    " + " - " + edApplication().labels.CANBEUNVAILABLE + "
    " + " - " + edApplication().labels.CORRECTORTRYAGAIN); } }); directionsDisplay.setPanel(document.getElementById("itineraryResult")); }; Map.GoogleMaps.prototype.refreshToolbarItinerary = function() { var that = this; var itinerary = $("#itinerary"); if (itinerary.length > 0) { itinerary.html(""); edManager.unRegisterViewByID("startAddress"); edManager.unRegisterViewByID("endAddress"); var startIndex=0; var endIndex=this.itinerarySteps.length - 1; var i=0; this.itinerarySteps.each(function(markerStep) { var line = $("
    "); if (i == startIndex) { //itinerary.append('Départ
    '); line.append(""); line.append(''); line.append(''); } else if (i == endIndex) { //itinerary.append('Destination
    '); line.append(""); line.append(''); line.append(''); } else { edManager.unRegisterViewByID("stepAddress_" + i); //itinerary.append('Etape ' + i); itinerary.append(''); line.append(""); line.append(''); line.append(''); } itinerary.append(line); i++; }); var line = $("
    "); line.append(""); itinerary.append(line); } }; Map.GoogleMaps.prototype.setStartStep = function(aMarker) { $("#tabs").tabs("option", "active", 0 ); var oldMarker = this.itinerarySteps.at(0); this.itinerarySteps.remove(oldMarker); this.itinerarySteps.add({marker: aMarker}, {at:0}); }; Map.GoogleMaps.prototype.addStep = function(aMarker) { $("#tabs").tabs("option", "active", 0 ); this.itinerarySteps.add({marker: aMarker}, {at:this.itinerarySteps.length - 1}); }; Map.GoogleMaps.prototype.removeStep = function(aCid) { $("#tabs").tabs("option", "active", 0 ); var oldMarker = this.itinerarySteps.getByCid(aCid); this.itinerarySteps.remove(oldMarker); }; Map.GoogleMaps.prototype.setEndStep = function(aMarker) { $("#tabs").tabs("option", "active", 0 ); var oldMarker = this.itinerarySteps.at(this.itinerarySteps.length - 1); this.itinerarySteps.remove(oldMarker); this.itinerarySteps.add({marker: aMarker}, {at:this.itinerarySteps.length}); }; Map.GoogleMaps.prototype.refreshToolbarEnterprisesAround = function() { var that = this; var entAround = $("#enterprisesAround"); if (entAround.length > 0) { if (this.actor.addressMarker) { if (!this.actor.addressMarkerCheckbox) { var checkbox = $(''); checkbox.marker = this.actor.addressMarker; this.actor.addressMarkerCheckbox = checkbox; checkbox.on("click", function() { if ($(this).is(':checked')) { that.actor.addressMarker.setMap(that.GMap); } else { that.actor.addressMarker.setMap(null); } }); var line = $("
    "); line.append(''); line.append(''); line.append(''); line.append(""); line.append(checkbox); line.append(""); entAround.append(line); } } if (this.actor.siteAddressMarker) { if (!this.actor.siteAddressMarkerCheckbox) { var checkbox = $(''); this.actor.siteAddressMarkerCheckbox = checkbox; checkbox.on("click", function() { if ($(this).is(':checked')) { that.actor.siteAddressMarker.setMap(that.GMap); } else { that.actor.siteAddressMarker.setMap(null); } }); var line = $("
    "); line.append(''); line.append(''); line.append(''); line.append(""); line.append(checkbox); line.append(""); entAround.append(line); } } if (this.referenceGeolocalizable.marker) { if (!this.referenceGeolocalizable.referenceMarkerCheckbox) { var checkbox = $(''); this.referenceGeolocalizable.referenceMarkerCheckbox = checkbox; checkbox.on("click", function() { if ($(this).is(':checked')) { that.referenceGeolocalizable.marker.setMap(that.GMap); } else { that.referenceGeolocalizable.marker.setMap(null); } }); var line = $("
    "); line.append(''); line.append(''); line.append(''); line.append(""); line.append(checkbox); line.append(""); entAround.append(line); } } this.geolocalizables.each(function(aGeolocalizable) { if (!aGeolocalizable.get("markerCheckbox")) { var checkbox = $(''); aGeolocalizable.set("markerCheckbox", checkbox); checkbox.on("click", function() { if ($(this).is(':checked')) { aGeolocalizable.get("marker").setMap(that.GMap); } else { aGeolocalizable.get("marker").setMap(null); } //google.maps.event.trigger(aGeolocalizable.get("marker"), 'click'); }); var line = $("
    "); line.append(''); line.append(''); line.append(''); line.append(""); line.append(checkbox); line.append(""); entAround.append(line); } }); } }; Map.GoogleMaps.prototype.centerOnMarker = function(aMarker) { this.GMap.panTo(aMarker.getPosition()); this.GMap.setZoom(this.defaultzoom); }; Map.GoogleMaps.prototype.createControls = function() { if (this.options.itinerary || this.options.enterprisesAround || this.options.legend) { this.GMap.controls[google.maps.ControlPosition.TOP_LEFT].push(this.createOptionsControl()); } this.GMap.controls[google.maps.ControlPosition.TOP_LEFT].push(this.createCenterControl()); }; Map.GoogleMaps.prototype.createOptionsControl = function() { var optionsDiv = this.createControl("Options"); $(optionsDiv).attr("id", "optionsControl"); google.maps.event.addDomListener(optionsDiv, 'click', function() { openToolbar(); }); return optionsDiv; }; Map.GoogleMaps.prototype.createCenterControl = function() { var optionsDiv = this.createControl(edApplication().labels.RECENTER, "maps/InitialPoint_small.png"); $(optionsDiv).attr("id", "centerControl"); var that = this; google.maps.event.addDomListener(optionsDiv, 'click', function() { that.GMap.panTo(that.referenceGeolocalizable.point); that.GMap.setZoom(that.defaultzoom); google.maps.event.trigger(that.referenceGeolocalizable.marker, 'click'); }); return optionsDiv; }; /** * The HomeControl adds a control to the map that simply * returns the user to Chicago. This constructor takes * the control DIV as an argument. * @constructor */ Map.GoogleMaps.prototype.createControl = function(label, icon) { // Set CSS styles for the DIV containing the control // Setting padding to 5 px will offset the control // from the edge of the map var controlDiv = document.createElement('div'); controlDiv.style.padding = '5px'; // Set CSS for the control border var controlUI = document.createElement('div'); controlUI.style.backgroundColor = 'white'; controlUI.style.border = '1px solid rgb(113, 123, 135)'; controlUI.style.borderRadius = '3px'; controlUI.style.boxShadow = 'rgba(0, 0, 0, 0.4) 0px 2px 4px'; controlUI.style.cursor = 'pointer'; controlUI.style.textAlign = 'center'; controlDiv.appendChild(controlUI); if (icon) { var controlIcon = document.createElement("img"); controlIcon.src = edApplication().getImagePath() + icon; controlIcon.alt = label; controlIcon.title = label; controlUI.style.padding = '3px 2px 3px 2px'; controlUI.appendChild(controlIcon); } else { // Set CSS for the control interior var controlText = document.createElement('div'); controlText.style.padding = '1px 6px'; controlText.innerHTML = label; controlUI.appendChild(controlText); } return controlDiv; }; Map.GoogleMaps.prototype.bindEvents = function() { var that = this; if (this.options.enterprisesAround) { google.maps.event.addListener(this.GMap, "dragend", function(){ that.getGeoLocalizableListArround(this.getBounds()); }); google.maps.event.addListener(this.GMap, "zoomend", function(){ that.getGeoLocalizableListArround(this.getBounds()); }); google.maps.event.addListener(this.GMap, 'idle', function() { that.getGeoLocalizableListArround(this.getBounds()); }); } }; Map.GoogleMaps.prototype.createGeoLocalizableMarker = function(aGeoLocalizableObject) { var icon; if (aGeoLocalizableObject.isReference) { var icon = new google.maps.MarkerImage(edApplication().getImagePath() + "maps/InitialPoint.png", new google.maps.Size(32, 32), new google.maps.Point(0,0), new google.maps.Point(16, 32) ); } else { if (aGeoLocalizableObject.type == "Enterprise") { var icon = new google.maps.MarkerImage(edApplication().getImagePath() + "maps/EnterprisePoint.png", new google.maps.Size(32, 32), new google.maps.Point(0,0), new google.maps.Point(16, 32) ); } if (aGeoLocalizableObject.type == "Person") { var icon = new google.maps.MarkerImage(edApplication().getImagePath() + "maps/PersonPoint.png", new google.maps.Size(32, 32), new google.maps.Point(0,0), new google.maps.Point(16, 32) ); } if (aGeoLocalizableObject.type == "Location") { var icon = new google.maps.MarkerImage(edApplication().getImagePath() + "maps/LocationPoint.png", new google.maps.Size(32, 32), new google.maps.Point(0,0), new google.maps.Point(16, 32) ); } } var point = new google.maps.LatLng(aGeoLocalizableObject.latitude, aGeoLocalizableObject.longitude); var marker = new google.maps.Marker({ position: point, //map: this.GMap, icon: icon }); this.markerCluster.addMarker(marker); //var marker = new GMarker(point, {zIndexProcess:this._importanceOrder, icon:realIcon}); marker.importance = 1; marker.address = aGeoLocalizableObject.gMapFormattedAddress; marker.geoLocalizableObject = aGeoLocalizableObject; //on click : show the htmlToolTip if (aGeoLocalizableObject.htmlToolTip != "") { aGeoLocalizableObject.htmlToolTip = aGeoLocalizableObject.htmlToolTip + '
    '; aGeoLocalizableObject.htmlToolTip = aGeoLocalizableObject.htmlToolTip + ''; aGeoLocalizableObject.htmlToolTip = aGeoLocalizableObject.htmlToolTip + ''; aGeoLocalizableObject.htmlToolTip = aGeoLocalizableObject.htmlToolTip + ''; aGeoLocalizableObject.htmlToolTip = aGeoLocalizableObject.htmlToolTip + '
    '; marker.infoWindow = new google.maps.InfoWindow({ content: aGeoLocalizableObject.htmlToolTip }); var that = this; google.maps.event.addListener(marker, 'click', function() { this.infoWindow.open(that.GMap, this); }); } return marker; }; Map.GoogleMaps.prototype.createActorMarkers = function() { var that = this; if (this.actor.address != "") { edApplication().geocoder.geocode({'address': this.actor.address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { var icon = new google.maps.MarkerImage(edApplication().getImagePath() + "maps/ActorPoint.png", new google.maps.Size(32, 32), new google.maps.Point(0,0), new google.maps.Point(16, 32) ); var point = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()); var marker = new google.maps.Marker({ position: point, map: that.GMap, icon: icon }); var tooltip = '
    '; tooltip = tooltip + '
    '; tooltip = tooltip + ''; tooltip = tooltip + ''; tooltip = tooltip + ''; tooltip = tooltip + '
    '; tooltip = tooltip + edApplication().labels.YOURPERSONALADDRESS + "
    " + that.actor.address; marker.infoWindow = new google.maps.InfoWindow({ content: tooltip }); google.maps.event.addListener(marker, 'click', function() { this.infoWindow.open(that.GMap, this); }); marker.address = that.actor.address; that.actor.addressMarker = marker; //now geolocalize site address if (that.actor.siteAddress != "") { edApplication().geocoder.geocode({'address': that.actor.siteAddress}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { var icon = new google.maps.MarkerImage(edApplication().getImagePath() + "maps/ActorSitePoint.png", new google.maps.Size(32, 32), new google.maps.Point(0,0), new google.maps.Point(16, 32) ); var point = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()); var marker = new google.maps.Marker({ position: point, map: that.GMap, icon: icon }); var tooltip = '
    '; tooltip = tooltip + '
    '; tooltip = tooltip + ''; tooltip = tooltip + ''; tooltip = tooltip + ''; tooltip = tooltip + '
    '; tooltip = tooltip + edApplication().labels.YOURPROFESSIONALADDRESS + "
    " + that.actor.siteAddress; marker.infoWindow = new google.maps.InfoWindow({ content: tooltip }); google.maps.event.addListener(marker, 'click', function() { this.infoWindow.open(that.GMap, this); }); marker.address = that.actor.siteAddress; that.actor.siteAddressMarker = marker; that.itinerarySteps.add({marker: that.actor.siteAddressMarker}); //trigger $(document).trigger("actorGeolocalized"); } else { that.itinerarySteps.add({marker: that.actor.addressMarker}); $(document).trigger("actorGeolocalized"); } }); } else { $(document).trigger("actorGeolocalized"); } } }); } }; Map.GoogleMaps.prototype.getGeoLocalizableListArround = function(bounds){ var entLaMin = bounds.getSouthWest().lat(); var entLoMin = bounds.getSouthWest().lng(); var entLaMax = bounds.getNorthEast().lat(); var entLoMax = bounds.getNorthEast().lng(); var actionToCall = ""; //actionToCall = GeoLocalizableBeans.GeoLocalizeBean.TYPES[this.initialGeoLocalizableBean.type]; actionToCall = this.referenceGeolocalizable.onMapBoundsChangeAction; if (actionToCall != '') { var url = actionToCall + ".fl"; var data = { id:this.referenceGeolocalizable.id, EntLaMin: parseFloat(entLaMin), EntLoMin: parseFloat(entLoMin), EntLaMax: parseFloat(entLaMax), EntLoMax: parseFloat(entLoMax), la: this.referenceGeolocalizable.latitude, lo: this.referenceGeolocalizable.longitude }; var that = this; $.ajax({ url: url , data: data, dataType:"json", context: this, //timeout: 5000, success: function(data, textStatus, jqXHR) { var displayResult = true; if (typeof data.markers != 'undefined'){ $.each(data.markers, function(index, object){ if (!that.geolocalizables.get(object.id)) { var aGeoLocalizableObject = new GeoLocalizableBeans.GeoLocalizeBean(object.id); aGeoLocalizableObject.init(object.type, object.latitude, object.longitude, object.label, object.address1, object.address2, object.address3, object.zipCode, object.city, object.country, object.htmlToolTip); var marker = that.createGeoLocalizableMarker(aGeoLocalizableObject); aGeoLocalizableObject.marker = marker; that.geolocalizables.add(aGeoLocalizableObject); } }); } //if (window.oMapDisplayer.poly) window.oMapDisplayer.GMap.addOverlay(window.oMapDisplayer.poly); }, error: function(jqXHR, textStatus, errorThrown) { console.log("error :"); console.log("jqXHR :"); console.log(jqXHR); console.log("textStatus :"); console.log(textStatus); console.log("errorThrown :"); console.log(errorThrown); } }); } };