/*! SVGMarker v0.6.0 - https://github.com/defvayne23/SVGMarker */ function SVGMarker(t){var e={clickable:!0,cursor:"pointer",draggable:!1,icon:{anchor:new google.maps.Point(0,0),size:new google.maps.Size(30,30),url:"",text:{content:"",font:"Helvetica, sans-serif",color:"#000",size:"10px",weight:"400",position:[0,0]},html:""},map:"",opacity:1,position:"",title:"",visible:!0,zIndex:""};for(var i in t)if("object"==typeof e[i])for(var o in t[i])t[i].hasOwnProperty(o)&&(e[i][o]=t[i][o]);else t.hasOwnProperty(i)&&(e[i]=t[i]);this.setValues(e),"map"in t&&this.setMap(t.map)}SVGMarker.prototype=new google.maps.OverlayView,SVGMarker.prototype.onAdd=function(){var t=this,e=document.createElement("div");e.style.border="none",e.style.borderWidth="0px",e.style.position="absolute",""!==this.get("zIndex")&&(e.style.zIndex=this.get("zIndex")),this.get("visible")===!1&&(e.style.visibility="hidden"),this.get("opacity")>=0&&this.get("opacity")<=1&&(e.style.opacity=this.get("opacity")),this.get("clickable")===!0&&google.maps.event.addDomListener(e,"click",function(e){google.maps.event.trigger(t,"click",e)}),this.get("draggable")===!0&&(google.maps.event.addDomListener(e,"drag",function(e){google.maps.event.trigger(t,"drag",e)}),google.maps.event.addDomListener(e,"mousedown",function(e){google.maps.event.trigger(t,"dragstart",e),this.style.cursor="move",t.get("map").set("draggable",!1);var i=e;t.moveHandler=google.maps.event.addDomListener(t.get("map").getDiv(),"mousemove",function(e){google.maps.event.trigger(t,"drag",e);var o=i.clientX-e.clientX,n=i.clientY-e.clientY,s=t.getProjection().fromLatLngToDivPixel(t.get("position")),r=t.getProjection().fromDivPixelToLatLng(new google.maps.Point(s.x-o,s.y-n));i=e,t.set("position",r),t.draw()})}),google.maps.event.addDomListener(e,"mouseup",function(e){google.maps.event.trigger(t,"dragend",e),t.get("map").set("draggable",!0),this.style.cursor="default",google.maps.event.removeListener(t.moveHandler)}),google.maps.event.addDomListener(this.get("map").getDiv(),"mouseleave",function(t){google.maps.event.trigger(e,"mouseup",t)})),google.maps.event.addDomListener(e,"mouseover",function(e){google.maps.event.trigger(t,"mouseover",e)}),google.maps.event.addDomListener(e,"mouseout",function(e){google.maps.event.trigger(t,"mouseout",e)});var i=document.createElement("img");if(i.src=this.get("icon").url,i.style.width=this.get("icon").size.width+"px",i.style.height=this.get("icon").size.height+"px",i.style.display="block",i.setAttribute("alt",this.get("title")),e.appendChild(i),""!==this.get("icon").text.content){var o=document.createElement("span");o.textContent=this.get("icon").text.content,o.style.fontFamily=this.get("icon").text.font,o.style.fontSize=this.get("icon").text.size,o.style.fontWeight=this.get("icon").text.weight,o.style.color=this.get("icon").text.color,o.style.position="absolute",o.style.top=this.get("icon").text.position[0]+"px",o.style.left=this.get("icon").text.position[1]+"px",o.style.transform="translate(-50%, -50%)",this.get("container").appendChild(o)}""!==this.get("icon").html&&e.appendChild(this.get("icon").html),this.set("container",e),this.getPanes().overlayImage.appendChild(e)},SVGMarker.prototype.draw=function(){var t=this.getProjection(),e=t.fromLatLngToDivPixel(this.get("position"));this.get("container").style.left=e.x-this.get("icon").anchor.x+"px",this.get("container").style.top=e.y-this.get("icon").anchor.y+"px",this.get("container").style.cursor=this.get("cursor")},SVGMarker.prototype.onRemove=function(){this.get("container").parentNode.removeChild(this.get("container")),this.set("container",null)},SVGMarker.prototype.setZIndex=function(t){this.get("container")&&(this.get("container").style.zIndex=t)},SVGMarker.prototype.setOpacity=function(t){this.get("container")&&(this.get("container").style.opacity=t)},SVGMarker.prototype.hide=function(){this.get("container")&&(this.get("container").style.visibility="hidden")},SVGMarker.prototype.show=function(){this.get("container")&&(this.get("container").style.visibility="visible")},SVGMarker.prototype.toggle=function(){this.get("container")&&("hidden"===this.get("container").style.visibility?this.show():this.hide())},SVGMarker.prototype.getPosition=function(){return this.get("position")},SVGMarker.prototype.toggleDOM=function(){this.getMap()?this.setMap(null):this.setMap(this.get("map"))}; /////svg marker $(document).ready(function(){ initMap(); }); /// 7.32 nautical miles (8.42 miles) to Charleston Harbor var centerLat = 31.046374055473596; var centerLng = -81.41999802313995; var theMap; var mapCenter; var mapZoomStart = 19; var zLevelHide = 14; var markersArr = []; var infowindow; var sitePlanOverlay; var markerData; var allowTracking = false; var svgSouth = 31.044748218616647; var svgWest = -81.42279398454774; var svgNorth = 31.047474782965125; var svgEast = -81.4178281160469; var otherMarker = { url: '/themes/moorings/modules/map/markers/map-pin-03.svg', size: new google.maps.Size(40, 40), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(30, 40) //,scaledSize: new google.maps.Size(30, 30) }; var myLocationIcon = { url: '/themes/moorings/modules/map/markers/map-pin-03.svg', size: new google.maps.Size(40, 40), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(30, 40) ,scaledSize: new google.maps.Size(30, 30) }; function initMap() { if ( $(window).width() < 768 ) { mapZoomStart = 17.12; } mapCenter = new google.maps.LatLng(centerLat,centerLng); var mapOptions = { zoom: mapZoomStart, center: mapCenter, styles: gmap_styles, scrollwheel: false, mapTypeControl: true, fullscreenControl: false, streetViewControl: false }; theMap = new google.maps.Map(document.getElementById('map_canvas_full'), mapOptions); ////// new svg overlay siteSVG = document.querySelector('#siteplanSVG'); const svgBounds = new google.maps.LatLngBounds( new google.maps.LatLng(svgSouth, svgWest), new google.maps.LatLng(svgNorth, svgEast) ); sitePlanOverlay = new SVGOverlay(svgBounds, siteSVG, theMap); //For convenience, zoom in on that area: //theMap.setCenter(svgBounds.getCenter()); //theMap.fitBounds(svgBounds); ////// end new svg overlay markSolds(); if( markerData.ROWCOUNT > 0) { addMarkers(markerData) }; sizeAndPositionMap(); var contentString = "

