Home/ Questions/Q 7800199
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T00:33:27+00:00

I’m quite new to javascript (okay, I’ve spent only two days using it!). One

  • 0

I’m quite new to javascript (okay, I’ve spent only two days using it!). One of the things I want to do on my site is allow users to add a marker to a google map. I’ve been reading up on the googlemaps API the last couple of days and used one of the tutorials ( https://developers.google.com/maps/articles/phpsqlinfo_v3) and edited it for my needs. The latitude and longitude of the markers are passed into a SQL database using javascript. When I check the database, I can see that the markers have been added, which is great, but there’s no way of knowing if it has been successful from the user end. When I click the ‘submit’ button, the data is passed into the database but I would like to then redirect to another page, or display a message that it has been successful.

The code is:

var marker;

function initialize() {
  var latlng = new google.maps.LatLng(37.4419, -122.1419);
  var options = {
    zoom: 13,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), options);

google.maps.event.addListener(map, "click", function(event) {
    marker = new google.maps.Marker({
      position: event.latLng,
      map: map
    });
});
}

  function saveData() {
  var latlng = marker.getPosition();

  var url = "phpsqlinfo_addrow.php?lng=" + latlng.lng() + "&lat=" + latlng.lat();

  downloadUrl(url, function(data, responseCode) {
       if (responseCode == 200 && data.length <= 1) {
     window.navigate('index.html')
    }
  });
}

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);
}

function doNothing() {}
</script>

<link rel="stylesheet" type="text/css" href="style.css"/>
<body onload="initialize()">
<div id="container">
<div id="map_canvas" style="width: 938px; height: 600px">
</div>
</div>
<div id="footer">
<table>
<tr><td><input type='button' value='Save Marker' onclick='saveData()'/></td></tr>
</div>
</body>
</html>

I deleted some of the unnecessary stuff from there. The problem seems to lie in ‘window.navigate’ part, but much searching hasn’t got me any further.

Any help is appreciated!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    1) You’re missing a semi-colon at the end of your line

    window.navigate('index.html')

    So change it to: 

    window.navigate("index.html");

    notice the addition of the semi-colon.

    2) Use this instead as this works in all browsers:

    window.location.href = '...';

    Anyway the first thing to do is to check that your if statement is actually being executed. So print something out to the browser instead of redirecting to another page. If nothing is printed then you know your if statement is not even being executed. Then what you can do is check the variables that require the if statement to be executed. So you can print the data variable out to the browser before testing the if statement and seeing whether the condition is true. in your case the data.length needs to be <1… so print out the data variable before and make sure that it is less than one… if not then you know why your if statement is not being executed and therefor knowing why your web page isnt being redirected!

    • 0