Home/ Questions/Q 8434669
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T06:43:13+00:00

I’m stuck on a current issue when I’m trying to use the custom infobox

  • 0

I’m stuck on a current issue when I’m trying to use the custom infobox with google API v3 PHP / SQL Database. I’m having the hardest time figuring out where I messed up, the div shows up blank instead of having a map. Any help would awesome! 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script type="text/javascript">

var customIcons = {
  Clinic: {
    icon: 'icon_2.png',
  },
  Secondary: {
    icon: 'icon_1.png',
  }
};

function initialize() {
    var map = new google.maps.Map(document.getElementById("map_canvas"), {
        center: new google.maps.LatLng(47.6145, -122.3418),
        zoom: 13,
        scrollwheel: false,
        mapTypeId: 'roadmap'
    });


    downloadUrl("xml.php", function(data) {
        function createMarker(markerXML) {
            var name = markerXML.getAttribute("name"),
                postid = markers [i].getAttribute("post_id"),
                address = markers[i].getAttribute("address"),
                phone = markers[i].getAttribute("phone"),          
                listtype = markers[i].getAttribute("type"),
                monday = markers[i].getAttribute("monday"),
                tuesday = markers[i].getAttribute("tuesday"),
                wednesday = markers[i].getAttribute("wednesday"),
                thursday = markers[i].getAttribute("thursday"),
                friday = markers[i].getAttribute("friday"),
                saturday = markers[i].getAttribute("saturday"),
                sunday = markers[i].getAttribute("sunday"),
                type = markers[i].getAttribute("type"),
                point = new google.maps.LatLng(
                lat = parseFloat(markerXML.getAttribute("lat")),
                lng = parseFloat(markerXML.getAttribute("lng")),


                icon = customIcons[type] || {},

                marker = new google.maps.Marker({
                    map: map,
                    position: new google.maps.LatLng(lat, lng),
                    icon: icon.icon,
                }),

                boxText = document.createElement("div");

            boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
            boxText.innerHTML = "<b>" + name + "</b> <br/> <i>" + listtype + "</i> <br/>" + address + "<br/>" + phone + "<br/>" + monday + tuesday + wednesday + thursday + friday + saturday + sunday;

            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
            };

            var infoBox = new InfoBox(myOptions);

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

        var xml = data.responseXML,
            markers = xml.documentElement.getElementsByTagName("marker"),
            numMarkers = markers.length;

        for (var i = 0; i < numMarkers; i++) {
            createMarker(markers[i]);
        }
    });
}

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>    


<div id="map_canvas" style="width: 500px; height: 300px"></div>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Look at the javascript console and fix the errors you find there. Just commenting out dowloadUrl call should get you your map back.

    You didn’t provide a sample of your xml, but the second step (after fixing your javascript errors) would be to open the xml feed in your browser and see if it is valid (or you could run it through an xml validator)

    This article (which it looks like you might have started with) also provides some debugging suggestions.

    working version

    • 0