I'm trying to put a little div in the labelContent of my Markers when the 'mouseover' event is triggered.
But the problem is that everytime the mouse moves (inside that div) the mouseout event is triggered..
Without DOM Elements it works fine, but if I put some divs, img etc the problem starts happening.
I'm using the basic.html from markerWithLabel page, with some modifications
function initMap() {
var latLng = new google.maps.LatLng(49.47805, -123.84716);
var homeLatLng = new google.maps.LatLng(49.47805, -123.84716);
var markers = [];
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 12,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var text = 'AAAAAAAAAAAAAAAAAAAAAAAAA<img src="http://cdn-careers.sstatic.net/careers/Img/logos/careers-logo.png?v=4daa70d5b71e">AAAAAAAAAA<br><br>AAAAAAAAAAAAAAABBBBBBBBBBBBBB<p> ALFA </p> BBBBBBBBBBBBBBBB<br><br>BBBBB';
var html = '<div id="" style="margin-top:2px">'+
'<div>'+
'<div width="285">'+
'<div width="90" height="80" align="center" style="vertical-align: top">'+
'<div style="display:inline-block;margin-top: 12px;">'+
'<img src="http://cdn-careers.sstatic.net/careers/Img/logos/careers-logo.png?v=4daa70d5b71e" width="80" height="52">'+
'</div>'+
'</div>'+
'<div width="185" align="left" style="color:#FFF; font: 12px Arial, Helvetica, sans-serif">'+
'<div style="display:inline-block;height:80px;margin-top: 2px;overflow:hidden" title="TITULO DO MARCADOR" alt="ALT DO MARCADOR">'+
'<div style="font-family: arial,tahoma;line-height: 14px;color:white"><strong>TITULO DO MARCADOR</strong><br> 6 quartos<br>Valor: 15000000 <br>Area: 120 m2</p>'+
'</div>'+
'</div>'+
'</div>'+
'</div>'+
'</div>';
var marker1 = new MarkerWithLabel({
position: homeLatLng,
draggable: true,
raiseOnDrag: true,
pane: "overlayMouseTarget" ,
map: map,
labelContent: "$AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA425K",
labelNovo: text,
labelAnchor: new google.maps.Point(22, 0),
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 0.75}
});
markers.push(marker1);
var marker2 = new MarkerWithLabel({
position: new google.maps.LatLng(49.475, -123.84),
draggable: true,
raiseOnDrag: true,
map: map,
pane: "overlayMouseTarget",
labelContent: "$395K",
labelAnchor: new google.maps.Point(22, 0),
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 1.0}
});
markers.push(marker2);
var markerCluster = new MarkerClusterer(map, markers /*, mcOptions fix javascript error */);
google.maps.event.addListener(marker1, "mouseover", function (e) { console.log('mouseover'); this.set('labelContent',this.labelNovo); });
google.maps.event.addListener(marker1, "mouseout", function (e) { console.log('mouseout'); this.set('labelContent','abcdefghijklmnopqrstuvxyz') });
google.maps.event.addListener(marker2, "mouseover", function (e) { this.set("labelContent",html) });
google.maps.event.addListener(marker2, "mouseout", function (e) { this.set("labelContent",'OUTOUTOUTOTU') });
window.map = map;
}
.labels {
color: black;
background-color: white;
font-family: "Lucida Grande", "Arial", sans-serif;
font-size: 10px;
text-align: center;
max-height: 500px !important;
width: 100px;
white-space: nowrap;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>MarkerWithLabel Example</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
</head>
<body onload="initMap()">
<p>A basic example of markers with labels. Note that an information window appears whether you
click the marker portion or the label portion of the MarkerWithLabel. The two markers shown here
are both draggable so you can easily verify that markers and labels overlap as expected.</p>
<div id="map_canvas" style="height: 400px; width: 100%;"></div>
<div id="log"></div>
</body>
</html>
I've set 2 markers to show the difference.
Check the relatedTarget-property of the events(mouseover/mouseout).
When it's undefined(happens when the event has been triggered by the marker) or when the
relatedTarget is not within the node representing the label(includig the label itself) set the labelContent. Otherwise do nothing.
A possible implementation:
function MarkerWithLabelAndHover(marker){
if(marker.get('hoverContent')){
marker.set('defaultContent',marker.get('labelContent'))
var fx=function(e,m){
var r=e.relatedTarget;
if(!r){
return true;
}
while(r.parentNode){
if(r.className==m.labelClass){
return false;
}
r=r.parentNode;
}
return true;
}
marker.set('defaultContent',marker.get('labelContent'))
google.maps.event.addListener(marker,'mouseout',function(e){
var that=this;
if(fx(e,this)){
this.set('labelContent', this.get('defaultContent'));
}
});
google.maps.event.addListener(marker,'mouseover',function(e){
var that=this;
if(fx(e,this)){
this.set('labelContent', this.get('hoverContent'));
}
});
}
return marker;
}
The function expects as argument a MarkerWithLabel-instance. The passed object may have a property named hoverContent(the desired content you like to apply on mouseover). When it does the mentioned behaviour will be applied to the marker.
Demo: http://jsfiddle.net/doktormolle/m6wazLrf/
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>
First off, I don't know much about Google maps or Javascript and most of what I have so far is copied and pasted and stuck together from various tutorials (although I do understand what does what).
I have a map showing markers based on their location from a spreadsheet (via JSON feed). In this spreadsheet I also have a numerical value stored for each marker in data[i][4].
Finally have a bog standard html input type range slider and have the value of this stored in a global variable (slidervalue) that constantly updates as the slider moves.
As the slider moves, if the numerical value stored in the data for a marker is less than slidervalue that marker should be visible. If the data value is greater than slidervalue that marker should be hidden.
I assume this can be achieved using an if else statement and Google maps setvisible.
Here is my code so far:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pound A Pint</title>
<style>
html, body {
margin: 0;
padding: 0;
width:100%;
height: 100%;
}
#map_canvas {
height: 100%;
width: calc(100% - 200px);
float:right;
}
#name {
float:left;
}
#price {
float:left;
}
#sliderAmount {
background-color: red;
display: inline-block;
}
</style>
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script>
// The web service URL from Drive 'Deploy as web app' dialog.
var DATA_SERVICE_URL = "https://script.google.com/macros/s/AKfycbwFFhKaVFHsr1g6sokrXd1kXPU0mbdKZzpVXE00X4CzS0nfng/exec?jsonp=callback";
var map;
var image = 'icon.png';
var slidervalue = 400;
function myFunction()
{
document.getElementById("sliderAmount").innerHTML= slidervalue;
}
function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(51.5, -0.1),
zoom: 12,
mapTypeControl: false,
panControl: false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.default,
position: google.maps.ControlPosition.LEFT_BOTTOM
}
});
var scriptElement = document.createElement('script');
scriptElement.src = DATA_SERVICE_URL;
document.getElementsByTagName('head')[0].appendChild(scriptElement);
}
function callback(data) {
for (var i = 0; i < data.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data[i][3], data[i][2]),
map: map,
icon: image
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
document.getElementById("name").innerHTML= data[i][0];
document.getElementById("pricespan").innerHTML= data[i][4];
}
})(marker, i));
}
}
function updateSlider(slideAmount) {
slidervalue = slideAmount;
document.getElementById("slidervalue").innerHTML = slidervalue;
}
</script>
</head>
<body onload="initialize()">
<div id="name">Name</div>
<div id="price">£<span id="pricespan"></span></div>
<input id="slide" type="range" min="1" max="500" step="1" value="400" onchange="updateSlider(this.value)">
<div onclick="myFunction()" id="sliderAmount">Click me</div>
<div id="slidervalue"></div>
<div id="map_canvas"></div>
</body>
</html>
Thanks for any help.
create a global accessible array:
markers=[];
store the markers in this array, and store the numeric value as a property of the markers:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data[i][3], data[i][2]),
map: map,
value:data[i][4],
visible:slidervalue >= data[i][4]
});
markers.push(marker);
in updateSlider iterate over the array and set the visible-property depending on the comparision:
function updateSlider(slideAmount) {
for(var i=0;i<markers.length;++i){
markers[i].setVisible(slideAmount>=markers[i].get('value'));
}
slidervalue = slideAmount;
document.getElementById("slidervalue").innerHTML = slidervalue;
}
This is unnecessarily difficult, thanks to CSS's vertical-align: middle oddities. I understand (though counter-intuitive) that if you want to vertically center text next to an image, you must do this to the image and not the text...
It seems that this approach only works when the text is in a span container, the image is defined by an img tag, and they are both within a div container.
That being said, I have an infowindow in Google Maps that contains an address (text) to the left of a Google StreetView display (image?). However, instead of the img tag the street view object is in a span container.
Here is the relevant code:
<!DOCTYPE html>
<html>
<head>
<title>address and street-view inside an infowindow</title>
<style type = "text/css">
*
{
margin: 0px;
padding: 0px;
}
html, body
{
height: 100%;
}
#map_canvas
{
min-height: 100%;
}
/* inside infowindow */
#userAddress
{
float: left;
}
#street_canvas
{
float: right;
width: 100px;
height: 100px;
vertical-align: middle;
}
</style>
</head>
<body>
<!-- map here -->
<div id = "map_canvas"></div>
<!-- Google Maps API -->
<script type = "text/javascript" src = "http://maps.googleapis.com/maps/api/js?&sensor=true&v=3.9"></script>
<script type = "text/javascript">
var map;
initialize();
function initialize()
{
var mapOptions =
{
center: new google.maps.LatLng(37.09024, -95.712891), // coordinates for center of the United States
zoom: 4, // smaller number --> zoom out
mapTypeId: google.maps.MapTypeId.TERRAIN // ROADMAP, SATELLITE, TERRAIN, or HYBRID
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
} // end of initialize
var coordinates = new google.maps.LatLng(37.414341, -122.07692159999999);
var address = "1401 North Shoreline Boulevard Mountain View, CA 94043";
setMarker(coordinates, address);
function setMarker(userCoordinates, userAddress)
{
var panorama = null;
// user address map marker created here
var marker = new google.maps.Marker(
{
map: map, // from the global variable
position: userCoordinates
});
// infowindow created here
var windowInfo = "<div>" +
"<span id = 'userAddress'>" + userAddress + "</span>" +
"<span id = 'street_canvas'></span>" +
"</div>";
var infoWindow = new google.maps.InfoWindow(
{
content: windowInfo
});
function setStreetView(infoWindow, userCoordinates)
{
google.maps.event.addListener(infoWindow, "domready", function()
{
if(panorama !== null)
{
panorama.unbind("position");
panorama.setVisible(false);
}
// options for streetview inside map marker
var panoramaOptions =
{
position: userCoordinates,
pov:
{
heading: 45, // northwest in degrees
zoom: 1,
pitch: 1 // 0 degrees is level
},
// removing all map controls
addressControl: false,
clickToGo: false,
enableCloseButton: false,
imageDateControl: false,
linksControl: false,
panControl: false,
scrollwheel: false,
zoomControl: false,
disableDoubleClickZoom: true
};
// initializing streetview and settings to global variable
panorama = new google.maps.StreetViewPanorama(document.getElementById("street_canvas"), panoramaOptions);
panorama.bindTo("position", marker);
panorama.setVisible(true);
});
} // end of setStreetView
setStreetView(infoWindow, userCoordinates);
// event listener for infowindow of map marker, onclick
google.maps.event.addListener(marker, "click", function()
{
infoWindow.open(map, this);
map.panTo(this.position);
});
// event listener for closing infowindow of map marker
google.maps.event.addListener(infoWindow, "closeclick", function()
{
// disable streetview, with the global variable
panorama.unbind("position");
panorama.setVisible(false);
panorama = null;
});
} // end of setMarker
</script>
</body>
</html>
See this for a reference on putting a streetview display inside of an infowindow.
So, it was much much easier than I thought -- a line-height attribute must be set in the CSS for the text, equal to the height specified by the streetview div. And that's it, the text is then "vertically centered":
/* inside the infowindow */
#userAddress
{
float: left;
line-height: 100px;
}
#street_canvas
{
float: right;
width: 100px;
height: 100px;
}
There is no need for vertical-align: middle in this case.
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;
}