Display Google Map On The Screen Using JavaScript
Last modified on April 17th, 2023
Raja Tamil
Include Google Maps API
Include Google Maps API Library with your own API Key in the index.html before the end of the body tag.
<script src="https://maps.googleapis.com/maps/api/js?key=[YOURAPIKEY]"></script>
Create A Map Element
Create a div
element with an id called map, which is basically the canvas where the Gooogle Map is going to appear.
<div id="map" style="width:100%;height:500px"></div>
Instantiate Google Map Object
Instantiate the Google Maps map object after the Google Maps Library script.
<script>
new google.maps.Map(document.getElementById("map"), {
zoom: 15,
center: new google.maps.LatLng(46.288896, -79.44192),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
</script>
This takes two arguments:
[blog-in-between-card]
- An HTML element where the map is going to appear.
- A Javascript object that has a few properties such as zoom, center, and mapTypeId.
property name | description |
---|---|
zoom | The value is an integer and the larger the number, the closer the map will be. |
center | The map will be centered based on the latitude and longitude values of the center property. |
mapTypeId | It’s a type of Map that could be ROADMAP, SATELLITE, HYBRID, TERRAIN |
Show/Post Comments