![Google Maps JavaScript API & Types [How To]](https://cdn.blogarama.com/images/posts_thumbs_site_id/3289/328924-1666082398.jpg "Google Maps JavaScript API & Types [How To]")
“What are Google Maps”? And “What are Types of Maps”?
The “Google Maps” is a mapping service developed by Google and it is provided various types of information (Geographical etc.) and so on around the world like beta, imagery, street, real-time traffic etc. Google is also working foot, car, bicycle (in beta), or public transportation.
Stayed Informed - Google Map warning NoApiKeys [How To]
Types of Maps:-
Google Provides Four Types of Maps that are,
1. ROADMAP: - The “ROADMAP” is a default type and it will be shows the street view of the selected region.
2. SATELLITE: - The “SATELLITE” is the map type and it will show the satellite images of the selected region.
3. HYBRID: - The “HYBRID” is the map type and it will show the major streets on satellite images.
4. TERRAIN: - The “TERRAIN” is the map type and it will show the terrain and vegetation.
Syntax:-
//FOR ROADMAP VIEW
var mapROADMAP = {
center: new google.maps.LatLng(26.9270, 83.7137),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//FOR SATELLITE VIEW
var mapSATELLITE = {
center: new google.maps.LatLng(26.9270, 83.7137),
zoom: 16,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
//FOR HYBRID VIEW
var mapHYBRID = {
center: new google.maps.LatLng(26.9270, 83.7137),
zoom: 16,
mapTypeId: google.maps.MapTypeId.HYBRID
};
//FOR TERRAIN VIEW
var mapTERRAIN = {
center: new google.maps.LatLng(26.9270, 83.7137),
zoom: 16,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
//Example for “Google Maps JavaScript API”,
#div-googleMaps {
height: 500px !important;
width:500px !important;
}
defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" type="text/javascript">
var googleMapLoad = function () {
//FOR ROADMAP VIEW
var mapROADMAP = {
center: new google.maps.LatLng(26.9270, 83.7137),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//FOR SATELLITE VIEW
var mapSATELLITE = {
center: new google.maps.LatLng(26.9270, 83.7137),
zoom: 16,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
//FOR HYBRID VIEW
var mapHYBRID = {
center: new google.maps.LatLng(26.9270, 83.7137),
zoom: 16,
mapTypeId: google.maps.MapTypeId.HYBRID
};
//FOR TERRAIN VIEW
var mapTERRAIN = {
center: new google.maps.LatLng(26.9270, 83.7137),
zoom: 16,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var sample = document.getElementById("div-googleMaps");
var map = new google.maps.Map(sample, mapSATELLITE);
//THE MAP'S GETTILT() METHOD WILL ALWAYS REFLECT THE CURRENT TILT BEING SHOWN ON THE MAP;
//IF YOU SET A TILT ON A MAP AND THEN LATER REMOVE THAT TILT (BY ZOOMING THE MAP OUT, FOR EXAMPLE), THE MAP'S GETTILT() METHOD WILL RETURN 0.
map.setTilt(45);//SET TILT 45 FOR MAP
map.getClickableIcons(); //GET CLICKABLE ICONS ON MAPS
}
onload="googleMapLoad()">id="div-googleMaps">
References,
https://developers.google.com/maps/documentation/javascript/get-api-key
https://developers.google.com/maps/documentation/
https://www.tutorialspoint.com/google_maps/google_maps_tutorial.pdf
I hope you are enjoying with this post! Please share with you friends. Thank you!!
