different content in multiple infowindows for google maps api v3 - google-maps

I am working on a project using google maps api v3 and am trying to make it so when a marker is clicked on a infowindow appears. I have accomplished this but now what i want is different content to be displayed when different markers are clicked on which i can't seem to figure out. any help is appreciated. thanks!
function initialize() {
var locations = [
['Phi Delta Theta', 39.511747,-84.735117],
['Pi Kappa Alpha', 39.511776, -84.735684],
['Sigma Nu', 39.513921, -84.735159],
['Sigma Alpha Epsilon', 39.514332, -84.734956],
['Beta Theta Pi', 39.5107519, -84.738549]
];
var myLatlng = new google.maps.LatLng(39.511747,-84.735117);
var mapOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var contentString = '<div id="content">'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}

Here is the answer that does what you want, however it allows to open multiple infoWindow at once.
The point of it is to define multiple instances of windowinfo.
Instead of:
var infowindow = new google.maps.InfoWindow({
content: contentString
});
....
for (i = 0; i < locations.length; i++) {
}
do smth like this:
for (i = 0; i < locations.length; i++) {
var infowindow = new google.maps.InfoWindow({
content: contentString
});
}
That way you will define multiple markers, each with different content.

Related

Show all infowindows open

I'm trying to have custom infowindows float above markers, however I noticed that only one marker can be opened at any one time. Is there a workaround to this?
Here's the code I have produced at the moment:
downloadUrl("AllActivityxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("id");
var address = markers[i].getAttribute("id");
var type = markers[i].getAttribute("venue_type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng"))
);
var infowindow = new google.maps.InfoWindow();
var html = "<b>" + point + "</b>hello <br/>" + type;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
markersArray.push(marker);
bindInfoWindow(marker, map, infoWindow, html);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(html);
infowindow.open(map,marker);
});
}
});
And when you check this map, notice that I cannot open more than 2 infowindows at once. Why is that?
There is no limitation implicit to the Google Maps API v3 that makes only one InfowWindow available at a time. You need to write your code to do that. If you want an InfoWindow for each marker, make one.
Some thing like (not tested):
function createMarker(latlng, html) {
var contentString = html;
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
}

Google Maps setMap is not a function

i am dealing with the Problem that my google Maps Page shows me an error in Firebug.
The clearLocations() function is fired when i search within my dealer map.
But this error is showing up: "markers[i].setMap is not a function"
Does anyone know how to solve that problem? I searched in several forums and groups, but i am using a google.maps.Marker array so i can't find my problem.
Thanks in advance!
Code ( clearLocations() ):
function clearLocations() {
infoWindow.close();
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers.length = 0;
dealers.innerHTML = "";
}
Code ( load() ):
function load() {
map = new google.maps.Map(document.getElementById("map_canvas"), {
//center: new google.maps.LatLng(51.30174, 10.60824),
zoom: 10,
mapTypeId: 'roadmap',
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
});
infoWindow = new google.maps.InfoWindow();
dealers = document.getElementById("dealers");
infoWindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i][1], markers[i][2]),
map: map
});
var pos = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(pos);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(markers[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
map.fitBounds(bounds);
}
So, if I understand correctly, the Markers array is an array of LatLongs? Or is it an array of type google.maps.Marker? If it's the former then there won't be any maps functions available to it as it's not a Google maps marker.
An option might be to make an array of the markers you place on the map like this.
var marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i][1], markers[i][2]),
map: map
});
mapMarkers[i] = marker;
And then call
mapMarkers[i].setMap(null)
you can try this - just
console.log('=>'+markers.length);
for (var i = 0; i < markers.length; i++) {
console.log('===>'+markers[i]);
markers[i] = null;
}
markers = [];
console.log('==>'+markers.length);

Infowindow opens only for last JSON record