The Moorings at Jekyll Island


Jekyll Island, GA

" infowindow = new google.maps.InfoWindow({ content: contentString, maxWidth: 300, pixelOffset: new google.maps.Size(-10, -10) }); //// show/hide siteplan at zoom level google.maps.event.addListener(theMap, 'zoom_changed', showHideSiteplan ); google.maps.event.addListener(theMap, 'bounds_changed', function() { var bounds = theMap.getBounds(); var ne = bounds.getNorthEast(); var sw = bounds.getSouthWest(); //$(".popover").popover("dispose"); //$(".popover").not( $('[id*="Lot"]') ).remove(); $("[rel=popover]").popover("dispose"); $(".popover").remove(); }); ////// show the lat lng in the console on click for testing google.maps.event.addListener(theMap, 'click', function( event ){ console.log( "Latitude: "+event.latLng.lat()+" "+", longitude: "+event.latLng.lng() ); }); }; // initMap var watchID; var myLocationMarker = null; function getLocation(){ if (navigator.geolocation) { watchID = navigator.geolocation.watchPosition(function(position) { var pos = { lat: position.coords.latitude, lng: position.coords.longitude }; //console.log(pos); //infowindow.setPosition(pos); //infowindow.setContent('Location found.'); //infowindow.open(theMap); theMap.setCenter(pos); /********************************/ if (myLocationMarker == null) { myLocationMarker = new google.maps.Marker({ position: pos, map: theMap, icon: myLocationIcon }); } else { myLocationMarker.setPosition(pos); } /******************************/ }, function() { handleLocationError(true, infowindow, theMap.getCenter()); }); } else { // Browser doesn't support Geolocation handleLocationError(false, infowindow, theMap.getCenter()); } }; function handleLocationError(browserHasGeolocation, infowindow, pos) { infowindow.setPosition(pos); infowindow.setContent(browserHasGeolocation ? 'Error: The Geolocation service failed.' : 'Error: Your browser doesn\'t support geolocation.'); infowindow.open(theMap); } $('.share-loc').click(function(){ if (allowTracking){ allowTracking = false; theMap.setCenter(mapCenter); navigator.geolocation.clearWatch(watchID); }else{ allowTracking = true; getLocation(); } }); function sizeAndPositionMap() { var windowWidth = $(window).width(); var newCenterLat = 31.04632737212796; var newCenterLng = -81.4191252234352; switch(true) { case (windowWidth < 500): newcenterLng = centerLng + .0009; var newCenter = new google.maps.LatLng(newCenterLat,newCenterLng); theMap.setCenter( newCenter ); theMap.setZoom(18.25); //console.log('case 1: ' + theMap.getZoom()); break; case (windowWidth < 800): var newCenter = new google.maps.LatLng(newCenterLat,newCenterLng); theMap.setCenter( newCenter ); theMap.setZoom(18.5); //console.log('case 2:' + theMap.getZoom()); break; case (windowWidth < 1100): theMap.setCenter(mapCenter); theMap.setZoom(19); //console.log('case 3:' + theMap.getZoom()); break; default: //console.log('default case'); //theMap.panBy(0,0); theMap.setCenter(mapCenter); theMap.setZoom(mapZoomStart); //console.log('case default:' + theMap.getZoom() ); break; } } function getLotDetails() { var content = '

