Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Check out the following. What happens is that i create an initial info window with minimal info (see getInfoWindowHtml). The gmap.openInfoWindowHtml call provides for a callback which gets called after the infowindow opens. In that callback, make your ajax call and reset the window contents. There are two issues though:</p> <p>i couldnt get the window to resize exactly to the returned content, so i just used a standard size (see the new GSize(300, 150) in the anonymous function returned by markerClickFn)</p> <ol start="2"> <li><p>Im my case, if a marker is near the extremes of the image bounds, parts of the info window would be clipped. IOW, the map does not recenter to include the infowindow. I can probably fix this, but it has not been a pressing issue. </p> <pre><code>function markerClickFn(venue, latlng) { return function() { var title = venue.Name; var infoHtml = getInfoWindowHtml(venue); // need to zoom in gmap.setZoom(13); gmap.openInfoWindowHtml(latlng, infoHtml, { onOpenFn: function() { var iw = gmap.getInfoWindow(); iw.reset(iw.getPoint(), iw.getTabs(), new GSize(300, 150), null, null); $("#info-" + venue.Id.toString()).load("/Venue/MapInfoWindow/" + venue.Id); } } ); }; } function getSidebarHtml(venue) { var url = "/Venue/Details/" + venue.Id; // actually should bring up infowindow var html = "&lt;li id='venue-" + venue.Id + "'&gt;\n"; html = html + venue.Name + "\n"; //html = html + "&lt;p class='description'&gt;" + trunc(venue.Description, 200) + "&lt;/p&gt;\n"; html = html + "&lt;/li&gt;"; return html; } function getInfoWindowHtml(venue) { var url = "/Venue/Details/" + venue.Id; // actually should bring up infowindow var html = "&lt;div id='info-" + venue.Id + "'&gt;&lt;a href='" + url + "' class='url summary'&gt;" + venue.Name + "&lt;/a&gt;&lt;/div&gt;\n"; return html; } function addVenueMarker(venue) { var icon = new GIcon(G_DEFAULT_ICON); icon.image = "http://chart.apis.google.com/chart?cht=mm&amp;amp;chs=24x32&amp;amp;chco=FFFFFF,008CFF,000000&amp;amp;ext=.png"; var latLng = new GLatLng(venue.Lat, venue.Lng); var marker = new GMarker(latLng, { icon: icon }); var fn = markerClickFn(venue, latLng); GEvent.addListener(marker, "click", fn); marker.event_ = venue; marker.click_ = fn; venue.marker_ = marker; markers.push(marker); return marker; } </code></pre></li> </ol>
 

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