I am trying to display InfoWindow but the problem is that I'm only able to see the last record of JSON.
onmouseover shows the title of other 2 markers but their InfoWindows are not opening. Please suggest how to fix this code
var infoWindow = new google.maps.InfoWindow();
for (var i = 0, length = json.length; i < length; i++) {
var data = json[i],
latLng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: data.title
});
}
(function(marker, data) {
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
Never mind, I was very dumb to not see it first. I was adding click event after the loop. All I needed to do was this.
var infoWindow = new google.maps.InfoWindow();
for (var i = 0, length = json.length; i < length; i++) {
var data = json[i],
latLng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: data.title
});
(function(marker, data) {
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
i.e. closure had to be inside the loop

GoogleMap: Multiple Markers showing same InfoWindow and not clickable on Mobile Devices

Problem with "Multiple Markers InfoWindows" on Google Map API.
There are 2 problems:
Markers are showing SAME InfoWindow
Again, Markers are NOT CLICKABLE on mobile devices.
Here is my code:
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(60.037760, -44.100494),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var locations = [
['Alvin', 60.074433, -44.011917],
['Sirius', 60.037760, -44.100494]
];
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
var infowindow = new google.maps.InfoWindow({content: locations[i][0]});
new google.maps.event.addListener( marker, 'click', function() {
infowindow.open(map,this);
});
}
Create global reference to infowindow.
var infowindow = new google.maps.InfoWindow();
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
new google.maps.event.addListener( marker, 'click', function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map,this);
});
}

InfoWindow on Marker using MarkerClusterer

This is my html code. I've try anything to add an infowindow on the markers but it don't wanna work. My data is loading from the "Alle_Ortswahlen.page1.xml" file.
Do anyone have an idea how can I add infoWindow to each marker?
<script type="text/javascript">
google.load('maps', '3', {
other_params: 'sensor=false'
});
google.setOnLoadCallback(initialize);
function initialize() {
var stack = [];
var center = new google.maps.LatLng(48.136, 11.586);
var options = {
'zoom': 5,
'center': center,
'mapTypeId': google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), options);
GDownloadUrl("Alle_Ortswahlen.page1.xml", function(doc) {
var xmlDoc = GXml.parse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("ROW");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("Field4"));
var lng = parseFloat(markers[i].getAttribute("Field6"));
var marker = new google.maps.Marker({
position : new google.maps.LatLng(lat, lng),
map: map,
title:"This is a marker"
});
stack.push(marker);
}
var mc = new MarkerClusterer(map,stack);
});
}
</script>
Before the for cycle, make an empty infowindow object.
var infowindow = new google.maps.InfoWindow();
Than in the for cycle, after the marker, add an event listener, like this:
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent("You might put some content here from your XML");
infowindow.open(map, marker);
}
})(marker, i));
There is some closure magic happening when passing the callback argument to the addListener method. If you are not familiar with it, take a look at here:
Mozilla Dev Center: Working with Closures
So, your code should look something like this:
google.load('maps', '3', {
other_params: 'sensor=false'
});
google.setOnLoadCallback(initialize);
function initialize() {
var stack = [];
var center = new google.maps.LatLng(48.136, 11.586);
var options = {
'zoom': 5,
'center': center,
'mapTypeId': google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), options);
var infowindow = new google.maps.InfoWindow();
GDownloadUrl("Alle_Ortswahlen.page1.xml", function(doc) {
var xmlDoc = GXml.parse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("ROW");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("Field4"));
var lng = parseFloat(markers[i].getAttribute("Field6"));
var marker = new google.maps.Marker({
position : new google.maps.LatLng(lat, lng),
map: map,
title:"This is a marker"
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent("You might put some content here from your XML");
infowindow.open(map, marker);
}
})(marker, i));
stack.push(marker);
}
var mc = new MarkerClusterer(map,stack);
});
}
So what you need to do is add some code, inside your for-loop, associating an infowindow onclick event handler with each marker. I'm assuming you only want to have 1 infowindow showing at a time, i.e. you click on a marker, the infowindow appears with relevant content. If you then click on another marker, the first infowindow disappears, and a new one reappears attached to the other marker. Rather than having multiple infowindows all visible at the same time.
GDownloadUrl("Alle_Ortswahlen.page1.xml", function(doc) {
var xmlDoc = GXml.parse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("ROW");
// just create one infowindow without any content in it
var infowindow = new google.maps.InfoWindow({
content: ''
});
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("Field4"));
var lng = parseFloat(markers[i].getAttribute("Field6"));
var marker = new google.maps.Marker({
position : new google.maps.LatLng(lat, lng),
map: map,
title:"This is a marker"
});
// add an event listener for this marker
google.maps.event.addListener(marker , 'click', function() {
// assuming you have some content in a field called Field123
infowindow.setContent(markers[i].getAttribute("Field123"));
infowindow.open(map, this);
});
stack.push(marker);
}
var mc = new MarkerClusterer(map,stack);
});