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.

david strachan · Accepted Answer · 2013-01-31 19:49:41Z

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

answered Jan 31, 2013 at 19:49

david strachan

7,2282 gold badges25 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Richard Cotrina Over a year ago

Oh, thanks... I'll follow every steps in the demo... but by now.. Is there any solutions for join the coordinates to the url, in my code?

Collectives™ on Stack Overflow

Trouble with Google Maps API v3 - Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related