farindra/google_maps_geolocation_marker.blade.php

## google_maps_geolocation_marker.blade.php
<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

    function initMap(){
      if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(render,error,{maximumAge:10000, timeout:5000, enableHighAccuracy: true});
      } else {
          alert( "{{ __('error_common.geolocation_unsupported') }}" );
      }
    }

    function error(msg) {alert("{{ __('error_common.geolocation_disabled') }}");}


    function render(position) {
        console.log(position);

        var latitude = position.coords.latitude || -6.234055376784218 ;
        var longitude = position.coords.longitude || 106.74549458076477;
        var accuracy = position.coords.accuracy || 1000;
        var coords = new google.maps.LatLng(latitude, longitude);

        var mapOptions = {
            zoom: 15,
            center: coords,
            mapTypeControl: true,
            navigationControlOptions: {
                style: google.maps.NavigationControlStyle.SMALL
            },
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };


        var map = new google.maps.Map(document.getElementById('map'),mapOptions);


        marker = new google.maps.Marker({
          map: map,
          draggable: true,
          animation: google.maps.Animation.DROP,
          position: coords
        });

        google.maps.event.addListener(marker, 'dragend',
          function(marker) {
            var latLng = marker.latLng;
            currentLatitude = latLng.lat();
            currentLongitude = latLng.lng();
            console.log(currentLatitude,currentLongitude);
            // $("#la").val(currentLatitude);
            // $("#lo").val(currentLongitude);
          }
        );
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_API_KEY&callback=initMap" async defer></script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Simple Map</title>
	<meta name="viewport" content="initial-scale=1.0">
	<meta charset="utf-8">
	<style>
	/* Always set the map height explicitly to define the size of the div
	* element that contains the map. */
	#map {
	height: 100%;
	}
	/* Optional: Makes the sample page fill the window. */
	html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	}
	</style>
	</head>
	<body>
	<div id="map"></div>
	<script>

	function initMap(){
	if (navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(render,error,{maximumAge:10000, timeout:5000, enableHighAccuracy: true});
	} else {
	alert( "{{ __('error_common.geolocation_unsupported') }}" );
	}
	}

	function error(msg) {alert("{{ __('error_common.geolocation_disabled') }}");}




	function render(position) {
	console.log(position);

	var latitude = position.coords.latitude \|\| -6.234055376784218 ;
	var longitude = position.coords.longitude \|\| 106.74549458076477;
	var accuracy = position.coords.accuracy \|\| 1000;
	var coords = new google.maps.LatLng(latitude, longitude);

	var mapOptions = {
	zoom: 15,
	center: coords,
	mapTypeControl: true,
	navigationControlOptions: {
	style: google.maps.NavigationControlStyle.SMALL
	},
	mapTypeId: google.maps.MapTypeId.ROADMAP
	};



	var map = new google.maps.Map(document.getElementById('map'),mapOptions);


	marker = new google.maps.Marker({
	map: map,
	draggable: true,
	animation: google.maps.Animation.DROP,
	position: coords
	});

	google.maps.event.addListener(marker, 'dragend',
	function(marker) {
	var latLng = marker.latLng;
	currentLatitude = latLng.lat();
	currentLongitude = latLng.lng();
	console.log(currentLatitude,currentLongitude);
	// $("#la").val(currentLatitude);
	// $("#lo").val(currentLongitude);
	}
	);
	}
	</script>
	<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_API_KEY&callback=initMap" async defer></script>
	</body>
	</html>