showing Stored Markers on Google Maps API

Question

to start of I just started playing around with the Google Maps API (and using AJAX along with it)... Created a lot of problems ... solved them. But now I seem to stuck.

I was following along the Google Developers Tutorial on how to create a Store-Locator (https://developers.google.com/maps/articles/phpsqlsearch_v3) - really well written and explained - but I was changing it a bit for my needs.

Now I get the Error

InvalidValueError: setMap: not an instance of Map, and not an instance of StreetViewPanorama

The function creating the Error is:

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.responseText, request.status);
        }
   };

   request.open('GET', url, true);
   request.send(null); /* Console Points the Error to this line */
}

And this is the function running the function above:

function showAll() {
    var searchUrl = 'genxml.php';
    downloadUrl(searchUrl, function(data) {
        var xml = parseXml(data);
        var markerNodes = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markerNodes.length; i++) {
                var latlng = new google.maps.LatLng(
                    parseFloat(markerNodes[i].getAttribute("lat")),
                    parseFloat(markerNodes[i].getAttribute("lng"))
                );

        showMarker(latlng);
        }
    });
}

My genxml.php works fine, it generates the XML Document which I can see via FireBug..

I doublechecked every line.. Hope somebody finds my mistake :) If you need any further code let me know!

Edit: - Added Initialization Code

function initialize() {
                    var hideInfos = [
                        {
                            featureType: "poi",
                            elementType: "labels",
                            stylers: [
                                { visibility: "off" }
                            ]
                    }
                ];  

                // Map configurations
                  var mapOptions = {
                    zoom:12,
                    minZoom:12,
                    maxZoom:19,
                    disableDefaultUI: true,
                    styles: hideInfos,
                    center: new google.maps.LatLng(48.149137,11.5637916)
                  };

                  // Create a new Map with the config above; save object into "map" variable
                  var map = new google.maps.Map(document.getElementById('map'),mapOptions);

                  // Borderpath configuration
                  var borderCoordinates = [
                      new google.maps.LatLng(48.096655, 11.474876),
                      new google.maps.LatLng(48.191954, 11.474876),
                      new google.maps.LatLng(48.191954, 11.655120),
                      new google.maps.LatLng(48.096655, 11.655120),
                      new google.maps.LatLng(48.096655, 11.474876)
                    ];

                    // Create a new Polyline with config above; save object into "border"
                    var border = new google.maps.Polyline({
                      path: borderCoordinates,
                      strokeColor: '#FF0000',
                      strokeOpacity: 1.0,
                      strokeWeight: 2
                    });

                    // Draw border on map
                    border.setMap(map);

                  // Create new LatLngBounds Object and save it into strictBounds
                  var strictBounds = new google.maps.LatLngBounds(
                    new google.maps.LatLng(48.096655, 11.474876), 
                    new google.maps.LatLng(48.191954, 11.655120)
                  );

                  // Listen for the dragend event and check if dragged out of strictBounds
                  google.maps.event.addListener(map, 'dragend', function() {
                    if (strictBounds.contains(map.getCenter())) return;

                    // We're out of bounds - Move the map back within the bounds
                    var c = map.getCenter(),
                        x = c.lng(),
                        y = c.lat(),
                        maxX = strictBounds.getNorthEast().lng(),
                        maxY = strictBounds.getNorthEast().lat(),
                        minX = strictBounds.getSouthWest().lng(),
                        minY = strictBounds.getSouthWest().lat();

                    if (x < minX) x = minX;
                    if (x > maxX) x = maxX;
                    if (y < minY) y = minY;
                    if (y > maxY) y = maxY;

                    map.setCenter(new google.maps.LatLng(y, x));
                  });

                  // Place Marker where clicked
                  google.maps.event.addListener(map, 'click', function(e) { 
                      placeMarker(e.latLng, map);
                  });
                }

Answer 1

It's hard to see any errors with this code that you've posted. But I think that what you showed is an error with the Google Maps instance. Would mind to paste the code here (the map initialization code)?

EDIT:

If I understood, you're trying to call the 'map' variable outside the 'initialize' function. Is that? You need to instantiate outside the function, making the variable as global.