Databases
StackOverflow2013
Postsdbo
POGoogle Maps API v3 Click events not passed on by custom overlays
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGoogle Maps API v3 Click events not passed on by custom overlays
    text
    copied!<p>I've been making use of <a href="http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.0.2/docs/examples.html" rel="nofollow noreferrer">InfoBox</a> to draw custom overlays on my GoogleMap. In short I load from XML lat longs etc, draw pins on the map, and show a custom infowindow. All good, however I wanted to use my own content instead of pins for markers (small previews of the content), so I created them using InfoBox as a map label. Then in turn on clicking them I open up an InfoBox as a InfoWindow replacement.</p> <p>The trouble is, for the life of me I cannot get an event listener to pass the click on the pin replacements. The event listener just doesn't pick it up..</p> <pre><code> // This works perfectly when var marker = new google.maps.Marker({ // but registers nothing when var marker = new InfoBox(flookLabel); google.maps.event.addListener(marker, 'click', function() { ib.close(); ib = new InfoBox(cardDisplay); ib.open(flookMap, marker); alert('yes'); }); </code></pre> <p>In order to see everything in context I putting in my entire function here:</p> <pre><code> var flookMap = { bounds: null, map: null }; var geocoder; var centerChangedLast; var reverseGeocodedLast; var currentReverseGeocodeResponse; blockLocate = false; var markersArray = []; var point; ib = new InfoBox(); // get the results XML back and draw it on the map loadCards = function(filename) { setStatus("Waiting for response"); $.get(filename, function(xml){ var results = $(xml).find("card").length; setStatus("Server gave me " +results+ " cards"); if (results == 0){ setStatus("I got no cards for you dude"); } else { $(xml).find("card").each(function(){ var name = $(this).find('name').text(); var address = $(this).find('placename').text(); var imageUrl = $(this).find('imageUrl').text(); // create a new LatLng point for the marker var lat = $(this).find('lat').text(); var lng = $(this).find('lng').text(); var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng)); // extend the bounds to include the new point //flookMap.fitBounds(results[0].geometry.viewport); flookMap.bounds.extend(point); var labelText = "test"; var flookLabel = { content: labelText ,boxStyle: { border: "5px solid black" ,textAlign: "center" ,fontSize: "8pt" ,width: "50px" } ,disableAutoPan: true ,pixelOffset: new google.maps.Size(-25, 0) ,position: point ,closeBoxURL: "" ,isHidden: false ,pane: "mapPane" ,enableEventPropagation: true }; var marker = new InfoBox(flookLabel); marker.open(flookMap); markersArray.push(marker); /* add the marker itself var marker = new google.maps.Marker({ position: point, map: flookMap }); setStatus('Drawing pin' + point); markersArray.push(marker); */ // create the tooltip and its text var boxText = document.createElement("div"); boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: rgba(0,0,0,0.5); padding: 5px; -webkit-box-shadow: 0px 3px 4px rgba(0,0,0,0.2); -webkit-border-radius: 8px;"; boxText.innerHTML = '&lt;p&gt;'+name+'&lt;/p&gt;&lt;br /&gt;'+address+'&lt;br /&gt;&lt;img width="460" height="300" src="'+imageUrl+'" /&gt;'; var cardDisplay = { content: boxText ,disableAutoPan: false ,maxWidth: 0 ,pixelOffset: new google.maps.Size(-250, -400) ,zIndex: null ,boxStyle: { // background: "url('http://www.garylittle.ca/map/artwork/tipbox.gif') no-repeat" opacity: 1 ,width: "500px" ,height: "400px" } ,closeBoxMargin: "10px 2px 2px 2px" ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif" ,infoBoxClearance: new google.maps.Size(1, 1) ,isHidden: false ,pane: "floatPane" ,enableEventPropagation: false }; // add a listener to open the tooltip when a user clicks on one of the markers google.maps.event.addListener(marker, 'click', function() { ib.close(); ib = new InfoBox(cardDisplay); ib.open(flookMap, marker); alert('yes'); }); }); // Fit the map around the markers we added: flookMap.fitBounds(flookMap.bounds); setStatus("Zooming map to new bounds:" +flookMap.bounds); } }); } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload