Google Maps Basics
-
Before we start working with google maps we have to create a “div” with a specific id and we have to include google maps api. In the actual source code above the div can be found as div id=”map_canvas “. The width and height of the div displaying the map has to be set or in the relevant stylesheet or inline as we do in this tutorial.
-
Google Maps API is a javascript file and when we want to display google maps we include it in the head of the page between javascript opening and closing tags.
-
When the container div which is usually called map_canvas or something similar ( could be called anything else) created and the google map api is called we are ready to write the code which will make our maps work. As the code is javascript it has to be written between javascript opening and closing tags exactly the same way as the Google API.
-
If we have a look at the source code above we can see that all the javascript code we have written is in a function called “initialize”. This function has to be called when the page loads in a browser and to make sure this happen we added onload=”initialize()” to the “body” html tag.
-
The statement “var myLatlng = new google.maps.LatLng(-25.363882,131.044922);”creates an object called“myLatlng”which represents a point on the map having two values a latitude and a longitude . In this case “Latitude=-25.363882″ and “Longitude=131.044922″
-
The statement var map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions); creates a “map” object in the “map_canvas”element which is a div.
-
” zoom: 4″sets the zoom of the map to 4,” center: myLatlng” sets the center of the map to the point of myLatlng ” mapTypeId: google.maps.MapTypeId.ROADMAP”sets the type of the map to ROADMAP
-
The statement” var marker = new google.maps.Marker({ position: myLatlng, map: map,});”Places a marker on the map at the position of myLatLng which is the same as the center of the map.
