Home/ Questions/Q 6533301
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T10:06:31+00:00

I’ve have been working on implementing the InfoBox code for one of my web

  • 0

I’ve have been working on implementing the InfoBox code for one of my web pages and through some great tuition I’ve been able to do this. As it stands at the moment I can get the box to appear against each marker when the form loads, but I’d really like it to have it so that no boxes are shown when the form loads, then, when the user clicks on ‘marker A’, the InfoBox appears and the map pans to make the marker clicked the centre of the map, in the same way that an Info Window would.

Then if the user clicks ‘marker B’, the original InfoBox moves to the newly clicked marker, again panning and centering the map to that marker.

I’ve looked at all the documentation on the Google site but I can’t find how to do this. I just wondered whether it would be at all possible that someone could perhaps show me hot to do this. Please find my code below.

<!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>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("phpfile.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 html = locationname + "<p>" + 'No. of finds: ' + "<b>" + totalfinds + "</b>" + "</p>";
            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
            }); 

            var boxText = document.createElement("div");

            boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; 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.75
            ,width: "280px"
            }
            ,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
            };

START OF EDIT 

    bounds.extend(point);
    map.fitBounds(bounds);
    var infoBox = new InfoBox(myOptions);
    google.maps.event.addListener(marker, 'click', function() {
    infoBox.open(map, this); 
    map.setCenter(this.position;
    });
    } 
    }); 
    }

END OF EDIT 

            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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I have never worked with infoBox, but I assume it is very similar to the standard info window. You need to use Events to add the click action to the marker that will open the info box and center the map.

    Something similar to this:

    //register the single left click event.
google.maps.event.addListener(marker, "click", function (event) {

    //you may have to create a another box here or just change the content
    //Google's standard info window only creates one instance and then you change
    //the content during this event i.e. infoWindow.setContent("some html");

    infoBox.open(map, this);
    map.setCenter(this.position);
});

    Updated answer:

    Ok, it looks like you are overwriting the infoBox on every iteration through the loop so the only one left to show will be the last on created. You can build one infoBox outside of the loop but dont set the content attribute, then inside of the listener set the content.

    You need to store the content somewhere else to prevent it from being overridden as well.
    Try setting the content in the marker and refer to it like this 

    var boxText = document.createElement("div");
    boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";        
    boxText.innerHTML =  locationname + "<p>" + 'No. of finds: ' + "<b>" + totalfinds + "</b>" + "</p>";

var marker = new google.maps.Marker({          
            map: map, 
            position: point,
            title: address,
            icon: icon.icon,
            shadow: icon.shadow,
            html: boxText 
            });

google.maps.event.addListener(marker, "click", function (event) {
    infoBox.setContent(this.html);
    infoBox.open(map, this);
    map.setCenter(this.position);
});
    • 0