// JavaScript Document //////// markerwithlabel /** * google-maps-utility-library-v3-markerwithlabel * * @version: 1.1.10 * @author: Gary Little (inspired by code from Marc Ridey of Google). * @contributors: Nicholas McCready * @date: Fri May 13 2016 16:29:58 GMT-0400 (EDT) * @license: Apache License 2.0 */ function inherits(e,t){function i(){}i.prototype=t.prototype,e.superClass_=t.prototype,e.prototype=new i,e.prototype.constructor=e}function MarkerLabel_(e,t,i){this.marker_=e,this.handCursorURL_=e.handCursorURL,this.labelDiv_=document.createElement("div"),this.labelDiv_.style.cssText="position: absolute; overflow: hidden;",this.eventDiv_=document.createElement("div"),this.eventDiv_.style.cssText=this.labelDiv_.style.cssText,this.eventDiv_.setAttribute("onselectstart","return false;"),this.eventDiv_.setAttribute("ondragstart","return false;"),this.crossDiv_=MarkerLabel_.getSharedCross(t)}function MarkerWithLabel(e){e=e||{},e.labelContent=e.labelContent||"",e.labelAnchor=e.labelAnchor||new google.maps.Point(0,0),e.labelClass=e.labelClass||"markerLabels",e.labelStyle=e.labelStyle||{},e.labelInBackground=e.labelInBackground||!1,"undefined"==typeof e.labelVisible&&(e.labelVisible=!0),"undefined"==typeof e.raiseOnDrag&&(e.raiseOnDrag=!0),"undefined"==typeof e.clickable&&(e.clickable=!0),"undefined"==typeof e.draggable&&(e.draggable=!1),"undefined"==typeof e.optimized&&(e.optimized=!1),e.crossImage=e.crossImage||"http"+("https:"===document.location.protocol?"s":"")+"://maps.gstatic.com/intl/en_us/mapfiles/drag_cross_67_16.png",e.handCursor=e.handCursor||"http"+("https:"===document.location.protocol?"s":"")+"://maps.gstatic.com/intl/en_us/mapfiles/closedhand_8_8.cur",e.optimized=!1,this.label=new MarkerLabel_(this,e.crossImage,e.handCursor),google.maps.Marker.apply(this,arguments)}inherits(MarkerLabel_,google.maps.OverlayView),MarkerLabel_.getSharedCross=function(e){var t;return"undefined"==typeof MarkerLabel_.getSharedCross.crossDiv&&(t=document.createElement("img"),t.style.cssText="position: absolute; z-index: 1000002; display: none;",t.style.marginLeft="-8px",t.style.marginTop="-9px",t.src=e,MarkerLabel_.getSharedCross.crossDiv=t),MarkerLabel_.getSharedCross.crossDiv},MarkerLabel_.prototype.onAdd=function(){var e,t,i,s,a,r,o,n=this,l=!1,g=!1,p=20,_="url("+this.handCursorURL_+")",h=function(e){e.preventDefault&&e.preventDefault(),e.cancelBubble=!0,e.stopPropagation&&e.stopPropagation()},v=function(){n.marker_.setAnimation(null)};this.getPanes().overlayImage.appendChild(this.labelDiv_),this.getPanes().overlayMouseTarget.appendChild(this.eventDiv_),"undefined"==typeof MarkerLabel_.getSharedCross.processed&&(this.getPanes().overlayImage.appendChild(this.crossDiv_),MarkerLabel_.getSharedCross.processed=!0),this.listeners_=[google.maps.event.addDomListener(this.eventDiv_,"mouseover",function(e){(n.marker_.getDraggable()||n.marker_.getClickable())&&(this.style.cursor="pointer",google.maps.event.trigger(n.marker_,"mouseover",e))}),google.maps.event.addDomListener(this.eventDiv_,"mouseout",function(e){!n.marker_.getDraggable()&&!n.marker_.getClickable()||g||(this.style.cursor=n.marker_.getCursor(),google.maps.event.trigger(n.marker_,"mouseout",e))}),google.maps.event.addDomListener(this.eventDiv_,"mousedown",function(e){g=!1,n.marker_.getDraggable()&&(l=!0,this.style.cursor=_),(n.marker_.getDraggable()||n.marker_.getClickable())&&(google.maps.event.trigger(n.marker_,"mousedown",e),h(e))}),google.maps.event.addDomListener(document,"mouseup",function(t){var i;if(l&&(l=!1,n.eventDiv_.style.cursor="pointer",google.maps.event.trigger(n.marker_,"mouseup",t)),g){if(a){i=n.getProjection().fromLatLngToDivPixel(n.marker_.getPosition()),i.y+=p,n.marker_.setPosition(n.getProjection().fromDivPixelToLatLng(i));try{n.marker_.setAnimation(google.maps.Animation.BOUNCE),setTimeout(v,1406)}catch(r){}}n.crossDiv_.style.display="none",n.marker_.setZIndex(e),s=!0,g=!1,t.latLng=n.marker_.getPosition(),google.maps.event.trigger(n.marker_,"dragend",t)}}),google.maps.event.addListener(n.marker_.getMap(),"mousemove",function(s){var _;l&&(g?(s.latLng=new google.maps.LatLng(s.latLng.lat()-t,s.latLng.lng()-i),_=n.getProjection().fromLatLngToDivPixel(s.latLng),a&&(n.crossDiv_.style.left=_.x+"px",n.crossDiv_.style.top=_.y+"px",n.crossDiv_.style.display="",_.y-=p),n.marker_.setPosition(n.getProjection().fromDivPixelToLatLng(_)),a&&(n.eventDiv_.style.top=_.y+p+"px"),google.maps.event.trigger(n.marker_,"drag",s)):(t=s.latLng.lat()-n.marker_.getPosition().lat(),i=s.latLng.lng()-n.marker_.getPosition().lng(),e=n.marker_.getZIndex(),r=n.marker_.getPosition(),o=n.marker_.getMap().getCenter(),a=n.marker_.get("raiseOnDrag"),g=!0,n.marker_.setZIndex(1e6),s.latLng=n.marker_.getPosition(),google.maps.event.trigger(n.marker_,"dragstart",s)))}),google.maps.event.addDomListener(document,"keydown",function(e){g&&27===e.keyCode&&(a=!1,n.marker_.setPosition(r),n.marker_.getMap().setCenter(o),google.maps.event.trigger(document,"mouseup",e))}),google.maps.event.addDomListener(this.eventDiv_,"click",function(e){(n.marker_.getDraggable()||n.marker_.getClickable())&&(s?s=!1:(google.maps.event.trigger(n.marker_,"click",e),h(e)))}),google.maps.event.addDomListener(this.eventDiv_,"dblclick",function(e){(n.marker_.getDraggable()||n.marker_.getClickable())&&(google.maps.event.trigger(n.marker_,"dblclick",e),h(e))}),google.maps.event.addListener(this.marker_,"dragstart",function(e){g||(a=this.get("raiseOnDrag"))}),google.maps.event.addListener(this.marker_,"drag",function(e){g||a&&(n.setPosition(p),n.labelDiv_.style.zIndex=1e6+(this.get("labelInBackground")?-1:1))}),google.maps.event.addListener(this.marker_,"dragend",function(e){g||a&&n.setPosition(0)}),google.maps.event.addListener(this.marker_,"position_changed",function(){n.setPosition()}),google.maps.event.addListener(this.marker_,"zindex_changed",function(){n.setZIndex()}),google.maps.event.addListener(this.marker_,"visible_changed",function(){n.setVisible()}),google.maps.event.addListener(this.marker_,"labelvisible_changed",function(){n.setVisible()}),google.maps.event.addListener(this.marker_,"title_changed",function(){n.setTitle()}),google.maps.event.addListener(this.marker_,"labelcontent_changed",function(){n.setContent()}),google.maps.event.addListener(this.marker_,"labelanchor_changed",function(){n.setAnchor()}),google.maps.event.addListener(this.marker_,"labelclass_changed",function(){n.setStyles()}),google.maps.event.addListener(this.marker_,"labelstyle_changed",function(){n.setStyles()})]},MarkerLabel_.prototype.onRemove=function(){var e;for(this.labelDiv_.parentNode.removeChild(this.labelDiv_),this.eventDiv_.parentNode.removeChild(this.eventDiv_),e=0;e=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(); }); var businessLat = 44.7079482; var businessLng = -63.5949783; var bizLatLng = new google.maps.LatLng(businessLat,businessLng); var theMap; var mapCenter; var zLevelHide = 16; var markersArr = []; var infowindow; var sitePlanOverlay; var markerData; var mapZoomStart = 15; var otherMarker = { url: '/themes/oceanyacht/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() { mapCenter = new google.maps.LatLng(businessLat,businessLng); var mapOptions = { zoom: mapZoomStart, center: mapCenter, styles: gmap_styles, scrollwheel: false, mapTypeControl: false, streetViewControl: false }; // Create a map object and specify the DOM element for display. theMap = new google.maps.Map(document.getElementById('map_canvas_full'), mapOptions); offsetMapCenter(theMap); addBusinessMarker(); addMarkers(markerData); var contentString = "

