Ad Unit (Iklan) BIG

how to get the exact location of a user with google maps api

how to get the exact location of a user with google maps api
most geolocation services use network routing addresses or internal GPS devices to determine this location. geolocation is a device-specific api.

<!DOCTYPE html>

<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="refresh" content="25" />
    <title>using google map api exact location find users..</title>
</head>
<body>
    <span id="latlng" style="display: none;"></span>
    <div id="map" style="width: 100%;height: 300px;"></div>
    <marquee behavior="alternative" direction="center" scrollamount="12">
    <h3 id="useaddressinfo">Client Address Is Here: <span id="address"></span></h3>
    </marquee>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7ySADLW8s5JR9LvasMVvQ_1S84JgYNzo&callback=initMap"
        async defer></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        var marker = null;
        function initMap() {
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 8,
                center: {
                    lat: 22.309,
                    lng: 72.136
                }
            });
            var geocoder = new google.maps.Geocoder;
            var infowindow = new google.maps.InfoWindow;
            function gotLocation(position) {
                var location = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                map.setCenter(location);
                var lat = position.coords.latitude;
                var log = position.coords.longitude;
                $("#latlng").html(lat + ',' + log);
            }
            navigator.geolocation.getCurrentPosition(gotLocation);
            window.onload = function () {
                geocodeLatLng(geocoder, map, infowindow);
            }
        }
        function geocodeLatLng(geocoder, map, infowindow) {
            var input = $("#latlng").text();
            var latlngStr = input.split(',', 2);
            var latlng = {
                lat: parseFloat(latlngStr[0]),
                lng: parseFloat(latlngStr[1])
            };
            geocoder.geocode({
                'location': latlng
            }, function (results, status) {
                console.log(results);
                if (status === 'OK') {
                    if (results[1]) {
                        if (results[1].formatted_address != null) {
                            $("#useaddressinfo").show();
                            $("#address").html(results[1].formatted_address);
                        }
                        map.setZoom(11);
                        var marker = new google.maps.Marker({
                            position: latlng,
                            map: map
                        });
                        infowindow.setContent(results[1].formatted_address);
                        infowindow.open(map, marker);
                    } else {
                        window.alert('no results found');
                    }
                } else {
                    window.alert('geocoder failed due to: ' + status);
                }
            });
        }
    </script>
</body>
</html>

Post a Comment

0 Comments