View video tutorial
HTML Google Map
HTML
Google map provides locations and other information to users.
Find your location
You can find your geographical position using Geolocation API on HTML page.
Since it it a privacy and security issue, the position will not be not available unless the you approve the permission.
Google Map
Google map gives information to user.
User can get the coordinates of a place.
Developers need Google API key to use in the website.
HTML Map Example
Click Show Map button to get the map.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Map Example</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 400px;
}
button {
width: 150px;
height: 50px;
background-color: rgb(235, 105, 53);
font-size: 14pt;
color: white;
border-radius: 10px;
margin:10px;
}
button:hover {
background-color: rgb(235, 75, 12);
color: white;
}
</style>
</head>
<body>
<h2>HTML Map Example</h2>
<p>Click Show Map button to get the map.</p>
<button onclick="showMap()">Show Map</button>
<div id="map"></div>
<script>
var center;
function initialize() {
// Initialize a location
// Create a LatLng object
// Now use this LatLng object to center the map and position the marker
center = new google.maps.LatLng(46.227638, 2.216749);
}
function showMap() {
// Set your map options
var mapOptions = {
zoom: 4,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Now create a map in the #map HTML element, using the declared options
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
// Create a marker and place it on the map
var marker = new google.maps.Marker({
position: center,
map: map
});
}
</script>
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize"
async defer></script>
</body>
</html>Click on the "See output" button to see how it works.