$.fn.GoogleMapEditor = function (options) { function addSearchBox(e) { var t = "q" + e.id; $(e.container).parent().prepend(''); var n = document.getElementById(t); if (n != null) { e.controls[google.maps.ControlPosition.TOP_RIGHT].push(n); var r = new google.maps.places.SearchBox(n); google.maps.event.addListener(r, "places_changed", function () { var t = r.getPlaces(); var n = new google.maps.LatLngBounds; for (var i = 0, s; s = t[i]; i++) { n.extend(s.geometry.location) } e.fitBounds(n); e.setZoom(15) }); google.maps.event.addListener(e, "bounds_changed", function () { var t = e.getBounds(); r.setBounds(t) }) } } function addStylesList(map) { if (settings.editMode) { var selectId = "s" + map.id; $(map.container).parent().prepend(''); var n = document.getElementById(t); if (n != null) { e.controls[google.maps.ControlPosition.TOP_CENTER].push(n); $(n).click(function () { var t = getMapLocationsBounds(e); if (t != null) { e.fitBounds(t); saveToJson(e) } }) } } function addCurrentLocationButton(e) { var t = "l" + e.id; $(e.container).parent().prepend(''); var n = document.getElementById(t); if (n != null) { e.controls[google.maps.ControlPosition.TOP_CENTER].push(n); $(n).click(function () { if (navigator.geolocation) { var t = $(e.container).next(); t.width($(e.container).width()); t.height($(e.container).height()); t.offset({ top: $(e.container).offset().top, left: $(e.container).offset().left }); t.fadeIn("slow"); navigator.geolocation.getCurrentPosition(function (n) { t.fadeOut("fast"); if (settings.editMode) { var r = new Location([new Coordinate(n.coords.latitude, n.coords.longitude)], google.maps.drawing.OverlayType.MARKER, "", "", "", "", "", ""); initMapObject(e, r); e.locations.push(r); var i = new google.maps.LatLngBounds(new google.maps.LatLng(r.Coordinates[0].Latitude, r.Coordinates[0].Longitude)); e.fitBounds(i); e.setZoom(15); new google.maps.event.trigger(r.Overlay, "click"); saveToJson(e) } else { var i = new google.maps.LatLngBounds(new google.maps.LatLng(n.coords.latitude, n.coords.longitude)); e.fitBounds(i); e.setZoom(15) } }, function (e) { alert("Unable to fetch your current location!\n" + e); t.fadeOut("fast") }) } }) } } function arePopupTemplatesLoaded() { if (popupTemplateCircle != null && popupTemplateRectangle != null && popupTemplateMarker != null && popupTemplatePolyline != null && popupTemplatePolygon != null) { return true } else { return false } } function loadPopupTemplates() { $.ajax({ url: settings.editTemplatesPath + "popup-template-circle.html", method: "GET", dataType: "text html", success: function (e) { popupTemplateCircle = e } }); $.ajax({ url: settings.editTemplatesPath + "popup-template-rectangle.html", method: "GET", dataType: "text html", success: function (e) { popupTemplateRectangle = e } }); $.ajax({ url: settings.editTemplatesPath + "popup-template-marker.html", method: "GET", dataType: "text html", success: function (e) { popupTemplateMarker = e } }); $.ajax({ url: settings.editTemplatesPath + "popup-template-polyline.html", method: "GET", dataType: "text html", success: function (e) { popupTemplatePolyline = e } }); $.ajax({ url: settings.editTemplatesPath + "popup-template-polygon.html", method: "GET", dataType: "text html", success: function (e) { popupTemplatePolygon = e } }) } function initializeGoogleMapEditor(e) { var t = null; if (settings.editMode) { loadPopupTemplates() } t = new google.maps.Map(e, { center: new google.maps.LatLng(settings.center.latitude, settings.center.longitude), zoom: settings.zoom, zoomControl: settings.zoomControl, panControl: settings.panControl, scaleControl: settings.scaleControl, streetViewControl: settings.streetViewControl, infoWindow: null, styles: settings.style }); t.setOptions({ scrollwheel: settings.scrollWheel }); t.container = e; t.locations = settings.locations.slice(0); t.id = createUUID(); $("
", { "class": "map-overlay" }).append($("", { type: "button", value: "Close", "class": "btn-close" })).insertAfter($(t.container)); $(".map-overlay input.btn-close").click(function () { $(this).parent().fadeOut("slow") }); google.maps.event.addListenerOnce(t, "idle", function () { addStylesList(t); addFitBoundsButton(t); addCurrentLocationButton(t); if (settings.searchBox) { addSearchBox(t) } if (t.locations != null && t.locations.length > 0) { for (i = 0; i < t.locations.length; i++) { initMapObject(t, t.locations[i]) } } saveToJson(t) }); google.maps.event.addListenerOnce(t, "center_changed", function () { saveToJson(t) }); google.maps.event.addListenerOnce(t, "zoom_changed", function () { saveToJson(t) }); google.maps.event.addListenerOnce(t, "maptypeid_changed", function () { saveToJson(t) }); google.maps.event.addListenerOnce(t, "dragend", function () { saveToJson(t) }); google.maps.event.addListener(t, "click", function () { if (t.infoWindow != null) { t.infoWindow.close(); t.activeLocation = null } for (i = 0; i < t.locations.length; i++) { t.locations[i].Overlay.set("editable", false) } }); if (settings.editMode) { var n = new google.maps.drawing.DrawingManager({ drawingMode: google.maps.drawing.OverlayType.MARKER, drawingControl: true, polygonOptions: { draggable: settings.editMode, strokeWeight: settings.drawingBorderWidth, strokeColor: settings.drawingBorderColor, fillColor: settings.drawingFillColor }, markerOptions: { draggable: settings.editMode }, polylineOptions: { draggable: settings.editMode, strokeWeight: settings.drawingBorderWidth, strokeColor: settings.drawingBorderColor, fillColor: settings.drawingFillColor }, circleOptions: { draggable: settings.editMode, strokeWeight: settings.drawingBorderWidth, strokeColor: settings.drawingBorderColor, fillColor: settings.drawingFillColor }, rectangleOptions: { draggable: settings.editMode, strokeWeight: settings.drawingBorderWidth, strokeColor: settings.drawingBorderColor, fillColor: settings.drawingFillColor }, drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: settings.drawingTools } }); google.maps.event.addListener(n, "overlaycomplete", function (e) { var n = null; if (settings.singleLocation) { clearLocations(t) } e.overlay.set("draggable", settings.editMode); n = initLocationObject(t, e.overlay, e.type); attachLocationHandlers(t, n, e.type); e.overlay.setOptions({ suppressUndo: true }); attachTransformHandlers(t, e.overlay, e.type); if (settings.locationNew != null && typeof settings.locationNew == "function") { settings.locationNew(t, n) } }); n.setMap(t) } } function attachTransformHandlers(e, t, n) { switch (n) { case google.maps.drawing.OverlayType.POLYLINE: case google.maps.drawing.OverlayType.POLYGON: google.maps.event.addListener(t.getPath(), "set_at", function (r, i) { updateLocationObject(e, t.Location, n, true) }); google.maps.event.addListener(t.getPath(), "insert_at", function (r, i) { updateLocationObject(e, t.Location, n, true) }); google.maps.event.addListener(t.getPath(), "remove_at", function (r, i) { updateLocationObject(e, t.Location, n, true) }); break; case google.maps.drawing.OverlayType.CIRCLE: google.maps.event.addListener(t, "radius_changed", function (r, i) { updateLocationObject(e, t.Location, n, true) }); google.maps.event.addListener(t, "center_changed", function (r, i) { updateLocationObject(e, t.Location, n, true) }); break; case google.maps.drawing.OverlayType.RECTANGLE: google.maps.event.addListener(t, "bounds_changed", function (r, i) { updateLocationObject(e, t.Location, n, true) }); break } } function clearLocations(e) { if (e.locations != null && e.locations.length > 0) { for (i = 0; i < e.locations.length; i++) { e.locations[i].Overlay.setMap(null) } e.locations.length = 0; e.locations = [] } } function initLocationObject(e, t, n) { var r; var s = []; switch (n) { case google.maps.drawing.OverlayType.MARKER: r = new Location([new Coordinate(t.getPosition().lat(), t.getPosition().lng())], google.maps.drawing.OverlayType.MARKER, "", "", "", "", "", ""); break; case google.maps.drawing.OverlayType.CIRCLE: r = new Location([new Coordinate(t.getCenter().lat(), t.getCenter().lng())], google.maps.drawing.OverlayType.CIRCLE, ""); r.Radius = t.getRadius(); break; case google.maps.drawing.OverlayType.POLYLINE: for (i = 0; i < t.getPath().length; i++) { s.push(new Coordinate(t.getPath().getAt(i).lat(), t.getPath().getAt(i).lng())) } r = new Location(s, google.maps.drawing.OverlayType.POLYLINE, ""); break; case google.maps.drawing.OverlayType.POLYGON: for (i = 0; i < t.getPath().length; i++) { s.push(new Coordinate(t.getPath().getAt(i).lat(), t.getPath().getAt(i).lng())) } r = new Location(s, google.maps.drawing.OverlayType.POLYGON, ""); break; case google.maps.drawing.OverlayType.RECTANGLE: s.push(new Coordinate(t.getBounds().getNorthEast().lat(), t.getBounds().getNorthEast().lng())); s.push(new Coordinate(t.getBounds().getSouthWest().lat(), t.getBounds().getSouthWest().lng())); r = new Location(s, google.maps.drawing.OverlayType.RECTANGLE, ""); break } r.Overlay = t; t.Location = r; if (e.locations == null) { e.locations = [] } e.locations.push(r); saveToJson(e); return r } function initMapObject(e, t) { switch (t.LocationType) { case google.maps.drawing.OverlayType.MARKER: var n = new google.maps.Marker({ draggable: settings.editMode, map: e, position: new google.maps.LatLng(t.Coordinates[0].Latitude, t.Coordinates[0].Longitude), Location: t }); if (t.Icon != null && t.Icon != "") { n.setIcon(new google.maps.MarkerImage(settings.markerPinsPath + t.Icon)) } t.Overlay = n; attachLocationHandlers(e, t, google.maps.drawing.OverlayType.MARKER); break; case google.maps.drawing.OverlayType.CIRCLE: var r = new google.maps.Circle({ draggable: settings.editMode, map: e, strokeWeight: t.BorderWeight, strokeColor: t.BorderColor, fillColor: t.FillColor, map: e, radius: t.Radius, center: new google.maps.LatLng(t.Coordinates[0].Latitude, t.Coordinates[0].Longitude), Location: t }); t.Overlay = r; attachLocationHandlers(e, t, google.maps.drawing.OverlayType.CIRCLE); break; case google.maps.drawing.OverlayType.POLYLINE: var i = []; for (c = 0; c < t.Coordinates.length; c++) { var s = new google.maps.LatLng(t.Coordinates[c].Latitude, t.Coordinates[c].Longitude); i.push(s) } polyline = new google.maps.Polyline({ path: i, strokeWeight: t.BorderWeight, strokeColor: t.BorderColor, draggable: settings.editMode, Location: t }); polyline.setMap(e); t.Overlay = polyline; attachLocationHandlers(e, t, google.maps.drawing.OverlayType.POLYLINE); break; case google.maps.drawing.OverlayType.POLYGON: var o = []; for (c = 0; c < t.Coordinates.length; c++) { var u = new google.maps.LatLng(t.Coordinates[c].Latitude, t.Coordinates[c].Longitude); o.push(u) } polygon = new google.maps.Polygon({ path: o, strokeWeight: t.BorderWeight, strokeColor: t.BorderColor, fillColor: t.FillColor, draggable: settings.editMode, Location: t }); polygon.setMap(e); t.Overlay = polygon; attachLocationHandlers(e, t, google.maps.drawing.OverlayType.POLYGON); break; case google.maps.drawing.OverlayType.RECTANGLE: var a = new google.maps.Rectangle({ draggable: settings.editMode, map: e, strokeWeight: t.BorderWeight, strokeColor: t.BorderColor, fillColor: t.FillColor, map: e, bounds: new google.maps.LatLngBounds(new google.maps.LatLng(t.Coordinates[1].Latitude, t.Coordinates[1].Longitude), new google.maps.LatLng(t.Coordinates[0].Latitude, t.Coordinates[0].Longitude)), Location: t }); t.Overlay = a; attachLocationHandlers(e, t, google.maps.drawing.OverlayType.RECTANGLE); break } attachTransformHandlers(e, t.Overlay, t.LocationType) } function saveToJson(e) { var t = null; if (settings.editMode) { var n = getMapLocationsBounds(e); if (n != null) { var r = getMapLocationsBounds(e).getCenter(); settings.center = new Coordinate(r.lat(), r.lng()) } var i = ["editMode", "editTemplatesPath", "markerPinsPath", "markerPinFiles", "drawingBorderColor", "drawingBorderWidth", "drawingFillColor", "zoom", "width", "height", "singleLocation", "center", "language", "searchBox", "richtextEditor", "drawingTools", "zoomControl", "panControl", "scaleControl", "streetViewControl", "scrollWheel", "stylesPath", "style", "locations"]; i = i.concat(["latitude", "longitude", "Coordinates", "Latitude", "Longitude", "Radius", "LocationType", "Icon", "HoverIcon", "Message", "BorderColor", "BorderWeight", "FillColor", "Tag"]); i = i.concat(["featureType", "elementType", "stylers", "color", "hue", "weight", "visibility", "lightness", "saturation"]); t = JSON.stringify($.extend({}, settings, { locations: e.locations }), i); if (settings.dataChange != null && typeof settings.dataChange == "function") { settings.dataChange(e, t) } } return t } function handleMapCloseClick(e, t) { if (typeof e.activeLocation != "undefined" && e.activeLocation != null) { $(".color-picker").remove() } updateLocationObject(e, e.activeLocation, t, false) } function attachLocationHandlers(e, t, n) { google.maps.event.addListener(t.Overlay, "dragend", function (r) { updateLocationObject(e, this.Location, n, true); if (settings.locationMove != null && typeof settings.locationMove == "function") { settings.locationMove(e, t) } }); google.maps.event.addListener(t.Overlay, "mouseover", function () { if (n == google.maps.drawing.OverlayType.MARKER) { if (t.HoverIcon && t.HoverIcon != "none" && t.HoverIcon != null && t.HoverIcon != "") { t.Overlay.setIcon(settings.markerPinsPath + t.HoverIcon) } } }); google.maps.event.addListener(t.Overlay, "mouseout", function () { if (n == google.maps.drawing.OverlayType.MARKER) { if (t.Icon != "default" && t.Icon != null && t.Icon != "") { t.Overlay.setIcon(settings.markerPinsPath + t.Icon) } else { t.Overlay.setIcon(null) } } }); google.maps.event.addListener(t.Overlay, "click", function () { if (!arePopupTemplatesLoaded() && settings.editMode) { return } if (e.infoWindow != null) { e.infoWindow.close(); e.activeLocation = null } for (i = 0; i < e.locations.length; i++) { e.locations[i].Overlay.set("editable", false) } t.Overlay.set("editable", settings.editMode); e.infoWindow = new google.maps.InfoWindow; e.activeLocation = t; google.maps.event.addListener(e.infoWindow, "closeclick", function () { handleMapCloseClick(e, n) }); var r = null; var s = null; switch (n) { case google.maps.drawing.OverlayType.MARKER: r = t.Overlay.position; s = $("
").append(popupTemplateMarker); if (!settings.richtextEditor) { s.find("textarea").removeClass("richtext-fix") } break; case google.maps.drawing.OverlayType.CIRCLE: r = t.Overlay.getCenter(); s = $("
").append(popupTemplateCircle); if (!settings.richtextEditor) { s.find("textarea").removeClass("richtext-fix") } break; case google.maps.drawing.OverlayType.POLYLINE: r = getPolyLineCenter(t.Overlay); s = $("
").append(popupTemplatePolyline); if (!settings.richtextEditor) { s.find("textarea").removeClass("richtext-fix") } break; case google.maps.drawing.OverlayType.POLYGON: r = getPolygonCenter(t.Overlay); s = $("
").append(popupTemplatePolygon); if (!settings.richtextEditor) { s.find("textarea").removeClass("richtext-fix") } break; case google.maps.drawing.OverlayType.RECTANGLE: r = t.Overlay.getBounds().getCenter(); s = $("
").append(popupTemplateRectangle); if (!settings.richtextEditor) { s.find("textarea").removeClass("richtext-fix") } break } if (s != null && settings.editMode) { e.infoWindow.setContent(s.html()) } else { e.infoWindow.setContent($("
").append($("
", { "class": "popup-message" }).html(t.Message)).html()) } google.maps.event.addListener(e.infoWindow, "domready", function () { $(e.container).find(".popup-content textarea").val(e.activeLocation.Message); $(e.container).find('.popup-content input[name="locationLat"]').val(r.lat()); $(e.container).find('.popup-content input[name="locationLng"]').val(r.lng()); $(e.container).find('.popup-content input[name="centerLat"]').val(r.lat()); $(e.container).find('.popup-content input[name="centerLng"]').val(r.lng()); $(e.container).find('.popup-content input[name="borderWidth"]').val(t.BorderWeight); $(e.container).find('.popup-content input[name="radius"]').val(t.Radius); var n = $(e.container).find('.popup-content select[name="icon"]'); if (n.length > 0 && settings.markerPinFiles.length > 0) { for (i = 0; i < settings.markerPinFiles.length; i++) { n.append($("