DEV Community

loading...

Google Map With Draggable Marker Example

websolutionstuff profile image Websolutionstuff Originally published at websolutionstuff.com ・1 min read
  • In this example I will show you how to add google map in your website, In many website you can see they have added map in their website to display location or address, here we are also display google map for our website.

  • It is very easy to use google map, We need to add some java script and jQuery. So, just copy below code in your blade file and see output in your screen.

<html>
<head>
    <title>Google Maps - Simple google map with draggable marker example</title>
    <style type="text/css">
        #map {
            width: 100%;
            height: 500px;
            border: 2px solid red;
        }
    </style>
</head>
<body>   
<h1 style="text-align: center;">Websolutionstuff - Simple google map with draggable marker example</h1>  
<div id="map"></div>
<script>
function initMap() {
    var myLatLng = {lat: 22, lng: 77};

    var map = new google.maps.Map(document.getElementById('map'), {
      center: myLatLng,
      zoom: 4
    });

    var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: 'Google Maps',
          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>
Enter fullscreen mode Exit fullscreen mode

I have added screenshot below for your reference.

Google Map With Draggable Marker Example

Read Also: Google Recaptcha Example In Laravel

Please Give Us Feedback

I will highly appreciate if you give us any feedback or suggestion.

Discussion (0)

pic
Editor guide