CODEWITHSUNDEEP
javascriptgoogle-maps
DrunkLobster
DrunkLobster

Reputation: 11

Saving longitude and latitude into array JavaScript Google Maps APIs EVENT

Preview

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

Upvotes: 0

Views: 1191

Answers (1)

Xer Charles
Xer Charles

Reputation: 251

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>

Upvotes: 1

Related Questions