$(document).ready(function(){ if (typeof google === 'object' && typeof google.maps === 'object') { handleSPGoogleApiReady(); } else { var script = document.createElement("script"); script.type = "text/javascript"; script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyCMS-uFpwKtiZ9g0CL8ykNYFpU6juoZxHc&callback=handleSPGoogleApiReady"; document.body.appendChild(script); } }); function handleSPGoogleApiReady() { /*! 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 /// community lat/lng var centerLat = 31.281503502044174; var centerLng = -81.4702949873047; var theMap; var mapCenter; var mapZoomStart = 17.25; var zLevelHide = 16; var markersArr = []; var infowindow; var sitePlanOverlay; var markerData; var allowTracking = false; var otherMarker = { url: '/themes/moxleyhomes/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/moxleyhomes/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 disableClicks = false; function initMap() { if ( $(window).width() < 768 ) { mapZoomStart = 17.12; } mapCenter = new google.maps.LatLng(centerLat,centerLng); var mapOptions = { zoom: mapZoomStart, disableDefaultUI: true, tilt: 0, heading: 35, center: mapCenter, styles: gmap_styles, scrollwheel: false, mapTypeControl: false, fullscreenControl: false, streetViewControl: false, zoomControl: true }; theMap = new google.maps.Map(document.getElementById('site_plan_map_canvas'), mapOptions); ////// new svg overlay siteSVG = document.querySelector('#siteplanSVG'); const svgBounds = new google.maps.LatLngBounds( new google.maps.LatLng(31.277777, -81.474568), //31.275963, -81.476415 new google.maps.LatLng(31.284044, -81.463633) //31.283568, -81.462745 ); sitePlanOverlay = new SVGOverlay(svgBounds, siteSVG, theMap); //For convenience, zoom in on that area: //theMap.setCenter(svgBounds.getCenter()); //theMap.fitBounds(svgBounds); //Handle normal DOM events on the SVG element(s): addEvent('[id*="Lot"]', 'click', function(e) { e.stopPropagation(); if (disableClicks) { console.log('clicks are disabled'); } else { getLotDetails(e.currentTarget.id); } }); addEvent('[id*="Lot"]', 'dblclick', function(e) { //Avoid zooming here: e.stopPropagation(); }); ////// end new svg overlay markSolds(); addMarkers(markerData); sizeAndPositionMap(); var contentString = "

Moxley Homes


,

" 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(); //console.log(ne + ' ' + sw); //do whatever you want with those bounds }); ////////// disable clicks while map is dragging ///////// google.maps.event.addListener(theMap, 'drag', function() { disableClicks = true; }); google.maps.event.addListener(theMap, 'dragend', function() { setTimeout(() => { disableClicks = false }, 1000); }); }; // 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(); switch(true) { case (windowWidth < 600): newcenterLng = centerLng - .0013; var newCenter = new google.maps.LatLng(centerLat,newcenterLng); theMap.setCenter(newCenter); theMap.setZoom(17); console.log('case 1: ' + theMap.getZoom()); break; case (windowWidth < 800): theMap.setCenter(mapCenter); theMap.setZoom(17); //console.log('case 2:' + theMap.getZoom()); break; case (windowWidth < 1100): newcenterLat = centerLat - .0005; newcenterLng = centerLng + .0005; var newCenter = new google.maps.LatLng(newcenterLat,newcenterLng); theMap.setCenter(newCenter); theMap.setZoom(17); //console.log('case 3:' + theMap.getZoom()); break; default: //console.log('default case'); //theMap.panBy(0,0); newcenterLat = centerLat - .0005; newcenterLng = centerLng + .0007; var newCenter = new google.maps.LatLng(newcenterLat,newcenterLng); theMap.setCenter(newCenter); theMap.setZoom(mapZoomStart); //console.log('case default:' + theMap.getZoom() ); break; } } function getLotDetails(lotNumber) { var strID = lotNumber; var thisID = strID.replace('Lot',''); var $lot = $(this); if ( typeof strID !== "undefined") { if ( strID.indexOf("Lot") > -1 ) { var theData = "lotNumber=" + thisID + "&filename=siteplan"; $.fancybox.open( { src : '/themes/moxleyhomes/modules/siteplan/lot_details.cfm?' + theData, opts : { smallBtn : true, width : '800px', iframe: { css: { width: '1000px'} }, } ,type : 'iframe' } ); } } }; ///////////////// 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: 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 sales status /* [{"label": "For Sale","value": "for_sale","class":"for_sale"},{"label": "Under Contract","value": "under_contract","class":"under_contract"},{"label": "Closed","value": "closed","class":"closed"},{"label": "Developer Hold","value": "developer_hold","class":"developer_hold"},{"label": "For Sale & Under Construction","value": "for_sale_under_construction","class":"for_sale_under_construction"}] */ function markSolds() { var ajaxurl = "/themes/moxleyhomes/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++) { //console.log(rJSON.DATA.LOT_NUMBER[i] + ' rJSON.DATA.PUBLISHED[i]: ' + rJSON.DATA.PUBLISHED[i]); //opacity of .house $('#Lot' + rJSON.DATA.LOT_NUMBER[i]).find('use').css("opacity", 0); switch( rJSON.DATA.SALES_STATUS[i] ) { case 'for_sale': $('#Lot' + rJSON.DATA.LOT_NUMBER[i]).attr("class", "for_sale"); break; case 'under_contract': $('#Lot' + rJSON.DATA.LOT_NUMBER[i]).attr("class", "under_contract"); break; case 'closed': $('#Lot' + rJSON.DATA.LOT_NUMBER[i]).attr("class", "closed"); break; case 'developer_hold': $('#Lot' + rJSON.DATA.LOT_NUMBER[i]).attr("class", "developer_hold"); break; case 'for_sale_under_construction': $('#Lot' + rJSON.DATA.LOT_NUMBER[i]).attr("class", "for_sale_under_construction"); break; default: break; } if (rJSON.DATA.PUBLISHED[i] == 1) { $('#Lot' + rJSON.DATA.LOT_NUMBER[i]).addClass('active'); } }; }, 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); } } $( 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 console.log(markersArr); }// 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 var gmap_styles = [{"elementType":"geometry","stylers":[{"color":"#e2e4d3"}]},{"elementType":"labels.text.fill","stylers":[{"color":"#523735"}]},{"elementType":"labels.text.stroke","stylers":[{"color":"#fdfcf8"}]},{"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":"#fdfcf8"}]},{"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":"#a6cbce"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"color":"#92998d"}]}]; initMap(); }; //handleGoogleApiReady