Google Maps API – Simple google map with draggable marker tutorial

Hi Artisan, In this blog to google map with draggable marker tutorial. yes i can we provide your simply and easy code with you and get this code run to the done of the day of you.

You have to simple copy & Paste below code and paste on your Code. Open your code and run your browser.

Preview Of Google map with draggable marker tutorial:

Google map with draggable marker tutorial

mapsforgoogle.html


<!DOCTYPE html>
<html>
<head>
    <title>Google Maps API - Simple google map with draggable marker Example Laratuto.com</title>
    <style type="text/css">
        #map {
            width: 100%;
            height: 400px;
        }
    </style>
</head>
<body>
   
<h1>Google Maps API - Simple google map with draggable marker Example</h1>
  
<div id="map"></div>
<ul id="geoData">
    <li>Latitude: <span id="lat-span"></span></li>
    <li>Longitude: <span id="lon-span"></span></li>
</ul>
  
<script>
function initMap() {
    var myLatLong = {lat: 21.1695527, lng: 72.831197};
  
    var map = new google.maps.Map(document.getElementById('map'), {
      center: myLatLong,
      zoom: 23
    });
  
    var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: 'Hello Laratuto!',
          draggable: true
        });
  
     google.maps.event.addListener(marker, 'dragend', function(marker) {
        var latLng = marker.latLng;
        document.getElementById('lat-span').innerHTML = latLng.lat();
        document.getElementById('lon-span').innerHTML = latLng.lng();
     });
}
  
</script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap" async defer></script>
  
</body>
</html>

Hello, I can help you…

Real Also: Surprise Developer

1 thought on “Google Maps API – Simple google map with draggable marker tutorial”

Leave a Comment