{"id":5953,"date":"2014-04-10T21:41:50","date_gmt":"2014-04-10T21:41:50","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2014\/04\/10\/changing-marker-icons-while-using-markerclusterer-works-in-ie9-and-chrome-doesnt-work-in-firefox-or-earlier-ie-versions-collection-of-common-programming-errors\/"},"modified":"2014-04-10T21:41:50","modified_gmt":"2014-04-10T21:41:50","slug":"changing-marker-icons-while-using-markerclusterer-works-in-ie9-and-chrome-doesnt-work-in-firefox-or-earlier-ie-versions-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2014\/04\/10\/changing-marker-icons-while-using-markerclusterer-works-in-ie9-and-chrome-doesnt-work-in-firefox-or-earlier-ie-versions-collection-of-common-programming-errors\/","title":{"rendered":"Changing Marker Icons while using MarkerClusterer (Works in IE9 and Chrome, Doesn&#39;t Work in Firefox or earlier IE versions)-Collection of common programming errors"},"content":{"rendered":"<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/1e8b8e6dcf1fa131d7f1eaef8f3e34e9?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nben f.<\/p>\n<p>I have a public-facing site using GoogleMaps API v3 and the MarkerClusterer library. The page that is having a problem can be found here (http:\/\/www.mihomes.com\/Find-Your-New-Home\/San-Antonio-Homes). If you view this page in IE9 or Chrome, the correct pin icon images are shown, while in previous IE versions and Firefox different (and incorrect) pin icons.<\/p>\n<p><strong>IE9<\/strong> <img decoding=\"async\" src=\"http:\/\/i.stack.imgur.com\/5ExoL.jpg\" \/><\/p>\n<p><strong>Firefox 3.6.8<\/strong> <img decoding=\"async\" src=\"http:\/\/i.stack.imgur.com\/Uvyrk.png\" \/><\/p>\n<p>Here is the JavaScript code that generates the pins\/clustering:<\/p>\n<pre><code>$(function() {\n    var dl_grid = new DLGrid(\".GMapGrid\");\n    dl_grid.init();\n\n    var dl_map = new DLMap(\"#map\");\n    dl_map.init();\n\n    var markers = dl_grid.CollectMarkerData();\n    dl_map.LoadMarkers(markers);\n});\n\nvar DLIcons = new function() {\n    var me = this;\n\n    me.NormalIcon = \"\/images\/GoogleMapsIcons\/mi_icon_n.png\";\n    me.HoverIcon = \"\/images\/GoogleMapsIcons\/new_mi_icon_r.png\";\n    me.ClusterIcon = \"\/images\/GoogleMapsIcons\/mi_icon_n.png\";\n    me.ClusterHoverIcon = \"\/images\/GoogleMapsIcons\/new_mi_icon_r.png\";\n    me.SalesCenterIcon = \"\/images\/GoogleMapsIcons\/new_mi_icon_n2.gif\";\n    me.DesignCenterIcon = \"\/images\/GoogleMapsIcons\/mi_dc_n.png\";\n    me.DesignCenterHoverIcon = \"\/images\/GoogleMapsIcons\/mi_dc_r.png\";\n};\n\n\/\/Used for all functions relating to the table below the map\nvar DLGrid = function(grid_selector) {\n    \/\/Initialize variables\n    var me = this;\n    me.grid = $(grid_selector);\n\n    \/\/Initialize\n    me.init = function() {\n        setupTableSorting();\n        setupHoverEvents();\n        setupZoomButtons();\n    };\n\n    \/\/Setup the table sorting\n    var setupTableSorting = function() {\n        \/\/Init tablesorter plugin\n        var sort_options = { headers: { 0: { sorter: false }, 4: { sorter: false} } };\n        if (MI_DIVISION_LANDING_TABLE_SORT_OPTIONS != undefined) {\n            sort_options = MI_DIVISION_LANDING_TABLE_SORT_OPTIONS;\n        }\n        me.grid.tablesorter(sort_options);\n\n        \/\/As soon as the user sorts, remove all Community Groups\n        me.grid.bind(\"sortEnd\", function() {\n            me.grid.find(\"tr.communityGroup\").remove();\n            $(\"tr.groupedCommunity\").removeClass(\"groupedCommunity\").addClass(\"ungroupedCommunity\");\n            \/\/$(\"tr.ungroupedCommunity\").removeClass(\"ungroupedCommunity\");\n            me.grid.trigger(\"update\");\n        });\n    };\n\n    var highlightRow = function(marker) {\n        var markerId = (typeof (marker) == \"string\") ? marker : marker.jsonData.MarkerID;\n        $(me.grid).find(\"#\" + markerId).addClass(\"highlightedRow\");\n    };\n\n    \/\/ Bind to mouseover\/mouseout events and highlight the proper row in the table\n    \/\/ Trigger mouseover\/mouseout events when you hover over a row in the table \n    var setupHoverEvents = function() {\n        $(document).bind(\"MARKER_MOUSEOVER\", function(e, marker) {\n            $(me.grid).find(\"tbody tr.highlightedRow\").removeClass(\"highlightedRow\");\n            if (typeof (marker) != \"string\" &amp;&amp; marker.length != undefined) {\n                for (var i = 0; i &lt; marker.length; i++) {\n                    highlightRow(marker[i]);\n                }\n            }\n            else {\n                highlightRow(marker);\n            }\n        });\n        \/\/        $(document).bind(\"MULTIPLE_MARKER_MOUSEOVER\", function(e, markers) {\n        \/\/            $(me.grid).find(\"tbody tr.highlightedRow\").removeClass(\"highlightedRow\");\n        \/\/            for (var i = 0; i &lt; markers.length; i++) {\n        \/\/                var markerId = (typeof (markers[i]) == \"string\") ? markers[i] : markers[i].jsonData.MarkerID;\n        \/\/                $(me.grid).find(\"#\" + markerId).addClass(\"highlightedRow\");\n        \/\/            }\n        \/\/        });\n\n        $(me.grid).find(\"tbody tr\").mouseover(function() {\n            $(document).trigger(\"MARKER_MOUSEOVER\", [$(this).attr(\"id\")]);\n        });\n    };\n\n    \/\/ The zoom buttons next to each row should zoom to a marker and show it's info window\n    var setupZoomButtons = function() {\n        $(me.grid).find(\"tbody tr .zoom_link img\").click(function() {\n            $(document).trigger(\"MAP_SHOW_MARKER_POPUP_AND_ZOOM\", [$(this).parent().parent().attr(\"id\")]);\n        });\n    };\n\n    \/\/ Collect and parse the JSON data from the hidden 'data' column in the table\n    me.CollectMarkerData = function() {\n        var markers = [];\n        $.each(me.grid.find(\"tbody tr:not(.communityGroup)\"), function(i, row) {\n\n            var dataCell = $(row).children(\"td.data\");\n            var rawContent = $(dataCell).text();\n            var json_data = {};\n            if (rawContent.length &gt; 0) {\n                json_data = JSON.parse(rawContent);\n            }\n            json_data[\"MarkerID\"] = $(row).attr(\"id\");\n            markers.push(json_data);\n        });\n        return markers;\n    };\n};\n\n\/\/Used for all functions relating to map\nvar DLMap = function(map_div_selector) {\n    \/\/Initialize variables\n    var me = this;\n    me.mapDivSelector = map_div_selector;\n    me.mapObj;\n\n    me.init = function() {\n        setupMap();\n        bindHoverEvents();\n        setupPopupEvents();\n        setupDesignCenter();\n    };\n\n    \/\/Basic setup of map\n    var setupMap = function() {\n        me.mapObj = new DLGoogleMap(me.mapDivSelector);\n        me.mapObj.init(onMarkerMouseOver, showMarkerPopup);\n    };\n\n    \/\/ Add an array of markers (from json data) to the map\n    me.LoadMarkers = function(markers) {\n        $.each(markers, function(i, json_marker) {\n            me.mapObj.addMarker(json_marker);\n        });\n        me.mapObj.fitMapToMarkers();\n    };\n\n    var showMarkerPopup = function(markerJson, zoomToLocation) {\n        var source = $(\"#MapMarkerInfoWindow\").html();\n        var template = Handlebars.compile(source);\n        var content = template(markerJson);\n        var triggerKey = (zoomToLocation == true) ? \"MAP_SHOW_POPUP_AND_ZOOM\" : \"MAP_SHOW_POPUP\";\n        $(document).trigger(triggerKey, [content, markerJson.Lat, markerJson.Lng]);\n    };\n\n    var onMarkerMouseOver = function(markerJson) {\n        $(document).trigger(\"MARKER_MOUSEOVER\", markerJson);\n    }\n\n    \/\/ Highlight (or unhighlight) a marker when a mouseover\/mouseout event is triggered\n    var bindHoverEvents = function() {\n        $(document).bind(\"MARKER_MOUSEOVER\", function(e, marker) {\n            if (typeof (marker) != \"string\" &amp;&amp; marker.length != undefined) {\n                marker = marker[0];\n            }\n            me.mapObj.resetMarkerHighlighting();\n            me.mapObj.highlightMarker(marker);\n        });\n        \/\/        $(document).bind(\"MULTIPLE_MARKER_MOUSEOVER\", function(e, markers) {\n        \/\/            me.mapObj.resetMarkerHighlighting();\n        \/\/            if (markers[0].cluster != null) {\n        \/\/                me.mapObj.highlightCluster(markers[0]\n        \/\/            }\n        \/\/        });\n    };\n\n    var setupPopupEvents = function() {\n        $(document).bind(\"MAP_SHOW_POPUP\", function(e, content, lat, lng) {\n            me.mapObj.showPopup(content, lat, lng);\n        });\n        $(document).bind(\"MAP_SHOW_POPUP_AND_ZOOM\", function(e, content, lat, lng) {\n            me.mapObj.showPopup(content, lat, lng, true);\n        });\n        $(document).bind(\"MAP_SHOW_MARKER_POPUP\", function(e, marker) {\n            if (typeof (marker) == \"string\") {\n                marker = me.mapObj.findMarkerByID(marker);\n            }\n            showMarkerPopup(marker.jsonData);\n        });\n        $(document).bind(\"MAP_SHOW_MARKER_POPUP_AND_ZOOM\", function(e, marker) {\n            if (typeof (marker) == \"string\") {\n                marker = me.mapObj.findMarkerByID(marker);\n            }\n            showMarkerPopup(marker.jsonData, true);\n        });\n    };\n\n    var setupDesignCenter = function() {\n        var jsonText = $.trim($(\"#DesignCenterData\").text());\n        if (jsonText.length &gt; 5) {\n            var dcJson = JSON.parse(jsonText);\n            me.mapObj.addDesignCenterMarker(dcJson);\n        }\n    };\n};\n\nvar DLGoogleMap = function(map_div_selector) {\n    \/\/Initialize variables\n    var me = this;\n    me.mapDiv = $(map_div_selector);\n    me.gmap;\n    me.markers = [];\n    me.markerClusterer;\n    me.infoWindow;\n    me.onMouseOver;\n    me.onClick;\n    me.ZOOM_TO_LEVEL = 14;\n    me.highlightedMarkers = [];\n    me.designCenterMarker = null;\n\n    \/\/Extend Google Map Classes\n    google.maps.Marker.prototype.jsonData = null;\n    google.maps.Marker.prototype.iconImg = null;\n    google.maps.Marker.prototype.iconHoverImg = null;\n\n    me.init = function(onMouseOver, onClick) {\n        me.onMouseOver = onMouseOver;\n        me.onClick = onClick;\n        setupMap();\n        setupClustering();\n        setupDrivingDirectionLinks();\n    };\n\n    var setupMap = function() {\n        \/\/var latlng = new google.maps.LatLng(40.05, -82.95);\n        var myOptions = {\n            zoom: 14,\n            scrollwheel: false,\n            mapTypeId: google.maps.MapTypeId.TERRAIN\n        };\n        me.gmap = new google.maps.Map(document.getElementById(\"map\"), myOptions);\n        me.infoWindow = new google.maps.InfoWindow();\n    };\n\n    var setupDrivingDirectionLinks = function() {\n        $(\"a.gDirectionsLink\").live(\"click\", function(e) {\n            e.preventDefault();\n            $(\".gPopupInfo\").hide();\n            $(\".gDrivingDirections\").show();\n        });\n        $(\"a.gCloseDrivingDirections\").live(\"click\", function(e) {\n            e.preventDefault();\n            $(\".gDrivingDirections\").hide();\n            $(\".gPopupInfo\").show();\n        });\n    };\n\n    \/\/Add a single json marker to the map\n    me.addMarker = function(jsonMarker) {\n        var marker = new google.maps.Marker({\n            position: new google.maps.LatLng(jsonMarker.Lat, jsonMarker.Lng),\n            title: jsonMarker.Name\n        });\n\n        marker.jsonData = jsonMarker;\n        if (jsonMarker.HasSalesCenter == \"True\") {\n            marker.iconImg = DLIcons.SalesCenterIcon;\n        }\n        else {\n            marker.iconImg = DLIcons.NormalIcon;\n        }\n        marker.iconHoverImg = DLIcons.HoverIcon;\n        marker.icon = marker.iconImg;\n        google.maps.event.addListener(marker, 'click', function() {\n            me.onClick(marker.jsonData);\n        });\n        google.maps.event.addListener(marker, 'mouseover', function() { me.onMouseOver(marker) });\n        me.markerClusterer.addMarker(marker);\n        me.markers.push(marker);\n    };\n\n    \/\/Add an arbitrary marker\n    me.addDesignCenterMarker = function(dcJson) {\n        me.designCenterMarker = new google.maps.Marker({\n            position: new google.maps.LatLng(dcJson.Lat, dcJson.Lng),\n            title: \"Design Center\",\n            map: me.gmap\n        });\n        me.designCenterMarker.jsonData = dcJson;\n        me.designCenterMarker.iconImg = DLIcons.DesignCenterIcon;\n        me.designCenterMarker.iconHoverImg = DLIcons.DesignCenterHoverIcon;\n        me.designCenterMarker.icon = me.designCenterMarker.iconImg;\n        google.maps.event.addListener(me.designCenterMarker, 'mouseover', function() {\n            me.highlightMarker(me.designCenterMarker);\n        });\n        google.maps.event.addListener(me.designCenterMarker, 'mouseout', function() {\n            me.unHighlightMarker(me.designCenterMarker);\n        });\n        google.maps.event.addListener(me.designCenterMarker, 'click', function() {\n            me.infoWindow.close();\n            var source = $(\"#DesignCenterInfoWindow\").html();\n            var template = Handlebars.compile(source);\n            var content = template(me.designCenterMarker.jsonData);\n            me.showPopup(content, me.designCenterMarker.jsonData.Lat, me.designCenterMarker.jsonData.Lng);\n        });\n    };\n\n    me.resetMarkerHighlighting = function() {\n        for (var i = 0; i &lt; me.highlightedMarkers.length; i++) {\n            me.unHighlightMarker(me.highlightedMarkers[i]);\n        }\n        me.highlightedMarkers = [];\n    }\n\n    me.highlightMarker = function(m) {\n        var marker = (typeof (m) == \"string\") ? me.findMarkerByID(m) : m;\n        if (marker != null) {\n            if (marker.cluster == null || (marker.cluster.hasMultipleMarkers() == false)) {\n                marker.setIcon(marker.iconHoverImg);\n            }\n            else {\n                highlightCluster(marker.cluster);\n            }\n            me.highlightedMarkers.push(marker);\n        }\n    };\n    me.unHighlightMarker = function(m) {\n        var marker = (typeof (m) == \"string\") ? me.findMarkerByID(m) : m;\n        if (marker != null) {\n            if (marker.cluster == null || (marker.cluster.hasMultipleMarkers() == false)) {\n                marker.setIcon(marker.iconImg);\n            }\n            else {\n                unHighlightCluster(marker.cluster);\n            }\n        }\n    };\n    me.zoomAndShowPopup = function(content, lat, lng) {\n\n    };\n    me.showPopup = function(content, lat, lng, zoomToLocation) {\n        if (zoomToLocation == true) {\n            var adjustedLat = lat - (me.gmap.getZoom() * 0.01);\n            me.zoomToLocation(adjustedLat, lng);\n        }\n\n        me.infoWindow.setContent(content);\n        me.infoWindow.setPosition(new google.maps.LatLng(lat, lng));\n        me.infoWindow.open(me.gmap);\n    };\n    me.zoomToLocation = function(lat, lng) {\n        me.gmap.setZoom(me.ZOOM_TO_LEVEL)\n        me.gmap.setCenter(new google.maps.LatLng(lat, lng));\n    };\n    me.fitMapToMarkers = function() {\n        me.markerClusterer.fitMapToMarkers();\n    };\n\n\n    \/\/Setup the map 'clustering', so that nearby markers will cluster together to form 1 icon\n    var setupClustering = function() {\n        Cluster.prototype.iconImg = DLIcons.ClusterIcon;\n        Cluster.prototype.iconHoverImg = DLIcons.ClusterHoverIcon;\n\n        var mc_options = {\n            gridSize: 15,\n            maxZoom: 15,\n            zoomOnClick: false,\n            styles: [{ url: DLIcons.ClusterIcon, height: 30, width: 20, textColor: \"#fff\", textSize: 10}],\n            showMarkerCount: false,\n            onClusterAdded: onClusterAdded\n        };\n        me.markerClusterer = new MarkerClusterer(me.gmap, [], mc_options);\n\n        \/\/Setup Cluster Info Windows with a list of marker links\n        google.maps.event.addListener(me.markerClusterer, 'clusterclick', function(cluster) {\n            me.infoWindow.close();\n            var source = $(\"#MapClusterInfoWindow\").html();\n            var template = Handlebars.compile(source);\n            var markers = getClusterJsonMarkers(cluster);\n            var data = {\n                markers: markers\n            };\n            var content = template(data);\n            $(document).trigger(\"MAP_SHOW_POPUP\", [content, cluster.getCenter().lat(), cluster.getCenter().lng()]);\n        });\n\n        \/\/Setup Cluster marker highlighting\n        google.maps.event.addListener(me.markerClusterer, 'clustermouseover', function(cluster) {\n            me.resetMarkerHighlighting();\n            highlightCluster(cluster);\n            var cmarkers = cluster.getMarkers();\n            $(document).trigger(\"MARKER_MOUSEOVER\", [cmarkers]);\n        });\n\n        $(\".openMarkerPopup\").live(\"click\", function(e) {\n            e.preventDefault();\n            $(document).trigger(\"MAP_SHOW_MARKER_POPUP\", [$(this).attr(\"rel\")]);\n        });\n    };\n\n    var onClusterAdded = function(cluster) {\n        if (clusterHasSalesCenter(cluster)) {\n            cluster.iconImg = DLIcons.SalesCenterIcon;\n            cluster.updateIconUrl(cluster.iconImg);\n        }\n        else {\n            cluster.iconImg = DLIcons.ClusterIcon;\n        }\n    };\n\n    var clusterHasSalesCenter = function(cluster) {\n        if ((cluster == undefined) || (cluster.markers_ == undefined)) {\n            return false;\n        }\n        for (var i = 0; i &lt; cluster.markers_.length; i++) {\n            if (cluster.markers_[i].jsonData.HasSalesCenter == \"True\") {\n                return true;\n            }\n        }\n        return false;\n    };\n\n    var highlightCluster = function(cluster) {\n        \/\/me.highlightedMarkers = [];\n        \/\/        for (var i = 0; i &lt; cluster.markers_.length; i++) {\n        \/\/            me.highlightedMarkers.push(cluster.markers_[i]);\n        \/\/        }\n        cluster.updateIconUrl(cluster.iconHoverImg);\n    };\n\n    var unHighlightCluster = function(cluster) {\n        cluster.updateIconUrl(cluster.iconImg);\n    };\n\n    var getClusterJsonMarkers = function(cluster) {\n        var jsonMarkers = [];\n        var gmarkers = cluster.getMarkers();\n        for (var i = 0; i &lt; gmarkers.length; i++) {\n            jsonMarkers.push(gmarkers[i].jsonData);\n        }\n        return jsonMarkers;\n    };\n\n    \/\/ Get a marker on the map given it's MarkerID\n    me.findMarkerByID = function(markerId) {\n        for (var i = 0; i &lt; me.markers.length; i++) {\n            if (me.markers[i].jsonData.MarkerID == markerId) {\n                return me.markers[i];\n                break;\n            }\n        }\n        return null;\n    };\n};\n<\/code><\/pre>\n<p>This website is built using .NET Framework 3.5 and ASP.NET WebForms.<\/p>\n<p>Thanks for the assistance.<\/p>\n<\/li>\n","protected":false},"excerpt":{"rendered":"<p>ben f. I have a public-facing site using GoogleMaps API v3 and the MarkerClusterer library. The page that is having a problem can be found here (http:\/\/www.mihomes.com\/Find-Your-New-Home\/San-Antonio-Homes). If you view this page in IE9 or Chrome, the correct pin icon images are shown, while in previous IE versions and Firefox different (and incorrect) pin icons. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-5953","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/5953","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=5953"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/5953\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=5953"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=5953"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=5953"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}