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.
<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>
Google Map
Google Map

--

--

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Websolutionstuff

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