Ocean Yacht Sales

115 Joseph Zatzman Drive
Dartmouth, Nova Scotia B3B 1N3

" infowindow = new google.maps.InfoWindow({ content: contentString, maxWidth: 300, pixelOffset: new google.maps.Size(-10, -10) }); // make list of locations clickable $('.location-link').click(function(e) { e.preventDefault(); $this = $(this); var theID = $this.data('id'); console.log(theID); for (var i=0; i < markersArr.length; i++) { if (markersArr[i].markerID === theID) { google.maps.event.trigger(markersArr[i], 'click'); break; } } }); }; // initMap function addBusinessMarker() { var loadedmarker = new SVGMarker({ map: theMap, position: bizLatLng, icon: otherMarker, // custom marker info markerID : 'Ocean Yacht Sales', markerHeadline : 'Ocean Yacht Sales', markerSubhead : '', markerText : '

115 Joseph Zatzman Drive
Dartmouth, Nova Scotia B3B 1N3

', image : '', hasImage : false }); markersArr.push(loadedmarker); google.maps.event.addListener(loadedmarker, 'click', markerInfoWindow); } ///// addBusinessMarker function offsetMapCenter(map){ if ( $(window).width() > 768 ) { //var offsetXnew = -(window.innerWidth / 4); offsetXnew = 0; offsetYnew = 0; map.setCenter(mapCenter); map.panBy(offsetXnew,offsetYnew); } else { offsetYnew = 0; map.setCenter(mapCenter); map.panBy(0,offsetYnew); } }; $( window ).resize(function() { offsetMapCenter(theMap); }); 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.PAGETEXT[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) { console.log(this); 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); offsetMapCenter(theMap); } // 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": "#dae3e7" } ] }, { "elementType": "labels.text.fill", "stylers": [ { "color": "#523735" } ] }, { "featureType": "administrative", "elementType": "geometry.stroke", "stylers": [ { "color": "#c9b2a6" } ] }, { "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", "stylers": [ { "visibility": "off" } ] }, { "featureType": "poi", "elementType": "geometry", "stylers": [ { "color": "#dae3e7" } ] }, { "featureType": "poi", "elementType": "labels.text.fill", "stylers": [ { "color": "#93817c" } ] }, { "featureType": "poi.park", "elementType": "labels.text.fill", "stylers": [ { "color": "#447530" } ] }, { "featureType": "road", "elementType": "geometry", "stylers": [ { "color": "#f2f2f2" } ] }, { "featureType": "road.arterial", "elementType": "geometry", "stylers": [ { "color": "#fdfcf8" } ] }, { "featureType": "road.highway", "elementType": "geometry", "stylers": [ { "color": "#b2bdbd" } ] }, { "featureType": "road.highway.controlled_access", "elementType": "geometry.stroke", "stylers": [ { "color": "#889694" } ] }, { "featureType": "road.local", "elementType": "labels.text.fill", "stylers": [ { "color": "#806b63" } ] }, { "featureType": "transit.line", "elementType": "geometry", "stylers": [ { "color": "#fafafa" } ] }, { "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": "#acc7d7" } ] }, { "featureType": "water", "elementType": "labels.text.fill", "stylers": [ { "color": "#92998d" } ] } ];