Google maps showing same info window for all markers - google-maps

I'm looping over an array of properties and create multiple markers on a google map. I'd like each of these markers to have their own info window content. My code looks right to me but it's not working. Can somebody point me in the right direction.
Here is my current code
for (var i = startRow; i < AMdata.property.length; i++) {
var propertyDetails = AMdata.property[i];
var latLng = new google.maps.LatLng(propertyDetails.LATITUDE, propertyDetails.LONGITUDE);
bounds.extend(latLng);
var marker = new google.maps.Marker({
position: latLng,
title: propertyDetails.NAME,
icon: outIcon
});
// 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('<div class="infowindow"><div class="panel-image listing-img"><img style="max-height:115px;" width="100%" src="' + propertyDetails.THUMBNAIL + '"></div><p>' + propertyDetails.NAME + '</p></div>');
infowindow.open(map, this);
});
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);
map.fitBounds(bounds);

try this way :
for (var i = startRow; i < AMdata.property.length; i++) {
var propertyDetails = AMdata.property[i];
var latLng = new google.maps.LatLng(propertyDetails.LATITUDE, propertyDetails.LONGITUDE);
bounds.extend(latLng);
var marker = new google.maps.Marker({
position: latLng,
title: propertyDetails.NAME,
icon: outIcon
});
// add an event listener for this marker
k = markers.push(marker);
google.maps.event.addListener(markers[k-1] , 'click', function(propertyDetail) {
// assuming you have some content in a field called Field123
infowindow.setContent('<div class="infowindow"><div class="panel-image listing-img"><img style="max-height:115px;" width="100%" src="' + propertyDetails.THUMBNAIL + '"></div><p>' + propertyDetails.NAME + '</p></div>');
infowindow.open(map, this);
});
}
var markerCluster = new MarkerClusterer(map, markers);
map.fitBounds(bounds);

Related

Add custom image (or marker color) to markers (using markerCluster)

Can someone please help me how to bind a custom image marker to this script?
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&v=3"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<script type="text/javascript" src="scripts/downloadxml.js"></script>
<style type="text/css">
html, body { height: 100%; }
</style>
<script type="text/javascript">
//<![CDATA[
// this variable will collect the html which will eventually be placed in the side_bar
var side_bar_html = "";
// arrays to hold copies of the markers and html used by the side_bar
// because the function closure trick doesnt work there
var gmarkers = [];
// global "map" variable
var map = null;
var markerclusterer = null;
// A function to create the marker and set up the event window function
function createMarker(latlng, name, html) {
var contentString = html;
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);
});
// save the info we need to use later for the side_bar
gmarkers.push(marker);
// add a line to the side_bar html
side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
}
// This function picks up the click and opens the corresponding info window
function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
function initialize() {
// create the map
var myOptions = {
zoom: 7,
center: new google.maps.LatLng(52.13263,5.29127),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Read the data from example.xml
downloadUrl("dataxml.cfm", function(doc) {
var xmlDoc = xmlParse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var marker_image = parseFloat(markers[i].getAttribute("markerimage"));
var image = {
url: marker_image,
size: new google.maps.Size(71, 132),
origin: new google.maps.Point(0, 0),
scaledSize: new google.maps.Size(71, 132)
};
var point = new google.maps.LatLng(lat,lng);
var id = markers[i].getAttribute("id");
var country = markers[i].getAttribute("country");
var html="<b>"+country+"</b><br><span style='color:white'>"+id+"</span>";
// create the marker
var marker = createMarker(point,country+" "+id,html);
}
markerCluster = new MarkerClusterer(map, gmarkers);
});
}
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50)
});
// This Javascript is based on code provided by the
// Community Church Javascript Team
// http://www.bisphamchurch.org.uk/
// http://econym.org.uk/gmap/
// from the v2 tutorial page at:
// http://econym.org.uk/gmap/basic3.htm
//]]>
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map_canvas" style="width: 752px; height: 600px"></div>
</body>
</html>
The XML is simple:
<markers>
<marker markerimage="https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png" id="value" lat="value" lng="value" country="value" />
I have tried to add "icon: image" to the create marker part, but I can't figured it out.I have tried to add "icon: image" to the create marker part, but I can't figured it out.
You need to pass the custom icon into the createMarker function:
// create the marker
var marker = createMarker(point, country + " " + id, html, marker_image);
updated createMarker function:
// A function to create the marker and set up the event window function
function createMarker(latlng, name, html, icon) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
icon: icon,
// map: map,
zIndex: Math.round(latlng.lat() * -100000) << 5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
// save the info we need to use later for the side_bar
gmarkers.push(marker);
// add a line to the side_bar html
side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length - 1) + ')">' + name + '<\/a><br>';
}
proof of concept fiddle
code snippet:
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(40.735657, -74.1723667),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Read the data from dataxml.cfm
// downloadUrl("dataxml.cfm", function(doc) {
var xmlDoc = xmlParse(xmlData);
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var marker_image = markers[i].getAttribute("markerimage");
var image = {
url: marker_image,
size: new google.maps.Size(71, 132),
origin: new google.maps.Point(0, 0),
scaledSize: new google.maps.Size(71, 132)
};
var point = new google.maps.LatLng(lat, lng);
var id = markers[i].getAttribute("id");
var country = markers[i].getAttribute("country");
var html = "<b>" + country + "</b><br><span style='color:blue'>" + id + "</span>";
// create the marker
var marker = createMarker(point, country + " " + id, html, marker_image);
}
markerCluster = new MarkerClusterer(map, gmarkers);
// });
}
var infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150, 50)
});
// A function to create the marker and set up the event window function
function createMarker(latlng, name, html, icon) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
icon: icon,
zIndex: Math.round(latlng.lat() * -100000) << 5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
// save the info we need to use later for the side_bar
gmarkers.push(marker);
// add a line to the side_bar html
side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length - 1) + ')">' + name + '<\/a><br>';
}
// global variables
var side_bar_html = "";
var gmarkers = [];
var map = null;
var markerclusterer = null;
// This function picks up the click and opens the corresponding info window
function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
google.maps.event.addDomListener(window, "load", initialize);
//New York, NY, USA (40.7127837, -74.0059413
//Newark, NJ, USA (40.735657, -74.1723667)
var xmlData = '<markers><marker markerimage="https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png" id="NYC" lat="40.7127837" lng="-74.0059413" country="USA" /><marker markerimage="https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png" id="NWK" lat="40.735657" lng="-74.1723667" country="USA" /></markers>';
function xmlParse(str) {
if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
}
if (typeof DOMParser != 'undefined') {
return (new DOMParser()).parseFromString(str, 'text/xml');
}
return createElement('div', null);
}
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<div id="map_canvas"></div>

