Google Maps API is a powerful API that allows you to embed Google Maps in your web page and customize their behavior and appearance using JavaScript. With Google Maps API, you can add markers, shapes, and other overlays to the map, create interactive maps with custom info windows and controls, and even create Street View experiences. The API is available for both free and paid usage, depending on your needs.
Here’s an example of how to use the Google Maps API in your HTML code:
- First, you need to include the API script in your HTML file. You can do this by adding the following line to the head section of your HTML file:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
Note that you need to replace YOUR_API_KEY with your own API key, which you can obtain from the Google Cloud Console.
- Next, you need to create a div element where the map will be displayed. You can do this by adding the following line to the body section of your HTML file:
<div id="map"></div>
- Finally, you need to create a script block where you can initialize the map and add any customizations. Here’s an example of how to initialize a map with a marker at a specific location:
<script>
// Initialize the map
function initMap() {
var myLatLng = {lat: 37.7749, lng: -122.4194}; // San Francisco, CA
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: myLatLng
});
// Add a marker
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'San Francisco, CA'
});
}
</script>
Note that you need to call the initMap function after the API script has loaded. You can do this by adding the following line to the body section of your HTML file:
<body onload="initMap()">
With these three steps, you can easily embed a Google Map in your web page using the Google Maps API. Of course, you can customize the map with additional options and features, such as adding custom markers, changing the map type, and more. The Google Maps API documentation is a great resource for learning more about the available options and features.