Google maps javascript implementation with form post of address to geocoder

Question

So I'm trying to implement something as a test case as I play around with JavaScript. I have a site where a user enters in an address then I get the latitude/longitude from google, then get a map based centered on that location.

Problem is I feel as I did that, but as I go through my debugging of it, it gets the map, then seems to revert back to the main page and stock "first visit" look when the dust settles. Anyway, here's the html (minus my api key)

 <!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <link rel = "stylesheet" type = "text/css" href = "Project2.css">
    <script src = "jsfile.js"></script>

  </head>
  <body>

  <Form  class = "leftStuff">
    <label for = "address">Address:</label>
    <input type = "text" id = "addrQuery" name = "address"/>
    <button onclick='BeenClicked()'>Add</button>
  </Form>



  <div id="parent">
    <div id = "sidebuttons">
      <ul id ="rctSearchList">
      </ul>
    </div>
    <div id="mapHolder" class = "leftStuff">
      <div id="map"></div>
    </div>
  </div>

  <script async defer
    src="https://maps.googleapis.com/maps/api/js?callback=initMap">
  </script>

  </body>
</html>

//begin jsfile.js
    function initMap() {
        var map;
        if($('#rctSearchList').children().length <= 0)
        {
            map = new google.maps.Map(document.getElementById('map'), {
            center: {lat:41.08394699999999, lng: -74.176609},
            zoom: 8
            });
        }
        else
        {
            var lat = $('#rctSearchList li:last-child').data('coords').lat;
            var lng = $('#rctSearchList li:last-child').data('coords').lng;
            console.log(lat);

            map = new google.maps.Map(document.getElementById('map'), {
            center: {lat:lat, lng: lng},
            zoom: 8
            });
        }
    }

     function BeenClicked()
     {
        var address = document.getElementById('addrQuery').value;
        //replace each space with a plus sign
        address = address.replace(/ /g, '+');

        //get the json document from google
        var url = "http://maps.googleapis.com/maps/api/geocode/json?address=" + address + "&sensor=false";


        var jax = $.get(url, function(data, status){

                var latitude = data.results[0].geometry.location.lat
                var longitude = data.results[0].geometry.location.lng;
                address = data.results[0].formatted_address;

                var str = "<li>" + address + "</li>";
                var li = $(str);

                li.data( "coords", {lat :latitude, lng : longitude });


                li.css("background-color : gray");


                $("#rctSearchList").append(li);
                initMap()
        });

Answer 1

Add onsubmit="return false;" to your form.

code snippet:

 function initMap() { var map; if ($('#rctSearchList').children().length <= 0) { map = new google.maps.Map(document.getElementById('map'), { center: { lat: 41.08394699999999, lng: -74.176609 }, zoom: 8 }); } else { var lat = $('#rctSearchList li:last-child').data('coords').lat; var lng = $('#rctSearchList li:last-child').data('coords').lng; console.log(lat); map = new google.maps.Map(document.getElementById('map'), { center: { lat: lat, lng: lng }, zoom: 8 }); } } google.maps.event.addDomListener(window, 'load', initMap); function BeenClicked() { var address = document.getElementById('addrQuery').value; //replace each space with a plus sign address = address.replace(/ /g, '+'); //get the json document from google var url = "http://maps.googleapis.com/maps/api/geocode/json?address=" + address; var jax = $.get(url, function(data, status) { var latitude = data.results[0].geometry.location.lat var longitude = data.results[0].geometry.location.lng; address = data.results[0].formatted_address; var str = "<li>" + address + "</li>"; var li = $(str); li.data("coords", { lat: latitude, lng: longitude }); li.css("background-color : gray"); $("#rctSearchList").append(li); initMap() }); }

 html, body, #parent, #mapHolder, #map { height: 100%; width: 100%; margin: 0px; padding: 0px }

 <script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <Form class="leftStuff" onsubmit="return false;"> <label for="address">Address:</label> <input type="text" id="addrQuery" name="address" value="New York, NY" /> <button onclick='BeenClicked()'>Add</button> </Form> <div id="parent"> <div id="sidebuttons"> <ul id="rctSearchList"></ul> </div> <div id="mapHolder" class="leftStuff"> <div id="map"></div> </div> </div>

Google maps javascript implementation with form post of address to geocoder

Question

1 answers

solution1
0 ACCPTED 2015-11-19 04:59:47

Google maps javascript implementation with form post of address to geocoder

Question

1 answers

solution1 0 ACCPTED 2015-11-19 04:59:47

solution1
0 ACCPTED 2015-11-19 04:59:47