Hi,
I am sorry that I encounter another question on infobox...
I could not get infobox to work. The following code is a working sample file from
http://www.geocodezip.com/v3_simpleMa...
I put the proper src in the external resources
https://maps.googleapis.com/maps/api/...
http://google-maps-utility-library-v3...
I delete the HTML portion and leave the Javascript along.
Run the program... Makers are ok. Cannot click to show infobox.
Thank you for your your advice on what other setting I need to do.
//******
var ib = new InfoBox();
function initialize() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(52.204872,0.120163),
mapTypeId: google.maps.MapTypeId.ROADMAP,
// styles: styles,
scrollwheel: false
};
// var map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
var map = new google.maps.Map($('div[dsid="googlemap1"]').get(0), mapOptions)
google.maps.event.addListener(map, "click", function() { ib.close() });
setMarkers(map, sites);
infowindow = new google.maps.InfoWindow({
content: "loading..."
});
}
var sites = [
['The Frontroom', 52.202977,0.138938, 1, ' The Frontroom
23-25 Gwydir Street, Cambridge, CB1 2LG
01223 305 600
Website
'],
['Fitzwilliam Museum',52.199678,0.119931, 2, ' Fitzwilliam Museum
Trumpington St, Cambridge, CB2 1RB
01223 332900
Website
'],
['Wysing Arts centre', 52.182077,-0.06977, 3, ' Wysing Arts Centre
Fox Rd, Cambridge CB23 2TX
01954 718881
Website
'],
['Cambridge School of Art', 52.203825,0.134808, 4, ' Cambridge School of Art
East Rd, Cambridge, CB1 1PT
0845 271 3333
Website
'],
['Kettles yard', 52.210851,0.114637, 5, ' Kettles Yard
Castle St, Cambridge, CB3 0AQ
01223 748100
Website
'],
['Aid & Abet', 52.195218,0.136578, 7, ' Aid & Abet
Station Road, Cambridge, CB1 2JW
Website
'],
['The Junction', 52.190756,0.136522, 8, ' The Junction
Clifton Way, Cambridge, CB1 7GX
01223 511 511
Website
']
];
/* var sites = [
// List all locations for each pin
['The Frontroom', 52.202977,0.138938, 1, ' The Frontroom.
23-25 Gwydir Street, Cambridge, CB1 2LG
01223 305 600
']
];
*/
function createMarker(site, map){
var siteLatLng = new google.maps.LatLng(site[1], site[2]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
title: site[0],
zIndex: site[3],
html: site[4] /* ,
icon: "http://visualartscambridge.org/wp-con..." this icon no longer available */
});
// Begin example code to get custom infobox
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
boxText.innerHTML = marker.html;
Code: Select all
var myOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-140, 0)
,zIndex: null
,boxStyle: {
background: "url('[url=http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.12/examples/tipbox.gif]http://google-maps-utility-library-v3...[/url]') no-repeat"
,opacity: 0.75
,width: "280px"
}
,closeBoxMargin: "10px 2px 2px 2px"
,closeBoxURL: "[url=http://www.google.com/intl/en_us/mapfiles/close.gif]http://www.google.com/intl/en_us/mapf...[/url]"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
// end example code for custom infobox
google.maps.event.addListener(marker, "click", function (e) {
ib.close();
ib.setOptions(myOptions);
ib.open(map, this);
});
return marker;
}
function setMarkers(map, markers) {
for (var i = 0; i < markers.length; i++) {
createMarker(markers, map);
}
}
initialize();