Google Map With Draggable Marker Example


  • 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.
<title>Google Maps - Simple google map with draggable marker example</title>
<style type="text/css">
#map {
width: 100%;
height: 500px;
border: 2px solid red;
<h1 style="text-align: center;">Websolutionstuff - Simple 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>

I have added screenshot below for your reference.

Google Map
Google Map

Read Also: Google Recaptcha Example In Laravel

Please Give Us Feedback
I will highly appreciate if you give us any feedback or suggestion and claps!!




I am Laravel and PHP Developer. I have also Good Knowledge of JavaScript, jQuery, Bootstrap and REST API. Visit Website: