Obtain Your API Key
- Ensure you have enabled the required API services in the Google Cloud Platform using your project.
- Obtain your unique API key. This key authenticates requests from your application to Google Maps services.
- Make sure that your API key is restricted to prevent unauthorized usage and possibly high charges.
Include the Google Maps JavaScript API Script
- Add the following script tag to your HTML document. Replace `YOUR_API_KEY` with the API key you obtained from Google Cloud Platform.
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
Initialize the Map
- Define a JavaScript function named `initMap`. This function will be called when the API script has been loaded.
- Within this function, utilize the `google.maps.Map` class to initialize the map.
<script>
function initMap() {
// Create a map object and specify the DOM element for display.
const map = new google.maps.Map(document.getElementById('map'), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8
});
}
</script>
Set Up HTML Container for the Map
- Create an HTML element to host the map. Ensure it has an id that matches what you use in the `initMap` function.
<div id="map" style="height: 500px; width: 600px;"></div>
Advanced Customizations
- Explore additional customization options such as setting map types, adding markers, and handling user interactions with documentation provided by the Google Maps Platform.
- Use event listeners such as `click` or `dragend` to create interactive applications.
map.addListener('click', function(event) {
// Do something with the click event, like adding a marker
new google.maps.Marker({
position: event.latLng,
map: map
});
});
