Creating Infowindows on features loaded via loadGeoJson()
To get the infowindow to display on a click you need to call open().
// global infowindow
var infowindow = new google.maps.InfoWindow();
// When the user clicks, open an infowindow
map.data.addListener('click', function(event) {
var myHTML = event.feature.getProperty("Description");
infowindow.setContent("<div style='width:150px; text-align: center;'>"+myHTML+"</div>");
infowindow.setPosition(event.feature.getGeometry().get());
infowindow.setOptions({pixelOffset: new google.maps.Size(0,-30)});
infowindow.open(map);
});
code snippet:
var infowindow = new google.maps.InfoWindow();
function gotoFeature(featureNum) {
var feature = map.data.getFeatureById(features[featureNum].getId());
if (!!feature) google.maps.event.trigger(feature, 'changeto', {feature: feature});
else alert('feature not found!');
}
function initialize() {
// Create a simple map.
features=[];
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 4,
center: {lat: -28, lng: 137.883}
});
google.maps.event.addListener(map,'click',function() {
infowindow.close();
});
map.data.setStyle({fillOpacity:.8});
// Load a GeoJSON from the same server as our demo.
var featureId = 0;
google.maps.event.addListener(map.data,'addfeature',function(e){
if(e.feature.getGeometry().getType()==='Polygon'){
features.push(e.feature);
var bounds=new google.maps.LatLngBounds();
e.feature.getGeometry().getArray().forEach(function(path){
path.getArray().forEach(function(latLng){bounds.extend(latLng);})
});
e.feature.setProperty('bounds',bounds);
e.feature.setProperty('featureNum',features.length-1);
}
});
// When the user clicks, open an infowindow
map.data.addListener('click', function(event) {
var myHTML = event.feature.getProperty("Description");
infowindow.setContent("<div style='width:150px; text-align: center;'>"+myHTML+"</div>");
infowindow.setPosition(event.feature.getGeometry().get());
infowindow.setOptions({pixelOffset: new google.maps.Size(0,-30)});
infowindow.open(map);
});
map.data.addGeoJson(googleJSON);
}
google.maps.event.addDomListener(window, 'load', initialize);
var googleJSON = {
"type": "FeatureCollection",
"features": [
{
"id":0,
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71",
"Description": "the letter G"
},
"geometry": {
"type": "Point",
"coordinates": [123.61, -22.14]
}
},
{
"id":1,
"type": "Feature",
"properties": {
"letter": "o",
"color": "red",
"rank": "15",
"ascii": "111",
"Description": "the first letter o"
},
"geometry": {
"type": "Point",
"coordinates": [128.84, -25.76]
}
},
{
"id":2,
"type": "Feature",
"properties": {
"letter": "o",
"color": "yellow",
"rank": "15",
"ascii": "111",
"Description": "the second letter o"
},
"geometry": {
"type": "Point",
"coordinates": [131.87, -25.76]
}
},
{
"id":3,
"type": "Feature",
"properties": {
"letter": "g",
"color": "blue",
"rank": "7",
"ascii": "103",
"Description": "the letter g"
},
"geometry": {
"type": "Point",
"coordinates": [138.12, -25.04]
}
},
{
"id":4,
"type": "Feature",
"properties": {
"letter": "l",
"color": "green",
"rank": "12",
"ascii": "108",
"Description": "the letter l"
},
"geometry": {
"type": "Point",
"coordinates": [140.14,-21.04]
}
},
{
"id":5,
"type": "Feature",
"properties": {
"letter": "e",
"color": "red",
"rank": "5",
"ascii": "101",
"Description": "the letter e"
},
"geometry": {
"type": "Point",
"coordinates": [144.14, -27.41]
}
}
]
};
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?ext=.js"></script>
<div id="map-canvas"></div>
TampaCraig
Programming in SQL, PHP, Perl, and dabbling in Python, Javascript, AutoLISP. Heavy GIS data analysis and mapping experience. In depth ERP/Accounting system integration and dashboarding projects, performance metrics and KPI focus.
Updated on June 05, 2022Comments
-
TampaCraig almost 2 years
I apologize if this is basic, but I have very limited javascript knowledge.
I'm making a map that loads GeoJSON data that I created in ArcGIS reformatted to GeoJSON using ogr2ogr. I've got the map loading and showing the point markers from my GeoJSON file, and I've even got a
styleFeature()
function to set styling on the features based on their properties.The problem I'm having is trying to have infowindows pop up when a point feature is clicked on.
I have successfully used the code to set a event listener and update the contents of a div with the information from a clicked feature:
map.data.loadGeoJson('http://www.myurl.com/file.json'); map.data.setStyle(styleFeature); map.data.addListener('click', function(event) { var myHTML = event.feature.getProperty('Description'); document.getElementById('info-box').innerHTML = myHTML; });
What'd I'd like to do instead is have an event that launches an infowindow like this, which doesn't work:
map.data.loadGeoJson('http://www.myurl.com/file.json'); map.data.setStyle(styleFeature); map.data.addListener('click', function(event) { var myHTML = event.feature.getProperty('Description'); var infowindow = new google.maps.InfoWindow({content: myHTML}); });
My dataset consists of over a thousand points so hard-coding the infowindows doesn't work, and I haven't seen any examples that show how to create an array of infowindows as the features are looped through in the function called by
setStyle()
either.I know this has to do with my lack of understanding scope, events, and object arrays, but I'm just hitting a wall.
Any help would be appreciated.