Utilizing geoxml3 to display KML labels - google-maps-api-3

Question

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>

Answer 1

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>