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>
I have added screenshot below for your reference.
