Saving longitude and latitude into array JavaScript Google Maps APIs EVENT

Question

So far I can click on the map and then the Longitude and Latitude will be shown on the text field below the map, on the next click the marker will move to the new location and the new Longitude and Latitude will be shown on the text field. But I'm trying to make the shown Longitude and Altitude to be saved once the "SAVE" button is clicked, so the marker will be there and not move on the next click. Sorry for my horrible explanation skill guys, TLDR: How can i store the current longitude and latitude without it disappearing on the next click ? Here's my code to show the current longitude and latitude

function taruhMarker(petasaya, posisiTitik){
    if( marker ){
        marker.setPosition(posisiTitik);
    }
    else {
        marker = new google.maps.Marker({
            position: posisiTitik,
            map: petasaya
        });
    }
    document.getElementById("lat").value = posisiTitik.lat();
    document.getElementById("lng").value = posisiTitik.lng();
    document.getElementById("info").value = posisiTitik.info();
}

And here's the code i use for the text field and button

    <tr>
        <td><input type="text" id="lat" name="lat" value="" readonly> </td>
        <td><input type="text" id="lng" name="lng" value="" readonly></td>
    </tr>
    <tr>
        <td><h3> Info Marker </h3></td>
    </tr>
</table>

<center><textarea rows="7" cols="50" ></textarea><br><br>
<center><input button type="button" id="button" value="SAVE"></input>

I live in Indonesia so most of the variables i use are in Indonesian languages

What did you try so far to attempt to save the lat/lng values? — Skwal
– Skwal, Commented Apr 4, 2018 at 17:44
I'm still new to JavaScript, but i've tried to store it in array using some references from some videos, with button.onlick = function(){} then try to put it inside the array. But i don't know how to code it... only guessing so far, but nothing new — DrunkLobster
– DrunkLobster, Commented Apr 4, 2018 at 17:53

Xer Charles · Accepted Answer · 2018-04-05 03:35:49Z

You can simply store multiple markers in an array in order to distinguish each, and display it's corresponding coordinates to your input texts without the use of "SAVE" button.

I tried to utilize and replicate the piece of code you've provided(including variables) and here's what i've came up:

It is important that you set global variable markers as an array: var markers = [];

  function taruhMarker(posisiTitik) {
    var marker = new google.maps.Marker({
      position: posisiTitik,
      map: map

    });
    markers.push(marker);

  document.getElementById("lat").value = posisiTitik.lat();
  document.getElementById("lng").value = posisiTitik.lng();

Working JSBin: http://jsbin.com/zayejuc

I've also added code snippet below:

var map;
var markers = [];

function initMap() {
  var haightAshbury = {lat: -5.4031649, lng: 105.2635957};

  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: haightAshbury
  });


  // This event listener will call addMarker() when the map is clicked.
  map.addListener('click', function(event) {
    taruhMarker(event.latLng);

  });

}

// Adds a marker to the map and push to the array.
function taruhMarker(posisiTitik) {
  var marker = new google.maps.Marker({
    position: posisiTitik,
    map: map

  });
  markers.push(marker);

  document.getElementById("lat").value = posisiTitik.lat();
  document.getElementById("lng").value = posisiTitik.lng();


  marker.addListener('click', function() {
    infowindow.open(map, marker);

  });

  //delete markers
  var tst = 1;
  var contentString = posisiTitik+'<br>'+'<input onclick="deleteMarkers('+markers.length+');" type=button value="Delete Marker">';


  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });


}


function deleteMarkers(tst) {
  markers[tst-1].setMap(null)

}

#map {
  height: 100%;
}
#floating-panel
{
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
  </head>
  <body>
    <div id="map"></div>
    <div id="floating-panel">
      <input id="lat" type="text" placeholder="Latitude">
      <input id="lng" type="text" placeholder="Longitude">
    </div>

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

Collectives™ on Stack Overflow

Saving longitude and latitude into array JavaScript Google Maps APIs EVENT

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related