Google Map With Draggable Marker Example

Websolutionstuff | Jun-11-2020 | Categories : Laravel PHP jQuery

In this example I will show you how to add a google map to your website, In many websites you can see they have added maps on their website to display location or address, here we also display a google map for our website.

So, let's see google map with draggable marker example in laravel, google map API in laravel, how to add a google map in laravel 7/8, integrate google map in laravel, google map API key, google map marker in javascript, google map API integration in laravel 8

It is very easy to use google map, We need to add some javascript and jquery. So, just copy the below code in your blade file and see the output on 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>

 

 

Output:

 google map

 


You might also like:

Recommended Post
Featured Post
How to Send E-mail Using Queue in Laravel 7/8
How to Send E-mail Using Queue...

Today I will show you how to send e-mail using queue in laravel 7/8, many times we can see some processes take...

Read More

Oct-30-2020

How To Backup Database In Laravel 9 Using Spatie
How To Backup Database In Lara...

In this article, we will see how to back up the database in laravel 9 using spatie. Here, we will learn automatic&n...

Read More

Feb-08-2023

How To Get Current Week Records In MySQL
How To Get Current Week Record...

In this tutorial, we will see how to get current week records in MySQL. Many times we need to get current week reco...

Read More

Feb-07-2022

How To Add Datepicker In Angular 15 Material
How To Add Datepicker In Angul...

In this tutorial, I will guide you through the process of adding a datepicker component to your Angular 15 application u...

Read More

Jun-28-2023