Created
April 23, 2023 21:42
-
-
Save muath-ye/0f9006b9408b9b9d976c4f177120be62 to your computer and use it in GitHub Desktop.
A step-by-step tutorial explaining how to use the Google Maps JavaScript API to display a map and allow the user to choose a location.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Choose Your Location</title> | |
</head> | |
<body> | |
<!-- A div to contain the map --> | |
<div id="map" style="height: 400px; width: 100%;"></div> | |
<!-- Script to load the Google Maps API and create the map --> | |
<script src="https://maps.googleapis.com/maps/api/js?key={{ config('app.google.maps') }}&callback=Function.prototype"></script> | |
<script> | |
// Set default map options, including center and zoom level | |
var mapOptions = { | |
center: new google.maps.LatLng(0, 0), // Default to center of the world | |
zoom: 2 // Default zoom level | |
}; | |
// Create a new map object in the "map" div with the default map options | |
var map = new google.maps.Map(document.getElementById("map"), mapOptions); | |
// If the user's browser supports geolocation, try to get the user's current location | |
if (navigator.geolocation) { | |
navigator.geolocation.getCurrentPosition(function(position) { | |
// If successful, create a marker at the user's current location | |
var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); | |
var marker = new google.maps.Marker({ | |
position: userLatLng, | |
map: map, | |
draggable: true // Allow the user to drag the marker to choose a location | |
}); | |
// Center the map on the user's location and zoom in for detail | |
map.setCenter(userLatLng); | |
map.setZoom(13); | |
// Add an event listener to the marker's dragend event, which fires when the user finishes dragging the marker | |
google.maps.event.addListener(marker, "dragend", function() { | |
// Log the latitude and longitude of the marker's new position to the console | |
var latLng = marker.getPosition(); | |
console.log("Chosen location: " + latLng.lat() + ", " + latLng.lng()); | |
}); | |
}, function() { | |
// If geolocation fails, create a marker at the center of the map | |
console.log("Geolocation service failed."); | |
var marker = new google.maps.Marker({ | |
position: map.getCenter(), | |
map: map, | |
draggable: true | |
}); | |
// Add an event listener to the marker's dragend event, as before | |
google.maps.event.addListener(marker, "dragend", function() { | |
var latLng = marker.getPosition(); | |
console.log("Chosen location: " + latLng.lat() + ", " + latLng.lng()); | |
}); | |
}); | |
} else { | |
// If geolocation is not supported, create a marker at the center of the map | |
console.log("Geolocation service not supported."); | |
var marker = new google.maps.Marker({ | |
position: map.getCenter(), | |
map: map, | |
draggable: true | |
}); | |
// Add an event listener to the marker's dragend event, as before | |
google.maps.event.addListener(marker, "dragend", function() { | |
var latLng = marker.getPosition(); | |
console.log("Chosen location: " + latLng.lat() + ", " + latLng.lng()); | |
}); | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
blade example
An example for Laravel blade that stores the current location when validation failed or retrieve the address from db
This blade can be used for create and update forms at the same time