Customising InfoBox

Question

I have managed to implement the 'Info Box' onto one of my maps which loads locations saved within a mySQL database, but I'd like to make a few changes to this but I'm not sure how.

The code that I am using is below, but I'd like to be able to replace the 'default' behaviour of the Info Box i.e. appearing next to each marker when the map loads, to, the Info Box only appearing once the marker has been clicked, panning to centre the map on that marker. Then when the next marker is clicked, the Info Box moving from the first to the newly clicked marker, again with the panning and centre functionality.

<!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" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Map My Finds - All Locations</title>
        <link rel="stylesheet" href="css/alllocationsstyle.css" type="text/css" media="all" />
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
        <script type="text/javascript" src="js/infobox.js"></script>
        <script type="text/javascript"> 
            var customIcons = {
            0: {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },
            1: {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_green.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(54.312195845815246,-4.45948481875007), 
            zoom:6, 
            mapTypeId: 'roadmap' 
            }); 

            // Change this depending on the name of your PHP file 
            downloadUrl("loadalllocations.php", function(data) { 
            var xml = data.responseXML; 
            var markers = xml.documentElement.getElementsByTagName("marker");
            var bounds = new google.maps.LatLngBounds();
            for (var i = 0; i < markers.length; i++) { 
            var locationname = markers[i].getAttribute("locationname"); 
            var address = markers[i].getAttribute("address");
            var totalfinds = markers[i].getAttribute("totalfinds");
            var point = new google.maps.LatLng( 
            parseFloat(markers[i].getAttribute("osgb36lat")), 
            parseFloat(markers[i].getAttribute("osgb36lon")));
            var icon = {}; 
            if (totalfinds == 0) {   
            icon = customIcons[0]; 
            } else if (totalfinds >= 1) {   
            icon = customIcons[1];      
            } 
            var marker = new google.maps.Marker({          
            map: map, 
            position: point,
            title: address,
            icon: icon.icon,
            shadow: icon.shadow
            }); 
            bounds.extend(point);
            map.fitBounds(bounds);

            var boxText = document.createElement("div");
            boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: orange; padding: 5px;";
            boxText.innerHTML = locationname + "<p>" + 'No. of finds: ' + "<b>" + totalfinds + "</b>" + "</p>";;
            var myOptions = {
            content: boxText
            ,disableAutoPan: false
            ,maxWidth: 0
            ,pixelOffset: new google.maps.Size(-140, 0)
            ,zIndex: null
            ,boxStyle: { 
            background: "url('tipbox.gif') no-repeat"
            ,opacity: 0.50
            ,width: "180px"
            }
            ,closeBoxMargin: "10px 2px 2px 2px"
            ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
            ,infoBoxClearance: new google.maps.Size(1, 1)
            ,isHidden: false
            ,pane: "floatPane"
            ,enableEventPropagation: false
            };
            var ib = new InfoBox(myOptions);
            ib.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()">
                <div id="map"></div>
            </body> 
            </html>

I'd also like to learn a little more about the Info Box, in terms of changing the colour, margins etc, but I've only found the guidance at http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.5/docs/reference.html which isn't quite as detailed as I would hope. Is there somewhere else that I can go to to get more detailed information?

This has now been resolved and the code is working.

score 1 · Answer 1 · answered Sep 01 '11 at 15:41

Try this sample code for info windows

There's a number of other samples here for other functionalities

The specifics you're probably looking for are

var contentString = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
    '<div id="bodyContent">'+
    '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
    'sandstone rock formation in the southern part of the '+
    'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
    'south west of the nearest large town, Alice Springs; 450&#160;km '+
    '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
    'features of the Uluru - Kata Tjuta National Park. Uluru is '+
    'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
    'Aboriginal people of the area. It has many springs, waterholes, '+
    'rock caves and ancient paintings. Uluru is listed as a World '+
    'Heritage Site.</p>'+
    '<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
    'http://en.wikipedia.org/w/index.php?title=Uluru</a> '+
    '(last visited June 22, 2009).</p>'+
    '</div>'+
    '</div>';

//create info window with a specific content string
var infowindow = new google.maps.InfoWindow({
    content: contentString
});

//marker listener
google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});

Hi, many thanks for replying to my post. I'd looked at the other examples you highlighted, & I thought the InfoBox was the better option. I have however tried the code re. the click event, you suggested, so the last lines of my code are google.maps.event.addListener(marker, 'click', function() { var ib = new InfoBox(myOptions); ib.open(map, marker); }) The click event works but no matter which marker I click on the InfoBox only appears next to the last marker on the map. Have you by any chance any ideas of how I can get around this? Many thanks once again. Chris — IRHM, Sep 01 '11 at 16:07
I had the same problem, the [suggested solution](http://stackoverflow.com/questions/3576488/google-maps-infowindow-only-loading-last-record-on-markers) was to pull out the info window to a more global scope and update its function. This is related to javascript closures. Good luck! — ZMorek, Sep 01 '11 at 16:55
Hi, many thanks for taking a look at my post and for your suggestion. Unfortunately, I can't seem to get this to work. I just wondered whether it may be because you're using the 'InfoWindow' whereas I'm using the InfoBox. kind regards Chris. — IRHM, Sep 01 '11 at 17:37

Customising InfoBox

1 Answers1