Using Google Maps Javascript API with example


Why to use Google Maps JavaScript V3 API?
             Google maps JavaScript V3 APIs provide a way for the developer to use google maps in a web app or a website. This APIs allow us to do some basic functions like getting directions, placing custom markers on the map or highlighting a specific region on our map.

How to use this API? 
              In order to use this API we should include google map’s JavaScript library in our app that’s it, No building or including sdk in complex manifest file like we do in ANDROID

<script  src="https://maps.googleapis.com/maps/api/js?callback=initMap "> </script>

Carefully Observe the above line of code, you can observe that I have included something called “callback = initMap” , what this piece of code will do is  that it will tell the browser to run initMap function, that we wrote in the JavaScript file of the website/web app.

So you would have guessed by now that initMap function is an important function for our maps to work.

What does initMap do?
          initMap function initialises map. A basic initMap function in JavaScript would look like this.

Var location_1;
Var map; 
function initMap{
       location_1 = new google.maps.LatLng(16.5062, 80.6480);
       map = new google.maps.Map(document.getElementById('mapdivid'), {
        center: location_1,
        zoom: 13
       });
// This function is like main() function in your c program.


I am pretty sure after seeing this code you will think that what the heck is that code??
I will give answers to your questions by answering some detailed questions..

Why you declared variables outside the function(global variables) instead of declaring them inside the function(local variables) ?
       We declared our variables outside the function so that the remaining functions we would write after initMap should be able to access map variable.

What would happen if we declare them inside the function, can’t we declare again a new map variable like we did in initMap?
         You can declare like that whenever you needed, but imagine that you have 5 functions, you should create 5 new map objects which would significantly slow down the web app loading time so it is a good practise to declare one map object and use that whenever you needed.

What is location_1 variable do?
          We need to specify to the map, which place we would want it to focus once our web app or website gets loaded, for demo purposes I am using latitude and longitude of Vijayawada, if you want to map to show a specific location like your office or your city, change the coordinates to our respective coordinates.

What google.maps.Map() do?
          This is the function that is responsible for displaying our map , and the places , zoom level that we want our map to have by default, of course we can define later change the zoom level by using scroll wheel.

What parameters do google.maps.Map() take?
          Listen carefully, till now in this post I have told you where our app would display the map on the screen, This property is set by using document.getElementById(), essentially what we are saying is that this function would get the div tag which has id as mapdivid and would map in its place so we need to include a div tag as follows like this

<div id = “mapdivid”>
</div>

In css part as :
#mapdivid{
height: 500px;
width: 500px;
}

So now the map knows where it would  display the map created but till now it doesn’t know which place to display at the centre of the screen or the zoom level it would display that place, so we need to pass that information to this function.

Final result would like this.

<!doctype html>
<html>
<title>My first Map</title>
<style>
#mapdivid{
height: 500px;
width: 500px;
}
</style>
<script> 
var location_1;
var map;
function initMap()
{
alert('123');
location_1 = new google.maps.LatLng(16.5062, 80.6480);
       map = new google.maps.Map(document.getElementById('mapdivid'), {
        center: location_1,
        zoom: 13
    });
}
</script>
<body> 
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer> </script>
<div id = "mapdivid">
</div>
<script>
</script>
</body>
</html>

Below image displays actual output of our example code.. 


Download code here




Reactions:

1 comment :

  1. This is extremely a comprehensive and helpful blog about google maps coordinate. I have found her with ease what is searching. Google Maps Javascript API use has been more and extra easy by you. Thanks dear!

    ReplyDelete