Google Map With Draggable Marker Example

Today we will learn google map with draggable marker example. Here, we will see how to add google map in your website. Google map is used to display location or address, google provides user to google API key to google map implementation in laravel.

Integrate google map in laravel is very easy to use google map, We need to add some javascript and jquery. So, just copy below code in your blade file to see output in your screen.

    <title>Google Map With Draggable Marker Example -</title>
    <style type="text/css">
        #map {
            width: 100%;
            height: 400px;
            border: 1px solid black;
<h1 style="text-align: center;">Google Map With Draggable Marker Example - </h1>  
<div id="map"></div>
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 =;
        document.getElementById('lon-span').innerHTML = latLng.lng();
<script src="" async defer></script> 





Techsolutionstuff | The Complete Guide

I'm a software engineer and the founder of Hailing from India, I craft articles, tutorials, tricks, and tips to aid developers. Explore Laravel, PHP, MySQL, jQuery, Bootstrap, Node.js, Vue.js, and AngularJS in our tech stack.