Question

I am using a google map with markers and I have a search form above the map. I am trying to get onchange to update the GDownloadUrl() , thus narrowing the markers that load on the page.

Here is what I have tried:

<script type="text/javascript">
            function load() {
                if (GBrowserIsCompatible()) {
                    var map = new GMap2(document.getElementById("map"));
                    map.addControl(new GSmallMapControl());
                    map.addControl(new GMapTypeControl());
                    map.setCenter(new GLatLng(38.85682, -96.943359), 4);
                    var selector = document.getElementById("sport");
var url = "url here ?sport="+selector.options[selector.selectedIndex].value+"";
                    GDownloadUrl(url, function(data) {
                        var xml = GXml.parse(data);
                        var markers = xml.documentElement.getElementsByTagName("marker");
                        for (var i = 0; i < markers.length; i++) {
                            var name = markers[i].getAttribute("name");
                            var address = markers[i].getAttribute("address");
                            var type = markers[i].getAttribute("type");
                            var title = markers[i].getAttribute("title");
                            var id = markers[i].getAttribute("id");
                            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                            parseFloat(markers[i].getAttribute("lng")));
                            var marker = createMarker(point, name, address, type, title, id);
                            map.addOverlay(marker);
                        }
                    });
                }
            }
            </script> 

Link to page: http://michaelstevens.dyndns.org/athletenation/index.php?option=com_athletenation&view=Events&Itemid=3

Answer 1

I figured it out, it was pretty easy once I took a step back and thought about what I was trying to do:

function changeme(){

  var map; //clears current icons

//get the value of each input:
var e = document.getElementById("sport");
var strUser = e.options[e.selectedIndex].value;

var event = document.getElementById("event");
var strUserevent = event.options[event.selectedIndex].value;

var price = document.getElementById("price");
var strUserprice = price.options[price.selectedIndex].value;

var miles = document.getElementById("miles");
var strUsermiles = miles.options[miles.selectedIndex].value;

var zip = document.getElementById("zip");
var strUserzip = document.getElementById('zip').value;

  xmlurlsport = "?sport="+ strUser +"";
  xmlurlevent = "&event="+ strUserevent +"";
  xmlurlprice = "&price="+ strUserprice +"";
  xmlurlmiles = "&miles="+ strUsermiles +"";
  xmlurlzip = "&zip="+ strUserzip +"";

 var xmlurl = " url here "+xmlurlsport+""+xmlurlevent+""+xmlurlprice+""+xmlurlmiles+""+xmlurlzip+"";


                    var map = new GMap2(document.getElementById("map"));
                    map.addControl(new GSmallMapControl());
                    map.addControl(new GMapTypeControl());
                    map.setCenter(new GLatLng(38.85682, -96.943359), 4);


                    GDownloadUrl(xmlurl, function(data) {
                        var xml = GXml.parse(data);
                        var markers = xml.documentElement.getElementsByTagName("marker");
                        for (var i = 0; i < markers.length; i++) {
                            var name = markers[i].getAttribute("name");
                            var address = markers[i].getAttribute("address");
                            var type = markers[i].getAttribute("type");
                            var title = markers[i].getAttribute("title");
                            var id = markers[i].getAttribute("id");
                            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                            parseFloat(markers[i].getAttribute("lng")));
                            var marker = createMarker(point, name, address, type, title, id);
                            map.addOverlay(marker);
                        }
                    });




alert(xmlurl);

}