Google map : Get latitude and longitude on mouse position

Question

I just implemented a lat long in my laravel application.When i added address on map it suggest an address when i select addressit returns lat-long.I just want that lat long on mouse position on map. So how can id o this. Added all code which is working on selecting on address.

Here is my view code

<div class="form-group">
        <label class="col-sm-2 control-label"></label>
        <div class="col-md-6">
            <h3 class="text-center"></h3>
            <input id="searchInput" class="form-control" type="text" placeholder="Enter a location">
            <div class="google-map" id="map"></div>
        </div>
    </div>



    <div class="form-group"><label class="col-sm-2 control-label">Latitude </label>
    <div class="col-sm-6">
        <input type="text" readonly name="latitude" id="latitude" @if(isset($activity)) value="{{ $activity->latitude }}"  @else value="{{ old('latitude') }}" @endif class="form-control">
        @if ($errors->has('latitude'))
        <div class="text-left" style="color:red;">
            <strong>Alert !</strong> {{ $errors->first('latitude') }}
        </div>
        @endif
    </div>
    </div>


    <div class="form-group"><label class="col-sm-2 control-label">Longitude </label>
    <div class="col-sm-6">
        <input type="text" readonly name="longitude" id="longitude" @if(isset($activity)) value="{{ $activity->longitude }}"  @else value="{{ old('longitude') }}" @endif class="form-control">
        @if ($errors->has('longitude'))
        <div class="text-left" style="color:red;">
            <strong>Alert !</strong> {{ $errors->first('longitude') }}
        </div>
        @endif
    </div>
    </div>

Here is map script:

<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
  center:new google.maps.LatLng(20.593684,78.96288000000004),
  zoom: 4
});
var input = document.getElementById('searchInput');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);

var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
    map: map,
    anchorPoint: new google.maps.Point(0, -29)
});

autocomplete.addListener('place_changed', function() {
    infowindow.close();
    marker.setVisible(false);
    var place = autocomplete.getPlace();
    if (!place.geometry) {
        window.alert("Autocomplete's returned place contains no geometry");
        return;
    }

    // If the place has a geometry, then present it on a map.
    if (place.geometry.viewport) {
        map.fitBounds(place.geometry.viewport);
    } else {
        map.setCenter(place.geometry.location);
        map.setZoom(17);
    }
    marker.setIcon(({
        url: place.icon,    
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(35, 35)
    }));    
    marker.setPosition(place.geometry.location);
    marker.setVisible(true);

    var address = '';
    if (place.address_components) {
        address = [
          (place.address_components[0] && place.address_components[0].short_name || ''),
          (place.address_components[1] && place.address_components[1].short_name || ''),
          (place.address_components[2] && place.address_components[2].short_name || '')
        ].join(' ');
    }

    /* infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
    infowindow.open(map, marker);*/

    //document.getElementById('addressTwo').value = place.formatted_address;
    document.getElementById('latitude').value = place.geometry.location.lat();
    document.getElementById('longitude').value = place.geometry.location.lng();
}); } </script>

View Screen :

How can i do that?

Answer 1

A few ways to do this, you'll first need to access the map project, whether it be the map object or an overlay.

For a map object use:

map.getProjection().fromPointToLatLng(new google.maps.Point(x, y))

From an overlay you would use:

overlay.getProjection().fromContainerPixelToLatLng(new google.maps.Point(x, y));

Alternatively, you can add an event listener on mousedown to capture the pointers position and extract the latlng:

google.maps.event.addListener(map, 'mousemove', function (event) {
    // do something with event.latLng
});