Google Maps API - Primii Pasi

postat acum un an de Stefanescu Mihai in categorie Google Maps API

Google maps este dezvoltat de bine cunoscutul Google si este un serviciu de harti ce ne ofera diferite  informatii geografice. Folosind acest serviciu  putem:

  • Cauta locuri si indicatii de la o locatie la alta.
  • Naviga cu ajutorul unor imagini panoramice ale strazilor din diferite orase.
  • Obtine informatii despre trafic intr-un anumit punct

Google Maps ne pune la dispozitie un API cu ajutorul caruia puteti customiza hartile si puteti obtine informatii. In aceasta serie de tutoriale am sa va explic cum puteti folosi acest API pe paginile site-ului vostru doar cu HTML si JavaScript.

Incarca Harta in Pagina

In continuare am sa va ghidez pas cu pas sa incarcati o harta in pagina.

Pasul 1 - Crearea unei pagini HTML standard

<!DOCTYPE html>
<html>
<head>
</head>
<body>
..............
</body>
</html>

Pasul 2 - Incarcarea API-ului

 <!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
</head>
<body>
..............
</body>
</html>

Pasul 3 - Crearea unui container

Avem nevoie de un container in care sa afisam harta. Mai jos am sa creez un container (folosind tag-ul div) cu dimensiuni fixe (stiu, stiu, fara dimensiuni fixe daca vrem sa avem un site responsive, dar scopul acestui tutorial este Maps API):

 <div id="containerHarta" style="width:900px;height:580px;"></div>

Pasul 4 - Optiuni harta

Inainte de a initializa harta trebuie sa cream un obiect mapOptions  si sa setam setam valorile initiale ale hartii. Harta trebuie sa aiba 3 optiuni setate inainte de a fi initializata: centrezoom, si maptypeid.

  • center - Aceasta proprietate centrul hartii, iar pentru a pasa o locatie trebuie sa cream un obiect LatLng pasandu-i latitudinea si longitudinea locatiei dorite.
  • zoom - Aceasta proprietate specifica zoom-ul hartii.
  • maptypeid - Aceasta proprietate specifica tipul de harta dorita.

Iata si tipurile de harti pe care Google ne permite sa le folosim:

  • ROADMAP
  • SATELLITE
  • HYBRID (harta satelit + drumuri si nume ale oraselor)
  • TERRAIN (harta pe care se pot observa munti, rauri, etc.)

Acum am sa scriu o functie ce ne va ajuta cream un obiect mapOptions si sa setam valorile necesare pentru center, zoom si mapTypeId:

function optiuniHarta() {
   var mapOptions = {
   center:new google.maps.LatLng(44.4037825, 26.0966192),
   zoom:7,
   mapTypeId:google.maps.MapTypeId.ROADMAP
  };

Pasul 5  - Crearea obiectului map

Poti crea o harta instantiind clasa javascript Map. In timp ce instantiezi aceasta clasa trebuie sa pasezi si un container HTML in care va fi afisata harta.

var harta=new google.maps.Map(document.getElementById("containerHarta"),mapOptions);

Pasul 6 - Incarcarea hartii

Si iata ca am ajuns si la ultimul pas,, incarcarea hartii in pagina. Facem acest lucru pasand in body numele functiei create anterior:

 <body onload="optiuniHarta()">

Iata totul codul meu de pana acum:

 
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
	function optiuniHarta() {
   		var mapOptions = {
   		center:new google.maps.LatLng(44.4037825, 26.0966192),
   		zoom:7,
   		mapTypeId:google.maps.MapTypeId.ROADMAP
  	};
  	var harta=new google.maps.Map(document.getElementById("containerHarta"),mapOptions);
}  	
</script>
</head>
	<body onload="optiuniHarta();">
		<div id="containerHarta" style="width:900px;height:580px;"></div>
	</body>
</html>

 

Sunt un tanar programator din Bucuresti ce lucreaza in PHP/Mysql (MySqli/PDO), Laravel, CodeIgniter, MySQL, PostgreSQL, Wordpress, HTML5/CSS3, Sass, Photoshop si multe altele.
Google+ Community Facebook Group
Acest articol a fost mutat de pe vechea platforma.
Pentru orice eroare aparuta la mutare va rog sa ma contactati!