Google Maps API - Primii Pasi

postat acum 3 ani 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!

Comentariu postate de minecraft free la data de 15.05.2019
Someone necessarily lend a hand to make significantly posts I might state. This is the very first time I frequented your web page and thus far? I surprised with the analysis you made to create this particular publish extraordinary. Wonderful process!
Comentariu postate de minecraft free la data de 16.05.2019
Have you ever considered about including a little bit more than just your articles? I mean, what you say is valuable and everything. However imagine if you added some great images or videos to give your posts more, "pop"! Your content is excellent but with pics and videos, this site could definitely be one of the very best in its field. Amazing blog!
Comentariu postate de minecraft download for free la data de 17.05.2019
Having read this I thought it was rather enlightening. I appreciate you finding the time and effort to put this informative article together. I once again find myself spending a lot of time both reading and leaving comments. But so what, it was still worthwhile!
Comentariu postate de minecraft download pc la data de 17.05.2019
Hi there superb blog! Does running a blog similar to this require a massive amount work? I have absolutely no understanding of coding but I was hoping to start my own blog soon. Anyhow, if you have any suggestions or techniques for new blog owners please share. I know this is off subject nevertheless I simply had to ask. Thanks!