Note that there are some explanatory texts on larger screens.

plurals
  1. POinfowindow not working
    text
    copied!<p>I have been trying to figure this out for several hours but have had no luck. Hopefully somone can give me a solution.</p> <p>I have several polygons that I would like to display their value from siteName when clicking on them. I am not getting an error, but I am also not getting the info window to display.</p> <p>Thank you in advance for your help.</p> <pre><code> &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;p id="demo"&gt;coordinates&lt;/p&gt; &lt;/br&gt; &lt;p id="coords"&gt;coordinates&lt;/p&gt; &lt;style&gt; html, body, #map_canvas { margin: 0; padding: 0; height: 100%; } &lt;/style&gt; &lt;script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=visualization,MVCObject"&gt; &lt;/script&gt; &lt;script&gt; var map; function initialize() { var kansas_city = new google.maps.LatLng(39.00495613,-94.64780668); var mapOptions = { zoom: 10, center: kansas_city, mapTypeId: google.maps.MapTypeId.TERRAIN }; map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); // Create a &lt;script&gt; tag and set the geoJSON file as the source. var script = document.createElement('script'); // (In this example we use a locally stored copy instead.) script.src = 'sector.json'; document.getElementsByTagName('head')[0].appendChild(script); } // Loop through the results array and place a marker for each // set of coordinates. var siteNames; window.sector_callback = function(results) { for (var i = 0, len = results.features.length; i &lt; len; i++) { var coords = results.features[i].geometry.coordinates[0]; siteNames = results.features[i].properties.Name; // added for site names var path = []; for ( var j = 0, len2 = coords.length; j &lt; len2; j++ ){ // pull out each set of coords and create a map object path.push(new google.maps.LatLng(coords[j][1], coords[j][0])); } var polygons = new google.maps.Polygon({ path: path, map: map }); var contentString = siteNames; var infowindow = new google.maps.InfoWindow({ }); google.maps.event.addListener(polygons, 'click', function() { infowindow.open(map,polygons); content: contentString }); google.maps.event.addListener(polygons, 'mouseover', function() { var currentPolygon = this; currentPolygon.setOptions({ // setOptions is a method and properties below fillOpacity: 0.45, fillColor: "#FF0000", }) }); google.maps.event.addListener(polygons, 'mouseout', function() { var currentPolygon = this; currentPolygon.setOptions({ fillOpacity: 0.35, fillColor: "#000000" }) }); } } &lt;/script&gt; &lt;/head&gt; &lt;body onload="initialize()"&gt; &lt;div id="map_canvas"&gt;&lt;/div&gt; &lt;/body&gt; </code></pre> <p></p>
 

Querying!

 
Guidance

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