Custom icon Google Maps V3

This map works fine, I just have one trouble.
I need to create a different icon for each marker.
I really don't have lucky with my codes ^^
how do I?
var side_bar_html = "";
var gmarkers = [];
var map = null;
/**
*map
**/
var point = new google.maps.LatLng(-23.421409,-51.936722);
var marker = createMarker(point,"This place",contentString0)
var point = new google.maps.LatLng(-23.421409,-51.934722);
var marker = createMarker(point,"This place",contentString1)
var point = new google.maps.LatLng(-23.421409,-51.932722);
var marker = createMarker(point,"This place",contentString2)
//put the assembled side_bar_html contents into the side_bar div
document.getElementById("side_bar").innerHTML = side_bar_html;
}
var infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150,50)
});
// This function picks up the click and opens the corresponding info window
function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
// A function to create the marker and set up the event window function
function createMarker(latlng, name, html) {
var contentString = html;
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);
});
gmarkers.push(marker);
side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
}
In your marker constructor add an icon property with the icons URL to the anonymous object you're passing:
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon:(image URL here),
zIndex: Math.round(latlng.lat()*-100000)<<5
});
https://developers.google.com/maps/documentation/javascript/reference#MarkerOptions
(Send via mobile, sorry if layout is bad).

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 API v3 Point of Interest with Custom Icons

I have a page pulling in the schools, churches, and parks of my given area but I want to style the 3 POIs with 3 different icons. I searched Google and even all the docs but couldn't find the answer.
var map;
var infowindow;
function initialize() {
// Center of Map
var centerLatlng = new google.maps.LatLng(29.745376, -95.380125);
// Marker Icons Declaration
var icon = new google.maps.MarkerImage("smLinks-twitter.png", null, null, new google.maps.Point(41,47));
// Map Options
var myOptions = {
zoom: 16,
center: centerLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
icons: icon
};
// Draw the map
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// Marker Icons Implementation
markers = new google.maps.Marker({
position: centerLatlng,
map: map,
title: 'Center of Map',
icon: icon
});
// Services: Places
var request = {
location: centerLatlng,
radius: 800,
types: ["school", "church", "park"]
};
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.search(request, callback);
} // function initialize()
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
icon: icon
});
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.setContent(place.name + '<br/>' + place.vicinity + '<br/><img src="' + place.icon + '">');
infowindow.open(map, this);
});
}
Please see my quick and dirty Demo. The idea is to use the place.types array to determine what kind of place you are trying to add to the map. I simplistically assigned a marker to the first item of this array (usually 2 or 3 items long), which may be something like:
["school", "establishment"]
In some cases, "university" comes before "school" so a "university" icon is used. You will want to refine the way you match types to icons, that is, give a priority for school or university? Perhaps iterate through the array looking for the right types. One place (general_contractor) is not in my list of icons, so the default pin marker is placed there. A "default" icon could be used if you checked if iconType in fact has or not the desired type. I'll leave these details to you =)
Here's the source I used for icons: https://sites.google.com/site/gmapsdevelopment/
function createMarker(place) {
var placeLoc = place.geometry.location;
var iconType = {};
iconType['school'] = "http://maps.google.com/mapfiles/kml/pal2/icon2.png";
iconType['church'] = "http://maps.google.com/mapfiles/kml/pal2/icon11.png";
iconType['park'] = "http://maps.google.com/mapfiles/kml/pal2/icon12.png";
iconType['university'] = "http://maps.google.com/mapfiles/kml/pal2/icon14.png";
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
icon: iconType[place.types[0]]
});
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.setContent(place.name + '<br/>' + place.vicinity + '<br/><img src="' + place.icon + '">');
infowindow.open(map, this);
});
}
Alternatively, use a switch statement:
function createMarker(place) {
var placeLoc = place.geometry.location;
var iconUrl;
switch (place.types[0]) {
case 'school':
iconUrl = "http://maps.google.com/mapfiles/kml/pal2/icon2.png";
break;
case 'church':
iconUrl = "http://maps.google.com/mapfiles/kml/pal2/icon11.png";
break;
case 'park':
iconUrl = "http://maps.google.com/mapfiles/kml/pal2/icon12.png";
break;
case 'university':
iconUrl = "http://maps.google.com/mapfiles/kml/pal2/icon14.png";
break;
default:
iconUrl = "http://maps.google.com/mapfiles/kml/pal4/icon39.png";
}
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
icon: iconUrl
});
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.setContent(place.name + '<br/>' + place.vicinity + '<br/><img src="' + place.icon + '">');
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);
});