Home/ Questions/Q 7810939
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T03:58:26+00:00

I’m completely new to both javascript and the googlemaps api but have had some

  • 0

I’m completely new to both javascript and the googlemaps api but have had some great help on here the past few days and progressed my website a lot (thanks!). Now, I have a new problem. What I want to do, is load a set of markers from a database to a map, and then allow the user to input values into a form to filter the markers (For example, putting minimum and maximum length fields).

Here’s my code, I hope it’s understandable:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//<![CDATA[

var icons = {
    icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
};

function load() {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(51.5100, 0.0000),
    zoom: 10,
    mapTypeId: 'roadmap'
  }); 

  var infoWindow = new google.maps.InfoWindow;

  //min and max ride lengths sent from form
  var minlength = document.getElementById("minlength").value;   
  var maxlength = document.getElementById("maxlength").value;

  // Change this depending on the name of your PHP file
  downloadUrl("phpsqlajax_genxml.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {

    var length = markers[i].getAttribute("length");

     if (minlength < length && length < maxlength) { 
      var date = markers[i].getAttribute("date");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
      var html = "<b>Date: " + date + "</b> <br/>Length: " + length;
      var icon = icons;
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon,
        shadow: icon.shadow
      });
      bindInfoWindow(marker, map, infoWindow, html);
     }
    }
  });
}

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

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>
</head>

<link rel="stylesheet" type="text/css" href="style.css" />
<body onload="load()">
<div id="container">
<div id="maincontent">
<form name="findride">
Min length: <input type="number" id="minlength">(miles)<br>
Max length: <input type="number" id="maxlength">(miles)<br>
<input type="button" value="Update" onClick="load()"/>
<div id="map"></div>
</div>
</div>

The problem I am having, is that the map does not display the points before the user fills in the field and updates (I tried to set some initial maxlength and minlength values, but that didnt work either). After the user enters this data, the points are displayed, but the map keeps re-centering – I would prefer it to stay in the same position and just have the markers change.

Well, maybe this is a bit out of my reach but if it can be done simply, I would really appreciate the help.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Changing your HTML to this :

    Min length: <input type="number" id="minlength" value="5">(miles)<br>
Max length: <input type="number" id="maxlength" value="5">(miles)<br>

    I have added value="5" to both inputs this means that when the script runs on load it should add some markers – you may need to change the number 5 to a more suitable value

    Should fix the markers on startup issue.

    And by default the map doesnt centre when adding a marker – see this simple example I add a marker at the centre point on load and then add another maker 3 seconds later – the map doesnt centre ….

    • 0