I am working on a Google map project where markers and info boxes dynamically populate when the user clicks on the map. However, I now need the info box to be loaded initially when the map loads, without requiring a click event. I have tried writing some code for this purpose but it is not functioning as expected. Any help would be greatly appreciated.
$scope.map = {
center: {
latitude: 0,
longitude: 0
},
zoom: 1,
mapTypeId: google.maps.MapTypeId.ROADMAP,
control: {}
};
// place a marker
$scope.markers = [];
function setMarker(lat, long, title, content) {
var marker = {
id: $scope.markers.length+1,
coords: {
latitude: lat,
longitude: long
},
options: {
title: title,
icon: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png'
},
events: {
click: function(marker, eventName, args) {
// close window if not undefined
var infoWindow;
if (infoWindow !== void 0) {
infoWindow.close();
}
// create new window
var infoWindowOptions = {
content: content
};
infoWindow = new google.maps.InfoWindow(infoWindowOptions);
infoWindow.open($scope.map, marker);
}
}
};
$scope.markers.push(marker);
};
Here is my updated code to load the info box when the map loads, replacing the initial click event method:
window.onload = function(e){
var infoWindow;
if (infoWindow !== void 0) {
infoWindow.close();
}
// create new window
var infoWindowOptions = {
content: content
};
infoWindow = new google.maps.InfoWindow(infoWindowOptions);
infoWindow.open($scope.map, marker);
}