This tutorial shows you how to add a simple Google map with a marker to a web page.
You should knowledge of HTML and CSS, and a little knowledge of JavaScript.
Sample Example for google map
- Create Html
<!DOCTYPE html>
<html>
<head>
<title>Add Map</title>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIwzALxUPNbatRBj3Xi1Uhp0fFzwWNBkE&callback=initMap&libraries=&v=weekly"
defer
></script>
</head>
<body>
<h3>Sample Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
</body>
</html>
- Create CSS
- Create Javascript
// Initialize and add the map
function initMap() {
// The location
const uluru = { lat: -25.344, lng: 131.036 };
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: uluru,
});
const marker = new google.maps.Marker({
position: uluru,
map: map,
});
}
- Follow these steps to get an API key:
Go to the Google Cloud Console.
Create or select a project.
Click Continue to enable the API and any related services.
On the Credentials page, get an API key (and set the API key restrictions).
To prevent quota theft and secure your API key, see Using API Keys.
(Optional) Enable billing.
Copy the entire code of this tutorial from this page, to your text editor.
Replace the value of the
keyparameter in the URL with your own API key (that's the API key that you've just obtained).<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
Simple Steps - 1) create api 2) add above html, javascript 3) check it on webpage.
still if any issue please comment.
No comments:
Post a Comment