Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17663
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Aplicar marcação de local no google maps

26-02-2016 11:43

Nesse post vou mostrar como adicionar aqueles alfinetes no google maps.
Esses alfinetes são labels que são exibidos ao clicar sobre um marcador no google maps.

Você pode ver o exemplo nesse link http://google-maps-utility-library-v3.g ... vents.html
Para usar esse exemplo basta copiar o código-fonte da página e alterar como necessário.

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>MarkerWithLabel Mouse Events</title> <style type="text/css"> .labels { color: red; background-color: white; font-family: "Lucida Grande", "Arial", sans-serif; font-size: 10px; font-weight: bold; text-align: center; width: 40px; border: 2px solid black; white-space: nowrap; } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script> <script type="text/javascript" src="../src/markerwithlabel.js"></script> <script type="text/javascript"> function initMap() { var latLng = new google.maps.LatLng(49.47805, -123.84716); var homeLatLng = new google.maps.LatLng(49.47805, -123.84716); var map = new google.maps.Map(document.getElementById('map_canvas'), { zoom: 12, center: latLng, mapTypeId: google.maps.MapTypeId.ROADMAP }); var marker = new MarkerWithLabel({ position: homeLatLng, draggable: true, raiseOnDrag: true, map: map, labelContent: "$425K", labelAnchor: new google.maps.Point(22, 0), labelClass: "labels" // the CSS class for the label }); var iw = new google.maps.InfoWindow({ content: "Home For Sale" }); google.maps.event.addListener(marker, "click", function (e) { iw.open(map, this); }); google.maps.event.addListener(marker, "click", function (e) { log("Click"); }); google.maps.event.addListener(marker, "dblclick", function (e) { log("Double Click"); }); google.maps.event.addListener(marker, "mouseover", function (e) { log("Mouse Over"); }); google.maps.event.addListener(marker, "mouseout", function (e) { log("Mouse Out"); }); google.maps.event.addListener(marker, "mouseup", function (e) { log("Mouse Up"); }); google.maps.event.addListener(marker, "mousedown", function (e) { log("Mouse Down"); }); google.maps.event.addListener(marker, "dragstart", function (mEvent) { log("Drag Start: " + mEvent.latLng.toString()); }); google.maps.event.addListener(marker, "drag", function (mEvent) { log("Drag: " + mEvent.latLng.toString()); }); google.maps.event.addListener(marker, "dragend", function (mEvent) { log("Drag End: " + mEvent.latLng.toString()); }); } function log(h) { document.getElementById("log").innerHTML += h + "<br />"; } </script> </head> <body onload="initMap()"> <p>Try interacting with the marker (mouseover, mouseout, click, double-click, mouse down, mouse up, drag) to see a log of events that are fired. Events are fired whether you are interacting with the marker portion or the label portion.</p> <div id="map_canvas" style="height: 400px; width: 100%;"></div> <div id="log"></div> </body> </html>

Para outros exemplos acesse http://google-maps-utility-library-v3.g ... mples.html

Para ver outros exemplos de marcadores do google maps acesse https://developers.google.com/maps/docu ... ker-simple
0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado