Cum pun în situl meu o hartă Google (II)


Ridicăm miza articolului precedent. Presupunând că aţi înţeles ce făceam acolo, acum dorim să evidenţiem pe hartă locul unde este firma noastră. Mai mult, marcatorul să fie clickabil şi la un click să dea informaţii suplimentare. Evident, ceea ce vedeţi mai jos, cu puţină pricepere, poate fi adaptat pentru a arăta o serie de obiective pe o hartă, fiecare cu informaţii suplimentare la un click.

Liniile noi sunt de la 18 la 40. În prima linie nouă definim icoana pe care o folosim pentru a arăta locaţia noastră. Am făcut pentru aceasta un PNG cu iconiţa. Avem apoi o variabilă cu coordonatele firmei şi creăm marcatorul. Simplu! Ca la un click să arate un text, mai întâi definim textul, creăm o fereastră de informaţii ce va fi afişată pe evenimentul „click”, urmărit de marcator prin funcţia „addListener”.

Vedeţi rezultatul în acţiune, într-o pagină separată, aici. Cu puţin CSS puteţi face ca „balonul” cu date suplimentare să arate mai bine. După cum vedeţi acceptă cod HTML.

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
	function initializare() {
		var coordonate = new google.maps.LatLng(46.76991,23.58844);
		var setari = {
			zoom: 16,
			center: coordonate,
			mapTypeControl: true,
			mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
			navigationControl: true,
			navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
			mapTypeId: google.maps.MapTypeId.ROADMAP
    };
	var harta = new google.maps.Map(document.getElementById("spatiu_harta"), setari);
	var icoanaFirma = new google.maps.MarkerImage('firma.png',
		new google.maps.Size(150,50),
		new google.maps.Point(0,0),
		new google.maps.Point(75,50)
	);
	var coordonateFirma = new google.maps.LatLng(46.76821,23.58792);
	var marcatorFirma = new google.maps.Marker({
		position: coordonateFirma,
		map: harta,
		icon: icoanaFirma,
		title: "Aici stau eu!"
	});
	var textPrezentare = '<div id="content"><div id="siteNotice"></div>'+
    '<strong>SC Firma SRL</strong><div id="bodyContent">'+
    '<p>Suntem aproape de Piata Unirii.<br>Reparam mecanisme defecte.<br><img src=ceas.png></p>'+
    '</div></div>';
 
	var fereastraInformatii = new google.maps.InfoWindow({
		content: textPrezentare
	});
	google.maps.event.addListener(marcatorFirma, 'click', function() {
		fereastraInformatii.open(harta,marcatorFirma);
	});
}
</script>
</head>
<body onload="initializare()">
  <div id="spatiu_harta" style="width:700px; height:500px"></div>
</body>
</html>


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (6 evaluări, media: 5,00 din 5)
Loading...Loading...

7 comentarii

  1. Sanducu Petru spune:

    Am si eu o mare, mica rugaminte. Am de introdus doua markere pe Harta google de pe situl meu la contact, localizare si nu reusesc. Am gasit ceva pe situl tau cu introducerea hartii insa depre markere nu mai e afisat nimic.

    Merci mult!

  2. radu.capan spune:

    http://www.umapper.com/ – despre care am scris si pe acest sit.

  3. Sanducu Petru spune:

    Merci pentru promptitudine. Spune-mi te rog key-ul API dupa ce e generat urmeaza a fi introdus undeva? Imi cer scuze daca nu sunt in tema. Stiu ca trebuie facuta o scriere codata in pagina insa imi lipseste un exemplu concret. E posibil ca browserul meu sa nu vada totul din pagina ta pentru a intelege mai bine? e posibil ca pagina web php sa aiba nevoie de alt fel de scriere?

    Merci!

  4. alin spune:

    Excelent uMapper! Iti sunt recunoscator! :)

  5. adrian spune:

    Salut, intampin o problema cu codul tau, si anume, cum fac ca, atunci cand dau zoom-out spre exemplu, placerul (.png) sa ramana la locul lui. Daca fac exact cum scri tu aici, functioneaza pana la punctul unde dau zoom hartii. Markerul sare la alte coordonate.
    Multumesc mult. Astept un raspuns, chiar am nevoie de el..

  6. adrian spune:

    Adaug, aici, pe aceasta pagina functioneaza corect, dar daca fac un html doar cu scriptul in head, si restul body-ului, asa cum scri tu aici, nu functioneaza. Markerul nu ramane la locul sau.

  7. radu.capan spune:

    Vezi sursa la demo http://www.cnet.ro/wp-content/uploads/tutoriale/diverse/hartigoogle/hartagoogle2.html si cred ca e exact codul pus mai sus. Daca vrei la zoom sa ramana tot pe marker, harta trebuie sa fie la milimetru centrata pe marker (nu asa e in exemplul meu).


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *