175 views
HTML Google Maps
To integrate Google Maps into an HTML document, you can use the Google Maps JavaScript API. Here’s a basic example of how to embed and display a Google Map on your web page:
Get a Google Maps API Key:
- Visit the Google Cloud Platform Console and create a new project or select an existing project.
- Enable the Google Maps JavaScript API for your project and generate an API key.
Add the API script to your HTML:
- Inside the
<head>section of your HTML document, include the following script tag to load the Google Maps API:
HTML<span role="button" tabindex="0" data-code=" <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY">
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>Replace YOUR_API_KEY with the API key you obtained in step 1.
Create a map container:
- In the
<body>section of your HTML, create a<div>element with an id to serve as the container for your map. For example:
HTML<span role="button" tabindex="0" data-code=" <div id="map">
<div id="map"></div>Initialize and display the map:
- Add a
<script>tag below the previous script tag in your HTML to initialize and display the map. Here’s an example:
HTML<span role="button" tabindex="0" data-code=" <script>
function initMap() {
var map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 37.7749, lng: -122.4194 }, // Coordinates for the map center
zoom: 12, // Zoom level (1-20)
});
}
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 37.7749, lng: -122.4194 }, // Coordinates for the map center
zoom: 12, // Zoom level (1-20)
});
}
</script>Call the initMap() function:
- Add an
onloadattribute to the<body>tag to call theinitMap()function when the page loads:
HTML<span role="button" tabindex="0" data-code="
<body onload="initMap()">Style and customize the map (optional):
- You can further customize the map by adjusting the map center, zoom level, adding markers, overlays, and more. Refer to the Google Maps JavaScript API documentation for detailed instructions on customizing your map.
That’s it! With these steps, you should have a basic Google Map embedded in your HTML page. Remember to replace YOUR_API_KEY with your actual API key obtained from the Google Cloud Platform Console.