Cloud
Google Icon Map

Getting Started with Google Map API

Getting Started with Google Map API

Note: Make sure you enable suitable API in the Google Cloud API Dashboard (GCP Console)

Summary or Important Points
# wheremap
Where to load the map

Constructor which creates a new map
     newmap = new google.maps.Map(document.getElementById(‘map’), {

Lat and Long data
     center: {lat: 13.073,lng: 77.79669}

https://maps.googleapis.com/maps/api/js?
Key=<YOUR API KEY>
V= 3 Version 3 of the google Map
Callback : The function that you are calling to initalizse the map

Now let’s look at a sample api for beginners.

<!DOCTYPE html>

<html>

<head>

<title>Simple Map</title>

<style> html, body { height: 100%; margin: 0; padding: 0; }

 #wheremap { height: 100%; }

</style>

</head>

<body>

<div id=”map”></div>

<script>

var newmap;

function initMap() {

newmap = new google.maps.Map(document.getElementById(‘wheremap’),

{ center: {lat: 13.073,lng: 77.79669}, zoom: 8 }); }

</script>

<script

src=”https://maps.googleapis.com/maps/api/js?key=yourapikeyhere&v=3&callback=initMap”

async defer>

</script>

</body>

</html>

 

Leave a comment