CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Tobi Ajala
Tobi Ajala

Reputation: 107

How do I get rid of the map in this code?

I have this piece of javascript that has a search form and allows the user to input a postcode and it returns the latitude and longitude values of that postcode as well as pinpoints it on a map. How do I get rid of the map and get the page to display just the latitude and longitude values? I tried erasing what I thought was everything to do with the map but it completely failed to work so I hope somebody can help me!

Code:

<style type="text/css">
  #map
  {
    height:400px;
    width:400px;
    display:block;
  }
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY-API"></script>
<script type="text/javascript">

  function getPosition(callback) {
    //set up our geoCoder
    var geocoder = new google.maps.Geocoder();

    //get our postcode value
    var postcode = document.getElementById("postcode-bar").value;

    //send value to google to get a longitude and latitude value
    geocoder.geocode({'address': postcode}, function(results, status) {

      //callback with a status and result
      if (status == google.maps.GeocoderStatus.OK) {
        //send the values back in a JSON string
        callback({
          latt: results[0].geometry.location.lat(),
          long: results[0].geometry.location.lng()
        });
      }
    });
  }
function setup_map(latitude, longitude) {

    //create a JSON object with the values to mark the position
    var _position = { lat: latitude, lng: longitude};

    //add our default mapOptions
    var mapOptions = {
      zoom: 16              //zoom level of the map
      center: _position     //position to center
  }

    //load a map within the "map" div and display
    var map = new google.maps.Map(document.getElementById('map'), mapOptions);

    //add a marker to the map with the position of the longitude and latitude
    var marker = new google.maps.Marker({
      position: mapOptions.center,
      map: map
    });
}
window.onload = function() {

    //first setup the map, with our default location of London
    setup_map(51.5073509, -0.12775829999998223);

    document.getElementById("form").onsubmit = function() {

      //when form is submitted, wait for a callback with the longitude and latitude values
      getPosition(function(position){

        //log the position returned
        var text = document.getElementById("text")
        text.innerHTML = "Marker position: { Longitude: "+position.long+ ",  Latitude:"+position.latt+" }";

        //update the map with the new position
        setup_map(position.latt, position.long);
      });
    }
}

</script>

</head>
<body>


<div id="postcode-search" class="input-group">

  <form action="javascript:void(0)" id="form">

    <input id="postcode-bar" class="form-control" placeholder="Enter your postcode" type="text"></input>
    <span class="input-group-btn">
      <button class="btn btn-default" id="postcode-btn" type="button">Go</button>
    </span>

  </form>

</div>

<div id="map"></div>
<div id="text"></div>

Upvotes: 0

Views: 47

Answers (1)

Filchev
Filchev

Reputation: 224

Do not execute setup_map() function.

window.onload = function() {

//first setup the map, with our default location of London
setup_map(51.5073509, -0.12775829999998223);

document.getElementById("form").onsubmit = function() {

  //when form is submitted, wait for a callback with the longitude and latitude values
  getPosition(function(position){

    //log the position returned
    var text = document.getElementById("text")
    text.innerHTML = "Marker position: { Longitude: "+position.long+ ",  Latitude:"+position.latt+" }";

    //update the map with the new position
    setup_map(position.latt, position.long);
  });
}
}

to

window.onload = function() {
  //first setup the map, with our default location of London
  // setup_map(51.5073509, -0.12775829999998223);

    document.getElementById("form").onsubmit = function() {

      //when form is submitted, wait for a callback with the longitude and latitude values
      getPosition(function(position){

        //log the position returned
        var text = document.getElementById("text")
    text.innerHTML = "Marker position: { Longitude: "+position.long+ ",  Latitude:"+position.latt+" }";


    //update the map with the new position
    //setup_map(position.latt, position.long);
  });
}
}

You could delete the function but you never know when you might need it..

Upvotes: 1

Related Questions