I answered my question with help from a friend - labels and building polygons with pop ups now display.
The code uses an external GeoJSON with two building coordinates, values for colors and building names. The GeoJSON is used to draw the buidling polygons, and populate infoBox window.
The labels are blank window boxes with coordinates and text hard coded. There are other examples of this on Stack Overflow, however, I was having trouble getting both functions to work. Thanks to everyone who helped.
<!DOCTYPE html>
<html>
<head>
<title>UT Campus Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 90%;
padding: 10px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script>
// global variable
var map;
var mapData;
var dataURL = 'https://googledrive.com/host/0B9SE53Gvj0AsR3hyUDJ4Nk9ybG8/Bld.json';
var infoWindow = new google.maps.InfoWindow();
var colors = ["#9295ca", "#076bb6", "#e66665", "#666", "#333", "#456789"];
// create the map when the page loads
function initialize() {
var mapOptions = {
zoom: 16,
center: new google.maps.LatLng(30.284, -97.7325)
};
// build the map
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// get the data and draw the polygons
$.getJSON( dataURL, function( data ) {
loadGeoJSON(data);
});
// add colors
stylePolygons();
// add click listeners with info boxes
addClickListeners();
// finally add labels
addLabels();
};
// fetch the geojson data from the server
function loadGeoJSON (data) {
console.log(data);
map.data.addGeoJson(data,{idPropertyName:"id"});
};
// assign colors based on value property of each feature
function stylePolygons () {
map.data.setStyle(function(feature) {
var value = feature.getProperty('value');
var color = colors[value];
return {
fillColor: color,
strokeWeight: 1
};
});
};
//listen for click events
function addClickListeners () {
map.data.addListener('click', function(event) {
//show an infowindow on click
infoWindow.setContent('<div style="line-height:1.35;overflow:hidden;white-space:nowrap;"> <b>'+event.feature.getProperty("bldAbbrev") +"</b>"+"</br>" + event.feature.getProperty("GoogInfoWi") +"<br/>" + event.feature.getProperty("addressStr") +"</div>");
var anchor = new google.maps.MVCObject();
anchor.set("position",event.latLng);
infoWindow.open(map,anchor);
});
};
function buildMarkers(map, markerData) {
var newMarkers = [],
marker;
var blankMarker = {
path: 'M 0,0,0 z',
fillColor: 'yellow',
fillOpacity: 0.8,
scale: 0,
strokeColor: 'white',
strokeWeight: 4
};
for(var i=0; i<markerData.length; i++) {
marker = new google.maps.Marker({
map: map,
icon: blankMarker,
draggable: true,
position: markerData[i].latLng,
visible: true
}),
boxText = document.createElement("div"),
//these are the options for all infoboxes
infoboxOptions = {
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(40, 0),
zIndex: null,
boxStyle: {
background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
opacity: 1,
width: "24px"
},
closeBoxMargin: "12px 4px 2px 2px",
closeBoxURL: "",
infoBoxClearance: new google.maps.Size(0, 0),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
newMarkers.push(marker);
//define the text and style for all infoboxes
boxText.style.cssText = "margin-top: 8px; background:#0xFFFFFF; color:#333; font-family:Arial; font-size:24px; padding: 0px; border-radius:0px; -webkit-border-radius:0px; -moz-border-radius:0px;";
boxText.innerHTML = markerData[i].label;
//Define the infobox
newMarkers[i].infobox = new InfoBox(infoboxOptions);
//Open box when page is loaded
newMarkers[i].infobox.open(map, marker);
}
return newMarkers;
};
function addLabels () {
var markerInfoArray =
[
{
latLng: new google.maps.LatLng(30.2848878, -97.7362857),
label:"SAC"
},
{
latLng: new google.maps.LatLng(30.2819835, -97.7404576),
label:"ATT"
}
];
var markerArray = buildMarkers(map, markerInfoArray);
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
