Get Lat Lng From Marker Google Maps API

Question

Can someone help me to see my code how i can get lat and lng from the marker if form was submitted.

HTML

<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" enctype="multipart/form-data" method="post" id="tambah">
<div class="billing-input">

    <div class="single-shipping-botton">
    <input id="pac-input" class="controls" type="text" placeholder="Input Location Name....">
    <div id="map" style="width:100%;height:500px;"></div>

</div>  
</div>
<button type="submit" onclick="saveData()">
    <span>Simpan</span>
</button>

Javascript

<script>

    function initMap() {
    var map = new google.maps.Map(
    document.getElementById("map"), {
    center: new google.maps.LatLng(1.474087, 124.841948),
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    google.maps.event.addListener(map, "click", function(e) {

    latLng = e.latLng;

    console.log(e.latLng.lat());
    console.log(e.latLng.lng());

    console.log("Marker");

    // if marker exists and has a .setMap method, hide it
    if (marker && marker.setMap) {
    marker.setMap(null);
    }
    marker = new google.maps.Marker({
    position: latLng,
    map: map
    });
    map.panTo(latLng);
    });


    var input = document.getElementById('pac-input');

    var autocomplete = new google.maps.places.Autocomplete(
        input, {placeIdOnly: true});
    autocomplete.bindTo('bounds', map);

    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

    var infowindow = new google.maps.InfoWindow();
    var infowindowContent = document.getElementById('infowindow-content');
    infowindow.setContent(infowindowContent);
    var geocoder = new google.maps.Geocoder;
    var marker = new google.maps.Marker({
      map: map
    });
    marker.addListener('click', function() {
      infowindow.open(map, marker);
    });

    autocomplete.addListener('place_changed', function() {
      infowindow.close();
      var place = autocomplete.getPlace();

      if (!place.place_id) {
        return;
      }
      geocoder.geocode({'placeId': place.place_id}, function(results, status) {

        if (status !== 'OK') {
          window.alert('Geocoder failed due to: ' + status);
          return;
        }
        map.setZoom(15);
        map.setCenter(results[0].geometry.location);   
            });
        });

    }

    function saveData() {
    var lat = marker.getPosition().lat();
    var lng = marker.getPosition().lng();

    }

Answer 1

Declare marker oustide any functions:

<script>

var marker = null;

function initMap() {
var map = new google.maps.Map(
...

Since you need it on the server side, you could use hidden variables on your form, like:

<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" enctype="multipart/form-data" method="post" id="tambah">
<div class="billing-input">

    <div class="single-shipping-botton">
    <input id="pac-input" class="controls" type="text" placeholder="Input Location Name....">
    <div id="map" style="width:100%;height:500px;"></div>

</div>  
</div>
<input type="hidden" name="lat" value="" />
<input type="hidden" name="lng" value="" />

<button type="submit" onclick="saveData()">
    <span>Simpan</span>
</button>

And use submit function to set those hidden variables:

function saveData() {
 document.formname.lat.value = marker.getPosition().lat();
 document.formname.lng.value = marker.getPosition().lng();
}

In you server side code, access the form variables sent in request.