' + thisID + '

'; var $lot = $(this); //console.log( $lot.attr('id')); var strID = $lot.attr('id'); var thisID = strID.replace('Lot',''); if ( typeof strID !== "undefined") { if ( strID.indexOf("Lot") > -1 ) { var ajaxurl = "/themes/moorings/modules/siteplan/siteplan.cfc?method=getLotInformationJSON"; $.ajax({ type: "POST", async: false, url: ajaxurl, data: 'lotNumber=' + thisID, //dataType: "html", success: function(data) { var rJSON = JSON.parse(data); //console.log(rJSON.DATA); //console.log(rJSON.DATA.FLOORPLANSARR[0].DATA); var status = String(rJSON.DATA.SOLD); var price = ''; //console.log(typeof status ); switch ( status ) { case "1": price = "Sold"; console.log('sold'); break; case "2": price = "Under Contract"; console.log('contract'); break; default: console.log('default'); price = numeral(rJSON.DATA.ORIGINAL_PRICE[0]).format('$0,0'); } var total_sqft = numeral(rJSON.DATA.FLOORPLANSARR[0].DATA.TOTAL_SQFT[0]).format('0,0'); var heated_sqft = numeral(rJSON.DATA.FLOORPLANSARR[0].DATA.HEATED_SQFT[0]).format('0,0'); var floorplan_name = rJSON.DATA.FLOORPLANSARR[0].DATA.NAME[0]; if ( rJSON.DATA.PUBLISHED == 1) { if ( floorplan_name != undefined){ content = '

' + floorplan_name + ' ' + thisID + '

' + price + '
' } else { content = '

' + thisID + '

' + price + '
' } } else { content = '

' + thisID + '

Phase 2
Coming Soon
' } }, error: function (xhr, textStatus, errorThrown){ //console.log(xhr); alert(errorThrown); } }); } } return content; }; $(function () { var lotPopover = $('[id*="Lot"]').popover({trigger: 'click', placement:'bottom', content:getLotDetails,html:true}).on("show.bs.popover", function(e){ // hide all other popovers $("[rel=popover]").not(e.target).popover("dispose"); $(".popover").remove(); }); $('body').on('click',function(){ console.log('click'); //// remove popovers when the map moves //$(".popover").popover("dispose"); //$(".popover").not( $('[id*="Lot"]') ).remove(); }); }); ///////////////// new site plan overlay /** Our custom overlay class, based on this example: http://serversideguy.com/2017/10/31/how-do-i-place-svgs-on-a-google-map-using-custom-overlays/ More info: https://developers.google.com/maps/documentation/javascript/customoverlays */ "use strict"; function _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return !!right[Symbol.hasInstance](left); } else { return left instanceof right; } } function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } function _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } function _get(target, property, receiver) { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get; } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(receiver); } return desc.value; }; } return _get(target, property, receiver || target); } function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; } function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } var SVGOverlay = /*#__PURE__*/ function (_google$maps$OverlayV) { _inherits(SVGOverlay, _google$maps$OverlayV); function SVGOverlay(bounds, svg, map) { var _this; _classCallCheck(this, SVGOverlay); _this = _possibleConstructorReturn(this, _getPrototypeOf(SVGOverlay).call(this)); _this.bounds = bounds; _this.svg = svg; _get(_getPrototypeOf(SVGOverlay.prototype), "setMap", _assertThisInitialized(_this)).call(_assertThisInitialized(_this), map); return _this; } /** Will be called when the map is ready for the overlay to be attached. */ _createClass(SVGOverlay, [{ key: "onAdd", value: function onAdd() { var svg = this.svg; svg.style.display = 'block'; svg.style.position = 'absolute'; //Add the SVG element to a map pane/layer that is able to receive mouse events: ///// added the opacity for placement of the svg svg.style.opacity = '1'; var panes = _get(_getPrototypeOf(SVGOverlay.prototype), "getPanes", this).call(this); panes.overlayMouseTarget.appendChild(svg); } /** Whenever we need to (re)draw the overlay on the map, including when first added. */ }, { key: "draw", value: function draw() { //Here, we need to find the correct on-screen position for our image. //To achieve that, we simply ask the map's projection to calculate viewport pixels from the image's lat/lng bounds: var projection = _get(_getPrototypeOf(SVGOverlay.prototype), "getProjection", this).call(this), bounds = this.bounds, sw = projection.fromLatLngToDivPixel(bounds.getSouthWest()), ne = projection.fromLatLngToDivPixel(bounds.getNorthEast()); //Place/resize the SVG element: var s = this.svg.style; s.left = sw.x + 'px'; s.top = ne.y + 'px'; s.width = ne.x - sw.x + 'px'; s.height = sw.y - ne.y + 'px'; } }, { key: "hide", value: function hide() { var svg = this.svg; svg.style.display = 'none'; } //hide }, { key: "show", value: function show() { var svg = this.svg; svg.style.display = 'block'; } //show }]); return SVGOverlay; }(google.maps.OverlayView); //SVGOverlay function addEvent(target, type, handler) { var targets = typeof target === 'string' ? Array.from(document.querySelectorAll(target)) : [target]; targets.forEach(function (t) { return google.maps.event.addDomListener(t, type, handler); }); } ///////////////// end new site plan overlay ///////// get and mark solds and under contract function markSolds() { var ajaxurl = "/themes/moorings/modules/siteplan/siteplan.cfc?method=getLotsForSaleJSON"; $.ajax({ type: "POST", url: ajaxurl, //data: $(form).serialize(), //dataType: "html", success: function(data) { var rJSON = JSON.parse(data); for (var i = 0; i < rJSON.ROWCOUNT; i++) { if ( rJSON.DATA.SOLD[i] === 1 ) { $('#Lot' + rJSON.DATA.LOT_NUMBER[i]).attr("class", "sold"); } else if ( rJSON.DATA.SOLD[i] === 2) { //console.log(rJSON.DATA.LOT_NUMBER[i]); $('#Lot' + rJSON.DATA.LOT_NUMBER[i]).attr("class", "sold under_contract"); } }; }, error: function (xhr, textStatus, errorThrown){ //console.log(xhr); alert(errorThrown); } }); }; ///////// get and mark solds and under contract function showHideSiteplan() { zoomLevel = theMap.getZoom(); if (zoomLevel >= zLevelHide) { //sitePlanOverlay.setMap(theMap); sitePlanOverlay.show(); //markersArr[0].setMap(null); } else { //sitePlanOverlay.setMap(null); sitePlanOverlay.hide(); //markersArr[0].setMap(theMap); } } function offsetMapCenter(map,offsetX, offsetY){ //map.setCenter(mapCenter); map.panBy(offsetX,offsetY); }; $( window ).resize(function() { sizeAndPositionMap(); }); function addMarkers(markerData) { if( markerData != undefined) { var markerTitle; for(var i = 0; i < markerData.ROWCOUNT; i++){ var hasImage = true; var markerID = markerData.DATA.ID[i]; var markerHeadline = markerData.DATA.HEADLINE[i]; var markerSubhead = markerData.DATA.SUBHEAD[i]; var marker_text = String(markerData.DATA.INTRO_TEXT[i]); marker_text = marker_text; var image1 = markerData.DATA.DOCUMENT_FILE_PATH[i] + 'thumb_' + markerData.DATA.DOCUMENT_FILE[i]; var newLatLng = new google.maps.LatLng(markerData.DATA.LATITUDE[i],markerData.DATA.LONGITUDE[i]); if ( markerData.DATA.DOCUMENT_FILE[i] == null){ hasImage = false; } var loadedmarker = new SVGMarker({ map: theMap, position: newLatLng, icon: otherMarker, // custom marker info markerID : markerID, markerHeadline : markerHeadline, markerSubhead : markerSubhead, markerText : marker_text, image : image1, hasImage : hasImage }); markersArr.push(loadedmarker); google.maps.event.addListener(loadedmarker, 'click', markerInfoWindow); }//end for loop }// end if undefined }//end addMarkers function markerInfoWindow(event) { if ( this.hasImage == false ) { var contentString = '

