Google Map Warning NoApiKeys API Error [How To]

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.


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”,
<!DOCTYPE html>
<html>
<head>
    <style>
         #div-googleMaps {
             height: 500px !important;
             width:500px !important;
         }       
    </style>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" type="text/javascript"></script>
    <script>
        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
        }
    </script>
</head>

<body onload="googleMapLoad()">
    <div id="div-googleMaps"></div>
</body>

</html>

References,

I hope you are enjoying with this post! Please share with you friends. Thank you!!
ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book