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
Laravel 11 Livewire Sweetalert Example
Laravel 11 Livewire Sweetalert...

Hello, laravel web developers! In this article, we'll see how to add sweetalert in laravel 11 Livewire. In laravel 1...

Read More

May-29-2024

jQuery Show and Hide Effects Example
jQuery Show and Hide Effects E...

Hello friends, in this tutorial, we will see jQuery show and hide effects example. jQuery show method and jQuery...

Read More

Jan-21-2022

How To Create User Roles And Permissions In Laravel 10
How To Create User Roles And P...

In this article, we will see how to create user roles and permissions in laravel 10. Here, we will learn about roles and...

Read More

Apr-03-2023

Laravel 9 Authentication Using Inertia JS
Laravel 9 Authentication Using...

In this article, we will see laravel 9 authentication using inertia js. Here, you can learn how to authenticat...

Read More

Dec-05-2022