I'm pulling a Fusion Table layer that has 22 markers. (Previously, my map pulled from a KML layer; turns out, Fusion Tables will be better for my organization).
Everything was working fine until I started mucking about with InfoBubble to create custom windows. I tried my best to recreate the code I used to make custom infoWindows (see my previous post: Maps API v3: New InfoWindow, with pixelOffset, w/ data from KML.).
I know infoBubble isn't rocket science, but I'm clearly doing something wrong. How do I get this code working, and have it pull the info from my FusionTables layer into the infoBubble?
THANK YOU! :)
function initialize() {
var styles = [ ]; // Styles removed to simplify code
var styledMap = new google.maps.StyledMapType(styles,
{name: "HEPAC"});
var mapOptions = {
zoom: 7,
center: new google.maps.LatLng(46.69504, -67.69751),
panControl: false,
mapTypeControl: false,
streetViewControl: false,
noClear: true,
zoomControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT },
mapTypeControlOptions: {
mapTypeIds: ['map_style', google.maps.MapTypeId.ROADMAP]}
};
google.maps.visualRefresh = true;
var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
// Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
var opt = { minZoom: 7, maxZoom: 9 }; // Sets minimum & maximum zoom level
map.setOptions(opt);
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'Latitude',
from: '18KH6atJ7EZMZS-xxXpebiRAoVuIa2fXmJCQC5IM',
},
});
layer.setMap(map);
google.maps.event.addListener(layer, "click", function() {
showInContentWindow();
});
function showInContentWindow(position, text)
var content= "<div class='networkwindow'>" + text + "</div>";
var infoBubble = new InfoBubble({
padding: 20px,
arrowSize: 10,
arrowPosition: 10,
arrowStyle: 2
});
infoBubble.open(map)
}
google.maps.event.addDomListener(window, 'load', initialize);
EDIT: Revised code, after geocodezip's suggestion to take a look at my JavaScript errors. The map works now, but my markers still aren't appearing on click.
google.maps.event.addListener(layer, "click", function () {
showInContentWindow();
});
function showInContentWindow(text) {
var content = "<div class='networkwindow'>" + text + "</div>";
var InfoBubble = new InfoBubble({
content: content,
padding: '20px',
arrowSize: 10,
arrowPosition: 10,
arrowStyle: 2
});
InfoBubble.open(map);
}
Because you have syntax errors in your javascript. This works for me once I fixed those.
var map = null;
function initialize() {
var styles = [ ]; // Styles removed to simplify code
var styledMap = new google.maps.StyledMapType(styles,
{name: "HEPAC"});
var mapOptions = {
zoom: 7,
center: new google.maps.LatLng(46.69504, -67.69751),
panControl: false,
mapTypeControl: false,
streetViewControl: false,
noClear: true,
zoomControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT },
mapTypeControlOptions: {
mapTypeIds: ['map_style', google.maps.MapTypeId.ROADMAP]}
};
google.maps.visualRefresh = true;
map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
// Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
var opt = { minZoom: 7, maxZoom: 9 }; // Sets minimum & maximum zoom level
map.setOptions(opt);
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'Latitude',
from: '18KH6atJ7EZMZS-xxXpebiRAoVuIa2fXmJCQC5IM',
},
});
layer.setMap(map);
google.maps.event.addListener(layer, "click", function() {
showInContentWindow();
});
}
function showInContentWindow(position, text) {
var content= "<div class='networkwindow'>" + text + "</div>";
var infoBubble = new InfoBubble({
padding: "20px",
arrowSize: 10,
arrowPosition: 10,
arrowStyle: 2
});
infoBubble.open(map)
}
google.maps.event.addDomListener(window, 'load', initialize);