I'm using Google Maps API V3 plugin Infobox and I need some help. In the code a loop is creating several markers an infoboxes on the map, but I wonder how to hide the infoboxes from the beginning? I have tried to change the isHidden value, but not working. I also wonder how to hide previuosly infobox when click on a new marker to show a new infobox? Preciate some help! Thanks!
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="infobox.js"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(55.672962361614566, 12.56587028503418);
var myMapOptions = {
zoom: 15
,center: latlng
,mapTypeId: google.maps.MapTypeId.ROADMAP
,streetViewControl: false
};
var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
// namn
var name=[];
name.push('Test 1');
name.push('Test 2');
// positioner
var position=[];
position.push(new google.maps.LatLng(55.667093265894245,12.581255435943604));
position.push(new google.maps.LatLng(55.66453963191134, 12.584795951843262));
// infoboxes
var infobox = [];
infobox.push("<div>Hello 1</div>");
infobox.push("<div>Hello 2</div>");
for (i = 0; i < position.length; i += 1) {
// Call function
createMarkers(position[i], infobox[i], name[i]);
}
function createMarkers(position,content,name) {
var marker = new google.maps.Marker({
map: theMap,
draggable: false,
position: position,
visible: true,
title: name
});
var boxText = document.createElement("div");
boxText.style.cssText = "background: yellow; width: 300px; height: 70px; padding: 5px;";
boxText.innerHTML = content;
var myOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-37, -120)
,zIndex: null
,boxStyle: {
background: "url('tipbox.gif') no-repeat"
,opacity: 1
,width: "300px"
}
,closeBoxMargin: "5px 5px 5px 5px"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
google.maps.event.addListener(marker, "click", function (e) {
ib.open(theMap, this);
});
var ib = new InfoBox(myOptions);
ib.open(theMap, marker);
}
}
</script>
<title>Creating and Using an InfoBox</title>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 100%; height: 400px"></div>
Remove the line:
ib.open(theMap, marker);
And the infobox should remain hidden until you click the marker.
Related
I'm using the latest release of geoxml3 downloaded from Google Code Project. I can see the KML file placemarks on my map. The problem is I would like to display the labels as well. In my KML file I have Style id and StyleMap id assigned.
I have searched this site for gemoxml3 label and was pointed to this post label a kml file in Google Maps API v3. The problem is the wiki for the code project points to Google Markers which doesn't mention how to display the label either.
I have also searched the geocodezip website and didn't find anything on their either. Any direction would be greatly appreciated.
* Added KML Format *
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<name>KML Test</name>
<StyleMap id="Tester-ICON">
<Pair>
<key>normal</key>
<styleUrl>#Tester-TEMPLATE</styleUrl>
</Pair>
<Pair>
<key>highlight</key>
<styleUrl>#Tester-TEMPLATE</styleUrl>
</Pair>
</StyleMap>
<Style id="Tester-TEMPLATE">
<IconStyle>
<scale>2</scale>
<Icon>
<href>http://maps.google.com/mapfiles/kml/paddle/ylw-stars.png</href>
</Icon>
</IconStyle>
<LabelStyle>
<color>ff0000ff</color>
<scale>2</scale>
</LabelStyle>
<BalloonStyle>
<text><![CDATA[
$[description]
]]>
</text>
</BalloonStyle>
</Style>
<Placemark id="Event 1">
<name>Event 1</name>
<Snippet maxLines="0"></Snippet>
<description>
<![CDATA[
<style type="text/css">
.TDcell {
color: Black;
text-align: left;
}
.THeader {
color: Black;
font-weight: bold;
white-space: nowrap;
text-align: left;
vertical-align: text-top;
}
</style>
<p><b>Event ID:<b> 1</p>
<p><b>Type of Event:<b> Formal Dinner</p>
<hr>
<table cellspacing="1" cellpadding="3" width="500">
<tr>
<td class="THeader">Who:</td>
<td class="TDcell">POTUS</td>
</tr><tr>
<td class="THeader">What:</td>
<td class="TDcell">State of the Union Address</td>
</tr><tr>
<td class="THeader">When:</td>
<td class="TDcell">Jan, 20th 2016</td>
</tr><tr>
<td class="THeader">Where:</td>
<td class="TDcell">United States Capitol</td>
</tr><tr>
<td class="THeader">Why:</td>
<td class="TDcell">Updates</td>
</tr>
</table>]]>
</description>
<styleUrl>#Tester-TEMPLATE</styleUrl>
<Point>
<coordinates>-77.009072,38.890131,0</coordinates>
</Point>
</Placemark>
</Document>
</kml>
One option would be to create a custom createMarker function which uses InfoBox to display a label over the marker:
function createMarker(placemark, doc) {
// create a Marker to the map from a placemark KML object
// Load basic marker properties
var markerOptions = {
map: map,
position: new google.maps.LatLng(placemark.Point.coordinates[0].lat, placemark.Point.coordinates[0].lng),
title: placemark.name,
zIndex: Math.round(placemark.Point.coordinates[0].lat * -100000)<<5,
icon: placemark.style.icon,
shadow: placemark.style.shadow
};
// Create the marker on the map
var marker = new google.maps.Marker(markerOptions);
// add label
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: white; padding: 5px;";
boxText.innerHTML = placemark.name;
var myOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-40, -60)
,zIndex: null
,boxStyle: {
textAlign: "center"
,fontSize: "8pt"
,width: "80px"
}
,closeBoxURL: ""
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
var ib = new InfoBox(myOptions);
ib.open(map, marker);
// Set up and create the infowindow
var infoWindowOptions = {
content: '<div class="geoxml3_infowindow"><h3>' + placemark.name +
'</h3><div>' + placemark.description + '</div>'+
'<input type="button" onclick="displayInfo(\''+placemark.name+'\',\''+placemark.description+'\');" value="populate div"></input>',
pixelOffset: new google.maps.Size(0, 2)
};
infowindow.setOptions(infoWindowOptions);
marker.infoWindowOptions = infoWindowOptions;
marker.infoWindow = infowindow;
// Infowindow-opening event handler
google.maps.event.addListener(marker, 'click', function() {
this.infoWindow.close();
marker.infoWindow.setOptions(this.infoWindowOptions);
this.infoWindow.open(this.map, this);
});
placemark.marker = marker;
return marker;
}
Use it in geoxml3 like this:
geo = new geoXML3.parser({
map: map,
zoom: true,
singleInfoWindow: true,
infoWindow: infowindow,
createMarker: createMarker
});
geo.parse(document.getElementById('kmlFile').value);
proof of concept (with posted
KML)
proof of concept (with a different
KML)
code snippet:
var map, infowindow;
function initialize() {
infowindow = new google.maps.InfoWindow({});
var googlemaps_options = {
mapTypeId: google.maps.MapTypeId.SATELLITE,
streetViewControl: false
}
map = new google.maps.Map(document.getElementById('map_canvas'), googlemaps_options);
var geo = new geoXML3.parser({
map: map,
zoom: true,
singleInfoWindow: true,
infoWindow: infowindow,
createMarker: createMarker
});
geo.parseKmlString(kmlStr);
}
function createMarker(placemark, doc) {
// create a Marker to the map from a placemark KML object
// Load basic marker properties
var markerOptions = {
map: map,
position: new google.maps.LatLng(placemark.Point.coordinates[0].lat, placemark.Point.coordinates[0].lng),
title: placemark.name,
zIndex: Math.round(placemark.Point.coordinates[0].lat * -100000) << 5,
icon: placemark.style.icon,
shadow: placemark.style.shadow
};
// Create the marker on the map
var marker = new google.maps.Marker(markerOptions);
// add label
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: white; padding: 5px;";
boxText.innerHTML = placemark.name;
var myOptions = {
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-40, -60),
zIndex: null,
boxStyle: {
textAlign: "center",
fontSize: "8pt",
width: "80px"
},
closeBoxURL: "",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
var ib = new InfoBox(myOptions);
ib.open(map, marker);
// Set up and create the infowindow
var infoWindowOptions = {
content: '<div class="geoxml3_infowindow"><h3>' + placemark.name +
'</h3><div>' + placemark.description + '</div>' +
'<input type="button" onclick="displayInfo(\'' + placemark.name + '\',\'' + placemark.description + '\');" value="populate div"></input>',
pixelOffset: new google.maps.Size(0, 2)
};
infowindow.setOptions(infoWindowOptions);
marker.infoWindowOptions = infoWindowOptions;
marker.infoWindow = infowindow;
// Infowindow-opening event handler
google.maps.event.addListener(marker, 'click', function() {
this.infoWindow.close();
marker.infoWindow.setOptions(this.infoWindowOptions);
this.infoWindow.open(this.map, this);
});
placemark.marker = marker;
return marker;
}
function displayInfo(name, description) {
document.getElementById('info').innerHTML = name + "<br>" + description;
}
google.maps.event.addDomListener(window, 'load', initialize);
var kmlStr = '<?xml version="1.0" encoding="UTF-8"?><kml xmlns="http://www.opengis.net/kml/2.2"><Document><name>KML Test</name><StyleMap id="Tester-ICON"><Pair><key>normal</key><styleUrl>#Tester-TEMPLATE</styleUrl></Pair><Pair><key>highlight</key><styleUrl>#Tester-TEMPLATE</styleUrl></Pair></StyleMap><Style id="Tester-TEMPLATE"><IconStyle><scale>2</scale><Icon><href>http://maps.google.com/mapfiles/kml/paddle/ylw-stars.png</href></Icon></IconStyle><LabelStyle><color>ff0000ff</color><scale>2</scale></LabelStyle><BalloonStyle><text><![CDATA[$[description]]]></text></BalloonStyle></Style><Placemark id="Event 1"><name>Event 1</name><Snippet maxLines="0"></Snippet><description><![CDATA[<style type="text/css">.TDcell {color: Black;text-align: left;}.THeader {color: Black;font-weight: bold;white-space: nowrap;text-align: left;vertical-align: text-top;}</style><p><b>Event ID:<b>1</p><p><b>Type of Event:<b>Formal Dinner</p><hr><table cellspacing="1" cellpadding="3" width="500"><tr><td class="THeader">Who:</td><td class="TDcell">POTUS</td></tr><tr><td class="THeader">What:</td><td class="TDcell">State of the Union Address</td></tr><tr><td class="THeader">When:</td><td class="TDcell">Jan, 20th 2016</td></tr><tr><td class="THeader">Where:</td><td class="TDcell">United States Capitol</td></tr><tr><td class="THeader">Why:</td><td class="TDcell">Updates</td></tr></table>]]></description><styleUrl>#Tester-TEMPLATE</styleUrl><Point><coordinates>-77.009072,38.890131,0</coordinates></Point></Placemark></Document></kml>';
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#map_canvas {
height: 90%;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/geocodezip/geoxml3/master/polys/geoxml3.js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div id="map_canvas"></div>
I have two columns in my fusion table, both store the names of icons. One of the tables is the default icons.
I'm wondering if there is a way to toggle between the two columns to change icons in JavaScript?
Cheers
set up two maps in the FusionTables UI with the appropriate columns defining the icons (Fusion Tables Help article describing how to do that)
"publish" the map, get HTML and Javascript, that will contain the values to use for styleId and template for each configuration.
call .setOptions on the FusionTablesLayer to change between them
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"></meta>
<title>Astraptes fulgerator- demo data - Google Fusion Tables</title>
<style type="text/css">
html, body, #googft-mapCanvas {
height: 300px;
margin: 0;
padding: 0;
width: 500px;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
google.maps.visualRefresh = true;
var isMobile = (navigator.userAgent.toLowerCase().indexOf('android') > -1) ||
(navigator.userAgent.match(/(iPod|iPhone|iPad|BlackBerry|Windows Phone|iemobile)/));
if (isMobile) {
var viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'initial-scale=1.0, user-scalable=no');
}
var mapDiv = document.getElementById('googft-mapCanvas');
mapDiv.style.width = isMobile ? '100%' : '500px';
mapDiv.style.height = isMobile ? '100%' : '300px';
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(10.902224578468406, -85.43183000000005),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend-open'));
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend'));
layer = new google.maps.FusionTablesLayer({
map: map,
heatmap: { enabled: false },
query: {
select: "col12",
from: "1_DWHpdjPNGQwVZU5OLbMMS-6yrbIY4wTGJoRMLg",
where: ""
},
options: {
styleId: 3,
templateId: 3
}
});
if (isMobile) {
var legend = document.getElementById('googft-legend');
var legendOpenButton = document.getElementById('googft-legend-open');
var legendCloseButton = document.getElementById('googft-legend-close');
legend.style.display = 'none';
legendOpenButton.style.display = 'block';
legendCloseButton.style.display = 'block';
legendOpenButton.onclick = function() {
legend.style.display = 'block';
legendOpenButton.style.display = 'none';
}
legendCloseButton.onclick = function() {
legend.style.display = 'none';
legendOpenButton.style.display = 'block';
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<input type="button" value="change A" onclick="layer.setOptions({styleId:2, template:2});"></input>
<input type="button" value="change B" onclick="layer.setOptions({styleId:3, template:3});"></input>
<div id="googft-mapCanvas"></div>
</body>
</html>
Hello and thanks in advance. The following modified sample google code creates markers upon left mouse clicks, and adds those markers to an array. That part works fine. I have tried to add a second event handler that deletes a marker if there is a right click on it. I've tried a lot of variations without success. It is my understanding that the use of marker.setMap(null) would set the associated array element to null, and remove the marker from the display. Thanks again!
<!DOCTYPE html>
<html>
<head>
<title>Marker Test</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas, #map_canvas {
height: 100%;
}
#map-canvas, #map_canvas {
height: 650px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
var map;
var markers = [];
function initialize() {
var NY = new google.maps.LatLng(40.739112,-73.785848);
var mapOptions = {
zoom: 16,
center: NY,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng);
});
google.maps.event.addListener(map, 'rightclick', function(event) {
marker.setMap(null);
});
}
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
markers.push(marker);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
You want the 'rightclick' event listener on the marker, not the map. Put it in the addMarker function:
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
google.maps.event.addListener(marker, 'rightclick', function(event) {
marker.setMap(null);
});
markers.push(marker);
}
Note: this will remove the marker from the map, but won't remove it from the markers array.
Remove the one on the map, delete these lines:
google.maps.event.addListener(map, 'rightclick', function(event) {
marker.setMap(null);
});
Kinda of new to Google mashups. I have an KML on our Webserver (http://www.madisonareampo.org/maps/BRT_National.kmz) to draw on Google Maps.
I have a Google Maps mashup where I want an infowindow to display the contents of the KML description field through a click event. The KML file was exported from a geodatabase using ArcGIS.
Nothing is being returned when I click on a marker in the KML file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Street View Layer</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBvkXCNOcIGLKZVgFtIykSQEbEk0db1XxY&sensor=false">
</script>
<script>
function initialize() {
var BRT = new google.maps.LatLng(40.380028, -93.440917);
var mapOptions = {
center: BRT,
zoom: 3,
overviewMapControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById('map_canvas'), mapOptions);
var layer= new google.maps.KmlLayer('http://www.madisonareampo.org/maps/BRT_National.kmz',
{ suppressInfoWindows: true,
map: map });
google.maps.event.addListener(layer, 'click', function(kmlEvent) {
showInContentWindow(kmlEvent.featureData.description);
});
function showInContentWindow(text) {
var content = "<div style='margin-left:-20px;border:2px dotted #897823;'>" + text + "</div>";
var infowindow = new google.maps.InfoWindow({
content: content
})
}
var panoramaOptions = {
position: BRT,
pov: {
heading: 34,
pitch: 10,
zoom: 1
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);
map.setStreetView(panorama);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 650px; height: 400px"></div>
<div id="pano" style="position:absolute; left:660px; top: 8px; width: 650px; height: 400px;"></div>
</body>
</html>
InfoWindows needs a position attribute and you have to call open(map) to bind it to the map. Here's a working version of your code :
google.maps.event.addListener(layer, 'click', function(kmlEvent) {
showInContentWindow(kmlEvent.latLng, kmlEvent.featureData.description);
});
function showInContentWindow(position, text) {
var content = "<div style='margin-left:-20px;border:2px dotted #897823;'>" + text + "</div>";
var infowindow = new google.maps.InfoWindow({
content: content,
position: position
})
infowindow.open(map);
}
I need help to create a sidebar. I have it partially working, but there are 2 problems to solve. First, the sidebar only shows the last marker information. I may not have placed some of the sidebar coding in its proper place. Second, (which may be part of the first problem), all the icons appear when using Firefox, but when using IE8 all the icons except the last icon appears. To view the map and code, first go to http://www.askdata.net/propmap/mapdata.php and do the demo (paste addresses into text area), then the map page will be displayed. Thanks again. The code also follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<h1>'Comparables Map'</h1><!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Comparables Map</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
Subject: {
icon: 'http://askdata.net/compmap/mapicons/sub.png',
//shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
Comp1: {
icon: 'http://askdata.net/compmap/mapicons/c1.png',
//shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
Comp2: {
icon: 'http://askdata.net/compmap/mapicons/c2.png',
//shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
Comp3: {
icon: 'http://askdata.net/compmap/mapicons/c3.png',
//shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
Comp4: {
icon: 'http://askdata.net/compmap/mapicons/c4.png',
//shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
Comp5: {
icon: 'http://askdata.net/compmap/mapicons/c5.png',
//shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
Comp6: {
icon: 'http://askdata.net/compmap/mapicons/c6.png',
//shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(41.95, -87.65),
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("genxml2.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + type + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
draggable: true,
icon: icon.icon
//shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
var sidebar = document.getElementById('sidebar');
sidebar.innerHTML = '';
if (markers.length == 0) {
sidebar.innerHTML = 'No results found.';
map.setCenter(new GLatLng(41, -87), 4);
return;
}
var sidebarEntry = createSidebarEntry(marker, type, address);
sidebar.appendChild(sidebarEntry);
}
});
function createSidebarEntry(marker, type, address) {
var div = document.createElement('div');
var html = '<b>' + type + '</b>' + address;
div.innerHTML = html;
div.style.cursor = 'pointer';
div.style.marginBottom = '5px';
google.maps.event.addDomListener(div, 'click', function() {
google.maps.event.trigger(marker, 'click');
});
google.maps.event.addDomListener(div, 'mouseover', function() {
div.style.backgroundColor = '#eee';
});
google.maps.event.addDomListener(div, 'mouseout', function() {
div.style.backgroundColor = '#fff';
});
return div;
}
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
</head>
<body onload="load()">
<br/>
<br/>
<div style="width:1200px; font-family:Arial,
sans-serif; font-size:11px; border:1px solid black">
<table>
<tbody>
<tr id="cm_mapTR">
<td width="200" valign="top"> <div id="sidebar" style="overflow: auto; height: 700px; font-size: 11px; color: #000"></div>
</td>
<td> <div id="map" style="overflow: hidden; width: 1000px; height: 700px"></div> </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
IE doesn't like trailing commas at the end of a structure, e.g. the comma after the icon here:
Comp5: {
icon: 'http://askdata.net/compmap/mapicons/c5.png',
}
You're mixing Google Maps API 2 and 3 code. e.g. you declare latlng objects using API 3:
center: new google.maps.LatLng(41.95, -87.65)
but then you use API 2 here:
map.setCenter(new GLatLng(41, -87), 4);
Here is your problem: sidebar.innerHTML = '';
Since it is within the loop, every time it loops, it deletes the prior side bar entry.
Place it fight after function load() { -Outside the loop AND within Load().
Use document.getElementById('sidebar').innerHTML = '';
Also, you have to do something about your customIcons
You can change them to something like this
Subject: { icon: 'http://askdata.net/compmap/mapicons/sub.png' }
And you are done!
EXAMPLE
function load() {
document.getElementById('sidebar').innerHTML = '';
var map = new google.maps.Map(document.getElementById("map"), {
//rest of the code goes here
Also, it might be a good idea to replace this code with CSS:
div.style.cursor = 'pointer';
div.style.marginBottom = '5px';
google.maps.event.addDomListener(div, 'mouseover', function() {
div.style.backgroundColor = '#eee';
});
google.maps.event.addDomListener(div, 'mouseout', function() {
div.style.backgroundColor = '#fff';
});
CSS option:
#sidebar {
background-color: white;
}
#sidebar div {
cursor: pointer;
margin-bottom: 5px;
}
#sidebar div:hover {
background-color: #eee;
}