Trouble with Google Maps API v3 - Javascript

Question

I've forgotten everything I learned in Javascript, so I started a project to remember some things. But I had a problem:

This is my code in Javascript:

    var peru = new google.maps.LatLng(-9, -75);
    var browserSupportFlag =  new Boolean();
    function initialize() {
        var ubicacion;  
        var mapOptions = {

            zoom: 6,
            mapTypeId: google.maps.MapTypeId.ROADMAP,

            mapTypeControl: true,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                position: google.maps.ControlPosition.BOTTOM_LEFT
            },
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.LARGE,
                position: google.maps.ControlPosition.LEFT_CENTER
            },

            panControl: false,
            scaleControl: false,
            streetViewControl: false,

        };

        var map = new google.maps.Map(document.getElementById("map_canvas"),
                mapOptions);

        if (navigator.geolocation) {
            browserSupportFlag = true;
            navigator.geolocation.getCurrentPosition(function(position) {
                ubicacion = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
                map.setCenter(ubicacion);
                }, function() {
                    handleNoGeolocation(browserSupportFlag);
                }
            );

        } else {
            browserSupportFlag = false;
            handleNoGeolocation(browserSupportFlag);
        }

        function handleNoGeolocation(errorFlag) {
            if (errorFlag == true) {
                alert("No se han otorgado permisos de Geolocalización, o el servicio falló. Utilice Google Chrome para mayor compatibilidad.");
                ubicacion = peru;
                } else {
                    alert("Su navegador no soporta Geolocalización. Puede continuar de igual forma, pero le sugerimos utilizar el navegador Google Chrome.");
                    ubicacion = peru;
                }

            map.setCenter(ubicacion);
        }

        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() {}

        downloadUrl("phpsqlsearch_genxml.php?lat="+ubicacion.lat()+"&lng="+ubicacion.lng()+"&r=250", function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName("marker");

            var infoWindow = new google.maps.InfoWindow;

            function bindInfoWindow(marker, map, infoWindow, html) {
                google.maps.event.addListener(marker, 'click', function() {
                infoWindow.setContent(html);
                infoWindow.open(map, marker);
                });
            }

            for (var i = 0; i < markers.length; i++) {
                var name = markers[i].getAttribute("nombre");
                var address = markers[i].getAttribute("direccion");

                var point = new google.maps.LatLng(
                    parseFloat(markers[i].getAttribute("lat")),
                    parseFloat(markers[i].getAttribute("lng")));
                var html = "<b>" + name + "</b> <br/>" + address;

                var marker = new google.maps.Marker({
                  map: map,
                  position: point,

                });

                bindInfoWindow(marker, map, infoWindow, html);
            }
        });
    }

And my trouble is in this part:

            downloadUrl("phpsqlsearch_genxml.php?lat="+ubicacion.lat()+"&lng="+ubicacion.lng()+"&r=250", function(data) {...}

I want to get the latitude and logitude variables and put them into the "url" on "download Url(url,...".

Example, if my location is -9.123792,-78.517313 y want to catch this url for it: phpsqlsearch_genxml.php?lat=-9.123792&lng=-78.517313&r=250

Also I want the radio of search be selectable... by input number or something like that.

I really don't know how I did all this, and how i'll do all I want :S

PS.: Sorry for my English.

Answer 1

I assume you are trying to modify Google's Store locator. It has all the functionality you require.

Where your problem arises is you are not passing coordinates to downloadUrl()

In the demo the function searchLocationsNear(center) sends the coordinates(center) to be joined to the url before downloadUrl() is called.

I would advise you to follow the demo and ensures you understand it before modifying.

It is also advisable to use PDO in phpsqlsearch_genxml.php as mysql functions are deprecated