' + this.markerHeadline + '

' + this.markerSubhead + '

' + this.markerText + '

' + '

'; } else { var contentString = '

' + this.markerHeadline + '

' + this.markerSubhead + '

' + this.markerText + '

' + '

' + '
' + '
'; } infowindow.setContent(contentString); infowindow.open(theMap,this); theMap.setCenter(this.getPosition()); theMap.panBy(0,-100); } // show/hide markers function setMapOnAll(theMap) { for (var i = 0; i < markersArr.length; i++) { markersArr[i].setMap(theMap); } }; // Removes the markers from the map, but keeps them in the array. function clearMarkers() { setMapOnAll(null); } // Shows any markers currently in the array. function showMarkers() { setMapOnAll(map); } // show/hide marker labels function showLabels() { for (var i = 0; i < markersArr.length; i++) { markersArr[i].set('labelVisible', true); } }; function hideLabels() { for (var i = 0; i < markersArr.length; i++) { markersArr[i].set('labelVisible', false); } }; function showHideLabelsOnZoom() { if ( theMap.getZoom() < zLevelHide ) { hideLabels(); } else { showLabels(); } }; function findLatInPoints(pointArr,inLat) { // return number of times lat appears in points var result = $.grep(pointArr, function(e){ return e.lat() === inLat; }); return result.length; }// findLat //////////////// overlay //////////////// /////////////// end overlay /////////////// var gmap_styles = [{"elementType":"geometry","stylers":[{"color":"#ebe3cd"}]},{"elementType":"labels.text.fill","stylers":[{"color":"#523735"}]},{"elementType":"labels.text.stroke","stylers":[{"color":"#f5f1e6"}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#c9b2a6"}]},{"featureType":"administrative.land_parcel","elementType":"geometry.stroke","stylers":[{"color":"#dcd2be"}]},{"featureType":"administrative.land_parcel","elementType":"labels.text.fill","stylers":[{"color":"#ae9e90"}]},{"featureType":"administrative.neighborhood","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"geometry.stroke","stylers":[{"color":"#40371d"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#dfd2ae"}]},{"featureType":"poi","elementType":"labels.text.fill","stylers":[{"color":"#93817c"}]},{"featureType":"poi.business","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"color":"#a5b076"}]},{"featureType":"poi.park","elementType":"labels.text.fill","stylers":[{"color":"#447530"}]},{"featureType":"road","elementType":"geometry","stylers":[{"color":"#f5f1e6"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#fdfcf8"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#f8c967"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#e9bc62"}]},{"featureType":"road.highway.controlled_access","elementType":"geometry","stylers":[{"color":"#e98d58"}]},{"featureType":"road.highway.controlled_access","elementType":"geometry.stroke","stylers":[{"color":"#db8555"}]},{"featureType":"road.local","elementType":"labels.text.fill","stylers":[{"color":"#806b63"}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"color":"#dfd2ae"}]},{"featureType":"transit.line","elementType":"labels.text.fill","stylers":[{"color":"#8f7d77"}]},{"featureType":"transit.line","elementType":"labels.text.stroke","stylers":[{"color":"#ebe3cd"}]},{"featureType":"transit.station","elementType":"geometry","stylers":[{"color":"#dfd2ae"}]},{"featureType":"water","elementType":"geometry.fill","stylers":[{"color":"#b9d3c2"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"color":"#92998d"}]}];