I have a google map that I am populating with real estate listings from a database. I have set it up to refresh the listings when the map is panned or zoomed. I am using the dragend & zoom_changed events to accomplish this so that it is not automatically triggered when the map shifts to open an infowindow. I have also added a list of the properties to the side which, when hovered, will open the corresponding marker's infowindow. Finally I have added a click event to the markers to also open the infowindow.
The problem I am having is that when I have the mouse over the map, it always shows the "ready to drag" hand cursor and I have to click on a pin to have it switch to the pointer and then click it a second time to actually open the infowindow. Marker mouseenter and mouseout events do not even register for the same reason. I have tried turning off listeners and different effects, but nothing seems to get rid of whatever it is that the mouse is interacting with by default on the map.
I apologize for asking you to look through my code, but I am at a loss as to what the issue is. Relevant javascript below. You can see the site at http://staging.obs.jacksonholehost.com/properties/. Thanks in advance for any ideas.
function addMapMarkers(map, bounds, markers, alternateMarkers, markersIcon, infowindow ) { jQuery('.property-details','#property-list').each(function() { var infowindowWidth = parseInt(jQuery('#map-settings').data('infowindow-width')); //var iconHeight = parseInt(jQuery('#map-settings').data('icon-height')); //var iconWidth = parseInt(jQuery('#map-settings').data('icon-width')); var $this = jQuery(this); if($this.data('latitude') === '') {return;} var contentString = $this.find('.infowindow-contents').html(); var markerLatLng = new google.maps.LatLng($this.data('latitude'), $this.data('longitude')); var image = { url: $this.data('marker-icon'), scaledSize: new google.maps.Size(parseInt($this.data('marker-icon-width')),parseInt($this.data('marker-icon-height'))), }; //var image = customIcon($this.data('count'), 1, $this.data('marker-icon'), iconHeight, iconWidth, iconHeight, iconWidth, 10, 7, 7); var altImage = { url: $this.data('marker-icon-alt'), scaledSize: new google.maps.Size(parseInt($this.data('marker-icon-alt-width')),parseInt($this.data('marker-icon-alt-height'))), }; //var altImage = customIcon($this.data('count'), 1, $this.data('marker-icon-alt'), iconHeight, iconWidth, iconHeight, iconWidth, 10, 7, 7); var marker = new google.maps.Marker({ position: markerLatLng, map: map, title : $this.data('pin-title'), brief: jQuery(this).children(".marker_brief").text(), icon: image }); google.maps.event.addListener(marker, 'click', function() { contentString = contentString.replace(/(<span class="src">([^
The problem I am having is that when I have the mouse over the map, it always shows the "ready to drag" hand cursor and I have to click on a pin to have it switch to the pointer and then click it a second time to actually open the infowindow. Marker mouseenter and mouseout events do not even register for the same reason. I have tried turning off listeners and different effects, but nothing seems to get rid of whatever it is that the mouse is interacting with by default on the map.
I apologize for asking you to look through my code, but I am at a loss as to what the issue is. Relevant javascript below. You can see the site at http://staging.obs.jacksonholehost.com/properties/. Thanks in advance for any ideas.
function addMapMarkers(map, bounds, markers, alternateMarkers, markersIcon, infowindow ) { jQuery('.property-details','#property-list').each(function() { var infowindowWidth = parseInt(jQuery('#map-settings').data('infowindow-width')); //var iconHeight = parseInt(jQuery('#map-settings').data('icon-height')); //var iconWidth = parseInt(jQuery('#map-settings').data('icon-width')); var $this = jQuery(this); if($this.data('latitude') === '') {return;} var contentString = $this.find('.infowindow-contents').html(); var markerLatLng = new google.maps.LatLng($this.data('latitude'), $this.data('longitude')); var image = { url: $this.data('marker-icon'), scaledSize: new google.maps.Size(parseInt($this.data('marker-icon-width')),parseInt($this.data('marker-icon-height'))), }; //var image = customIcon($this.data('count'), 1, $this.data('marker-icon'), iconHeight, iconWidth, iconHeight, iconWidth, 10, 7, 7); var altImage = { url: $this.data('marker-icon-alt'), scaledSize: new google.maps.Size(parseInt($this.data('marker-icon-alt-width')),parseInt($this.data('marker-icon-alt-height'))), }; //var altImage = customIcon($this.data('count'), 1, $this.data('marker-icon-alt'), iconHeight, iconWidth, iconHeight, iconWidth, 10, 7, 7); var marker = new google.maps.Marker({ position: markerLatLng, map: map, title : $this.data('pin-title'), brief: jQuery(this).children(".marker_brief").text(), icon: image }); google.maps.event.addListener(marker, 'click', function() { contentString = contentString.replace(/(<span class="src">([^