Google Maps API – Basics

The first thing you have to do for developing with Google Maps API is to get a key.
You are required to fill in wich url you are going to develop under as well.

You can get it here:
Get Google MAP API key

Load the Map API

 <script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg&sensor=true_or_false"  type="text/javascript"></script>

Set the sensor to true and don´t forget to change the key to your own.

You need a container to hold the map, for example:

<div id="map_canvas"></div>

Then you initialize the script in the body tag with:

 <body onload="initialize()" onunload="GUnload()">

And of course you write the function for this in your head element:

function initialize() {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}

The first row makes an object of the GMap class and place it in the div ”map canvas”.
Secondly we decide what area of the world map that will display. The number 13 is the zoom level of the map.

Where am I?

To find the longitude and latitude of the map use the getBounds() method to return the GLatLngBounds value
var where = map.getBounds(GLatLngBounds);
alert(where)

Controls on the map

map.setUIToDefault();

setUIToDefault describes the user interface of the map: zooming, controls, mapview etc.

View the map as satellite-, map-, hybrid- pictures

map.setMapType(G_SATELLITE_MAP);

Satellite view : G_SATELLITE_MAP
Normal map: G_NORMAL_MAP
Hybrid map: G_HYBRID_MAP
There are two more settings: For an array of all three and a map based on terrain info.

Place markers on the map

 var point = new GLatLng(37.4419, -122.1419);
var marker = new GMarker(point);
map.addOverlay(marker);

The last row: map.addOverlay method add a marker to the map.
new GMarker makes an instance of the class where the latitudes is given through new GlatLng

Info window on the map

You can create info windows with simple text or with HTML with openInfoWindow.
The default window looks like a comic strip bubble and you can close it if you want to.

 

ZoomLevel

var zoom = map.getZoom();
alert(zoom)

Use the method getZoom()

Animate the map – pan to another location or zoom in

use the panTo method with new GLatLng method

map.panTo(new GLatLng(37.4569, -122.1569));

Kommentera

Fyll i dina uppgifter nedan eller klicka på en ikon för att logga in:

WordPress.com Logo

Du kommenterar med ditt WordPress.com-konto. Logga ut / Ändra )

Twitter-bild

Du kommenterar med ditt Twitter-konto. Logga ut / Ändra )

Facebook-foto

Du kommenterar med ditt Facebook-konto. Logga ut / Ändra )

Google+ photo

Du kommenterar med ditt Google+-konto. Logga ut / Ändra )

Ansluter till %s


%d bloggare gillar detta: