Índice
O API Javascript do Google Maps É extremamente poderoso, pois não só permite a criação de mapas como tal, mas podemos ir um pouco mais longe, estendendo suas funcionalidades e usando vetores para adicionar pontos de interesse, janelas suspensas, linhas e simulação de rota.Outro dos pontos fortes dos mapas que implementamos e se já trabalhamos com Javascript são os eventos, que são o núcleo da linguagem e se encarregam de administrar a interação do usuário com o site, neste caso específico a interação com o nosso mapa.
Antes de ir para a prática, devemos primeiro conhecer um pouco da teoria por trás dos eventos manipulados pela API, que usa o namespace google.maps.event para trabalhar com eles. Possui métodos estáticos para ouvir os eventos definidos na API e o controlador de addListener () para registrá-los.
Sabendo disso, vamos ver alguns dos eventos mais importantes disponíveis na API e que usaremos em nossos exemplos:
center_changedEste evento é disparado quando a propriedade do centro do mapa muda.
cliqueEste evento é acionado quando o usuário clica no mapa, é importante mencionar que exclui cliques em marcadores ou janelas de informação.
arrastarEste evento é disparado repetidamente quando o usuário arrasta o mapa.
mousemoveEste evento é disparado quando o usuário move o mouse em qualquer lugar no contêiner do mapa.
clique com o botão direitoEste evento é disparado quando o evento do menu de contexto DOM é disparado.
zoom_changedEste evento é disparado quando a propriedade de zoom do mapa muda.
É importante mencionar que, embora esses eventos possam se parecer com os eventos padrão do SOL eles não são, eles fazem parte do API do Google Maps. Isso para evitar o problema em que os navegadores lidam com diferentes tipos de eventos para o SOL.
Já tendo visto os eventos mais utilizados pela API Vamos praticar para demonstrar o uso deles na criação de nossos mapas, o primeiro exemplo deste tutorial será focado em eventos relacionados à mudança de propriedades do mapa, o que nos permitirá obter uma funcionalidade de mapa sincronizada, ou seja, , possuem mapas com bases diferentes que mostram as mesmas informações, independentemente de mudanças em seu centro ou em seu zoom.
Vamos ver as etapas que devemos seguir para atingir esse objetivo:
1- Primeiro, criamos um novo arquivo que chamaremos synchronized_maps.html e realizamos a inclusão da API, junto com os estilos que o container de nossos mapas terá, é importante definir as variáveis globais dos mapas já que teremos que utilizá-las em todo o escopo do programa:
var map1, map2;
2- Como mencionamos antes vamos sincronizar dois mapas com bases diferentes, para isso precisamos criar duas funções que os inicializem. Essas funções serão bastante semelhantes às que dominamos nos tutoriais anteriores, porém elas terão o tratamento de eventos para atingir a funcionalidade de sincronização, vamos ver o código da primeira função:
função initializeMap1 () {var mapOptions = {center: new google.maps.LatLng (40.41678, -3,70379), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ('divmap'); map1 = novo google.maps.Map (mapElement, mapOptions); google.maps.event.addListener (map1, 'center_changed', function () {map2.setCenter (map1.getCenter ());}); google.maps.event.addListener (map1, 'zoom_changed', function () {map2.setZoom (map1.getZoom ());}); } Como podemos ver, temos as opções de nosso mapa como de costume para definir o centro, o zoom e a base, que neste caso é ROTEIRO, então definimos as opções do nosso mapa e finalmente nossos eventos que são responsáveis por obter os valores das propriedades do mapa número 1 e configurá-los no mapa número 2, para isso usaremos os eventos de center_changed Y zoom_changed é isso que nos permite sincronizar.
3- Então precisamos criar nossa função para inicializar o segundo mapa, o código é semelhante ao anterior, porém os eventos serão disparados do mapa número 2 para o número 1 e a base será HÍBRIDO para mostrar a diferença entre ambos:
função initializeMap2 () {var mapOptions2 = {center: new google.maps.LatLng (40.41678, -3,70379), zoom: 10, mapTypeId: google.maps.MapTypeId.HYBRID}; var mapElement2 = document.getElementById ('mapDiv2'); map2 = novo google.maps.Map (mapElement2, mapOptions2); google.maps.event.addListener (map2, 'center_changed', function () {setTimeout (function () {map1.setCenter (map2.getCenter ());}, 10);}); google.maps.event.addListener (map2, 'zoom_changed', function () {setTimeout (function () {map1.setZoom (map2.getZoom ());}, 10);}); } 4- Por fim, criamos uma função para instanciar os mapas que nos permitirá fazer a instância de ambos, construímos nosso HTML e colocamos a mesma classe nas divs que conterão nossos mapas:
função initializeMaps () {initializeMap1 (); initializeMap2 (); } google.maps.event.addDomListener (window, 'load', initializeMaps); Mapas Sincronizados
Vamos ver a aparência de nossos mapas sincronizados quando executamos nosso exercício no navegador:
PROLONGAR
PROLONGAR
1- Criamos um novo arquivo chamado get_coordinates.html e incluímos nossa API junto com os estilos:
2- Em seguida, criamos a função initializeMap () como de costume, mas isso terá algo diferente e é a definição do evento clique no addListener junto com a implementação de um diálogo que nos fornecerá informações sobre a latitude e longitude de onde clicamos, vejamos:
google.maps.event.addListener (map, 'click', function (e) {if (infowindow! = null) infowindow.close (); infowindow = new google.maps.InfoWindow ({content: 'Coordenadas do mouse:
Latitude: '+ e.latLng.lat () +'
Comprimento: '+ e.latLng.lng (), posição: e.latLng}); infowindow.open (mapa); }); 3- Finalmente construímos nosso HTML e definimos nosso contêiner para o mapa:
Obtenção de coordenadas com clique do mouse
Com nosso código concluído, vamos ver como fica nosso mapa em nosso navegador quando clicamos nele e as informações de latitude e longitude desse ponto são exibidas:
PROLONGAR
1- Incluímos nossa API e criamos nossos estilos para nosso mapa e para o controle que se encarregará de exibir as informações de latitude e longitude:
2- Nós criamos nossa função initializeMap () como nos exercícios anteriores e definimos os parâmetros para o nosso controle onde o inicializamos com as coordenadas 0.00 / 0.00:
var controlDiv = document.createElement ('div'); controlDiv.className = 'mapControl'; controlDiv.id = 'mapCoordinates'; controlDiv.innerHTML = 'Lat / Lng: 0,00 / 0,00'; 3- Em seguida, precisamos criar o controle e adicioná-lo ao nosso mapa, fazemos isso com google.controls, onde podemos especificar a posição em que ficará, neste caso usaremos INFERIOR DIREITO que corresponde na parte inferior direita e o contêiner onde será exibido:
map.controls [google.maps.ControlPosition.RIGHT_BOTTOM] .push (controlDiv);
4- Por fim, definimos nosso evento, que será do tipo mousemove e injetará o texto para o controle das informações que obtivermos:
google.maps.event.addListener (map, 'mousemove', function (e) {var coordinateText = 'Lat / Lng:' + e.latLng.lat (). toFixed (6) + '/' + e.latLng. lng (). toFixed (6); controlDiv.innerHTML = coordinateText;}); Vamos ver a aparência do nosso mapa com o controle para obter as informações de latitude e longitude:
PROLONGAR
1- Criamos um arquivo chamado menu_contextual.html e nós incluímos o API Javascript do Google Maps, também criamos os estilos para nosso mapa e menu contextual:
2- Antes de criar nossa função initializeMap () Devemos realizar algumas etapas adicionais, uma delas é criar a função para definir a classe para o menu de contexto, vejamos:
função menuContextual (mapa) {this.setMap (mapa); this.map = mapa; this.mapDiv = map.getDiv (); this.menuDiv = null; }; 3- Feito isso, devemos criar as opções para o nosso menu contextual e adicionar o evento que irá disparar cada um deles quando selecionado, que como imaginaremos será clique:
menuContextual.prototype = new google.maps.OverlayView (); menuContextual.prototype.draw = function () {}; menuContextual.prototype.onAdd = function () {var that = this; this.menuDiv = document.createElement ('div'); this.menuDiv.className = 'contextmenu'; this.menuDiv.innerHTML = 'Criar marcador
Ampliação
Desfazer zoom
'; this.getPanes (). floatPane.appendChild (this.menuDiv); google.maps.event.addListener (this.map, 'click', function (mouseEvent) {that.hide ();}); }; 4- Para terminar com o nosso menu contextual, só precisamos adicionar as ações mostrar e ocultar, vamos ver como fica a nossa parte do código para isso:
menuContextual.prototype.show = função (coord) {var proj = this.getProjection (); var mouseCoords = proj.fromLatLngToDivPixel (coord); var left = Math.floor (mouseCoords.x); var top = Math.floor (mouseCoords.y); this.menuDiv.style.display = 'bloquear'; this.menuDiv.style.left = left + 'px'; this.menuDiv.style.top = top + 'px'; this.menuDiv.style.visibility = 'visível'; }; menuContextual.prototype.hide = função (x, y) {this.menuDiv.style.visibility = 'oculto'; } 5- Terminado o nosso menu contextual, só precisamos programar as funções para as opções do nosso menu, que são zoom, desfazer zoom e colocar um marcador:
função doZoom () {map.setZoom (map.getZoom () + 1); } função undoZoom () {map.setZoom (map.getZoom () - 1); } function createMarker () {var marker = new google.maps.Marker ({position: lastCoordinate, map: map, title: 'Random Marker'}); } 6- Finalmente inicializamos nosso mapa, onde o importante aqui é criar o menu contextual para o nosso mapa e definir o evento principal clique com o botão direito que será acionado pelo clique direito do mouse quando pressionado:
contextMenu = novo menuContextual (mapa); google.maps.event.addListener (map, 'clique com o botão direito', function (e) {lastCoordinate = e.latLng; contextMenu.show (e.latLng);}); 7- Nós criamos nosso HTML da maneira convencional e executar nosso exemplo, vamos ver como fica nosso menu de contexto quando clicamos com o botão direito em nosso mapa:
PROLONGAR
PROLONGAR
