tag:blogger.com,1999:blog-15667038296281070532024-01-23T11:48:32.723+00:00MarnotoPartilha de informação sobre Google Maps JavaScript API v3 em português.Miguel Marnotohttp://www.blogger.com/profile/08168845698852902239noreply@blogger.comBlogger12125tag:blogger.com,1999:blog-1566703829628107053.post-77281421232032173912015-06-25T11:19:00.001+01:002018-04-04T03:15:24.602+01:00Aprende Google Maps Geocoding através de exemplos<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpxE-HoK58PPjuQSpAv_0SsQpBj8eqmlxhjVk5wlNo0EfJSyuh9noNnKjq6UiVN2sNWKaUC3hDXcHC-GiT1DmJE7obfxjyl9GRouEySYympamvYduZFm98qCb_tS0-OW5b5J9G5YMsn-Q/s1600/geocodingpt2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpxE-HoK58PPjuQSpAv_0SsQpBj8eqmlxhjVk5wlNo0EfJSyuh9noNnKjq6UiVN2sNWKaUC3hDXcHC-GiT1DmJE7obfxjyl9GRouEySYympamvYduZFm98qCb_tS0-OW5b5J9G5YMsn-Q/s1600/geocodingpt2.jpg" alt="geocoding" height="280" width="320" /></a></div>
<p><span itemprop="description">O Serviço Geocoding, ou serviço de geocodificação, é um processo integrado na API Javascript v3 do Google Maps que permite transformar um endereço nas respectivas coordenadas geográficas.</span><a name='more'></a><br />O geocoder do google maps está incluído na API JavaScript v3 e por isso não necessitas de definir qualquer parâmetro adicional no URL de chamada da API. Uma vez que este serviço já está incluído na API também não há custos para além dos preços aplicados à utilização da própria API.<br>
No entanto deves ter em conta que o processo de geocoding tem limites de utilização.</p>
<h3>Limites de utilização do geocoding</h3>
<p>Após o carregamento da API podes realizar alguns pedidos de geocodificação (menos de 10) mas depois o serviço fica limitado a pouco mais de 1 pedido por segundo. Se ultrapassares estes limites a API emite um alerta ao utilizador. Para evitar que este alerta seja visível pelo utilizador e no caso de necessitares de efetuar vários pedidos consecutivos ao serviço de geocoding, deves programar a chamada ao geocoder com setTimeout superior a 750 milisegundos.</p>
<h3>Onde podes utilizar o serviço geocoding</h3>
<p>Com o serviço de geocoding podes <b>adicionar um marcador</b> no mapa ou <b>centrar o mapa</b> numa determinada região.</p>
<p>Imagina que estás a criar um mapa para mostrar os pontos de interesse do teu país. Através do geocoder podes permitir que o utilizador efectue uma pesquisa por localidade ou por nome de uma rua, movendo o mapa automaticamente para a região pretendida.</p>
<p class="bottom-short">Da mesma forma é possível adicionar um novo marcador no mapa.</p>
<ol>
<li>O utilizador indica a morada desejada numa caixa de texto.</li>
<li>Recorrendo ao serviço de geocoding o endereço é convertido para as suas coordenadas geográficas.</li>
<li>Automaticamente o mapa é centrado na área desejada.</li>
<li>Um novo marcador é adicionado no respectivo local.</li>
</ol>
<p>O serviço de geocoding pode ainda ser utilizado para a conversão de endereços em massa. Ou seja, podes converter vários endereços nas respectivas coordenadas geográficas para incluir numa base de dados. No entanto esta funcionalidade está para além do âmbito deste artigo.</p>
<p>Neste tutorial eu vou explicar como posicionar o mapa numa determinada região e adicionar um marcador na localização pretendida através da indicação de um endereço.</p>
<div class="btn-demo-down">
<p>Antes de iniciar o tutorial vê uma demonstração do mapa ou faz o download do código necessário para seguir este exemplo.</p>
<a class="btn-down btndemo" href="http://maps.marnoto.com/servicogeocoding/exemplo.html" target="_blank" title="Exemplo de utilização do geocoding"><i class="fa fa-eye"></i> DEMO</a>
<a class="btn-down btndown" style="margin-left: 15px;" href="http://maps.marnoto.com/downloads/servicogeocoding.zip" title="servicogeocoding.zip"><i class="fa fa-download"></i> DOWNLOAD</a>
</div>
<h3>
Estrutura do HTML necessário à aplicação.</h3>
<p>Este exemplo é composto por um mapa, uma caixa de texto e um botão. A caixa de texto serve para receber o endereço a pesquisar e o botão inicia o processo geocoder.</p>
<p>Primeiro é necessário preparar os ficheiros HTML, CSS e JavaScript com as opções básicas para <a href="https://www.marnoto.com/2013/09/como-criar-um-mapa-com-google-maps-api.html" target="_blank" title="Como criar um mapa com Google Maps API">incluir um mapa com a API do Google Maps na página web</a>.</p>
<div class="mm-pre"><span class="left-pre">HTML /index.html</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-html">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/map.js"></script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
</pre>
<div class="mm-pre"><span class="left-pre">CSS /style.css</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-css">
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas {
margin: 0;
padding: 0;
height: 400px;
max-width: none;
}
#map-canvas img {
max-width: none !important;
}
</pre>
<div class="mm-pre"><span class="left-pre">JS /map.js</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-js">
var map;
var marker;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(40.680898,-8.684059),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
google.maps.event.addDomListener(window, "load", initialize);
</pre>
<br>
<p>De seguida incluir a <b>caixa de texto</b> que vai receber o endereço e um <b>botão</b>.</p>
<div class="mm-pre"><span class="left-pre">HTML /index.html</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-html">
...
<body>
<div>
Indique um endereço <input type="text" id="address-input">
<button onclick="searchAddress();">Pesquisar</button>
</div>
<div id="map-canvas"></div>
</body>
</html>
</pre>
<p>Presumo que já tenhas todos os elementos HTML preparados, vamos prosseguir para a fase mais importante.</p>
<h3>Como iniciar o processo Geocoder</h3>
<p>O serviço google maps geocoding é realizado com recurso ao método <b>google.maps.Geocoder()</b> e não é necessário incluir qualquer chamada no url da API. O método Geocoder já vem incluído na API básica.</p>
<p>Neste caso eu vou inserir o serviço de geocoding numa função específica fora da função normalmente designada de <i>initialize()</i>. Eu vou designar esta função de <i>searchAddress()</i> mas tu podes atribuir outro nome qualquer.</p>
<div class="mm-pre"><span class="left-pre">JS /map.js</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-js">
function searchAddress() {
}
</pre>
<p>Dentro da função searchAddress() começas por criar uma nova variável que vai obter o valor da caixa de texto onde é indicado o endereço a converter.</p>
<div class="mm-pre"><span class="left-pre">JS /map.js</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-js">
function searchAddress() {
var addressInput = document.getElementById('address-input').value;
}
</pre>
<p>Seguidamente é definida outra variável com o nome <b>geocoder</b> para iniciar uma nova instância do método google.maps.Geocoder().</p>
<div class="mm-pre"><span class="left-pre">JS /map.js</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-js">
function searchAddress() {
var addressInput = document.getElementById('address-input').value;
var geocoder = new google.maps.Geocoder();
}
</pre>
<p>O Geocoder() possui um método denominado de <b>geocode()</b>. É através deste método que vais efectuar o pedido de geocodificação.</p>
<p>Este método aceita dois parâmetros. No primeiro parâmetro, denominado de GeocodeRequest, defines um objecto com a propriedade <b>address:</b> cujo valor é igual ao valor da caixa de texto address-input guardado na variável addressInput. <b>{address: addressInput}</b></p>
<p>No segundo parâmetro defines uma função callback que vai processar os resultados obtidos. <b>function(results, status) {</b></p>
<div class="mm-pre"><span class="left-pre">JS /map.js</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-js">
function searchAddress() {
var addressInput = document.getElementById('address-input').value;
var geocoder = new google.maps.Geocoder();
geocoder.geocode({address: addressInput}, function(results, status) {
}
}
</pre>
<p>O objecto <b>GeocodeRequest</b> (primeiro parâmetro) também aceita a propriedade <b>{location: LatLng}</b>. Ao utilizares a propriedade “location” estarás a indicar ao Serviço Geocoding que queres obter uma morada através das coordenadas LatLng. A este processo dá-se o nome de <b>Reverse Geocoding</b>. </p>
<p>Neste exemplo estás a enviar a propriedade <b>address</b> e é assim que o serviço de geocoding do google maps sabe qual o procedimento a tomar. Que neste caso é converter um endereço nas coordenadas latitude e longitude.</p>
<p>geocoder.geocode(<b>{address: addressInput}</b>, ...</p>
<p>A <b>função callback</b> definida no segundo parâmetro também aceita dois parâmetros. O primeiro parâmetro <b>results</b> recebe o resultado ou resultados, podem ser mais do que um. Com o segundo parâmetro <b>status</b> é efetuada a verificação do sucesso do serviço de geocoding.</p>
<p>Se o geocoder foi bem sucedido, então podes passar ao tratamento da informação recebida através do parâmetro <b>results</b>. Se o geocoder não foi bem sucedido, então procedes à verificação das suas causas. Mediante a resposta obtida no parâmetro <b>status</b> vais tentar resolver o problema ou transmites uma resposta ao utilizador para tomar determinado procedimento.</p>
<p>Este processo é bem mais fácil de compreender com um exemplo prático.
<br>
A primeira acção a tomar é a verificação do status devolvido. <b>if (status == google.maps.GeocoderStatus.OK) {</b></p>
<div class="mm-pre"><span class="left-pre">JS /map.js</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-js">
function searchAddress() {
var addressInput = document.getElementById('address-input').value;
var geocoder = new google.maps.Geocoder();
geocoder.geocode({address: addressInput}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
}
}
}
</pre>
<p>Se o valor do parâmetro <b>status</b> é igual a <b>google.maps.GeocoderStatus.OK</b> isto quer dizer que o processo de geocodificação foi bem sucedido e devolveu um ou mais resultados. GeocoderStatus pode devolver outros valores mas para já vais acreditar que correu tudo bem e podes continuar com o tratamento da informação recebida.</p>
<p>Uma vez que o Geocoder pode devolver um ou mais resultados então a variável <b>results é do tipo array</b>. Mas acreditando que o serviço de geocode acertou no resultado que tu pretendes então vais trabalhar com o resultado do primeiro indice <b>results[0]</b>.</p>
<p>A informação devolvida pelo geocoder é composta por um objecto denominado de <i>GeocoderResults</i>. Uma das propriedades deste objecto é outro objecto denominado de <b>geometry</b>. Uma das propriedades do objecto geometry é <b>location</b> e o seu valor é <b>LatLng</b>.
Assim, podes definir o resultado da seguinte forma:
<b>results[0]: {
geometry: {
location: LatLng
}
}</b>
<br>Ou seja, para obteres as coordenadas LatLng, basta fazer isto: <b>results[0].geometry.location</b></p>
<p>Uma vez que este valor já está no formato de latlng não precisas de o transformar com google.maps.Latlng. Basta inserir este valor directamente no processo que queres utilizar. Neste caso vais centrar o mapa na localização recebida pelo geocode, com a função da API <b>map.setCenter(results[0].geometry.location)</b> e passas o valor de latlng como único parâmetro.</p>
<p>Adicionalmente podes redefinir o valor do zoom para reposicionar o mapa e dar destaque à região da morada.</p>
<div class="mm-pre"><span class="left-pre">JS /map.js</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-js">
function searchAddress() {
var addressInput = document.getElementById('address-input').value;
var geocoder = new google.maps.Geocoder();
geocoder.geocode({address: addressInput}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
map.setZoom(17);
}
}
}
</pre>
<h3>Adicionar um marcador com google maps geocoder</h3>
<p>Adicionar um marcador no mapa com o serviço Geocoding do Google Maps API através da indicação de um endereço é realizado da mesma forma anteriormente descrita. Com a adição de uma nova <a href="https://www.marnoto.com/2013/09/adicionar-um-marcador-com-google-maps.html" target="_blank" title="Como adicionar um marcador no Google Maps">função que cria o marcador para adicionar no mapa</a> e adicionalmente podes centrar o mapa na posição do marcador e ou aumentar o zoom.
Seguindo o exemplo anteriormente:</p>
<div class="mm-pre"><span class="left-pre">JS /map.js</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-js">
function searchAddress() {
var addressInput = document.getElementById('address-input').value;
var geocoder = new google.maps.Geocoder();
geocoder.geocode({address: addressInput}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var myResult = results[0].geometry.location; // referência ao valor LatLng
createMarker(myResult); // adicionar chamada à função que adiciona o marcador
map.setCenter(myResult);
map.setZoom(17);
}
});
}
function createMarker(latlng) {
// Se o utilizador efetuar outra pesquisa é necessário limpar a variável marker
if(marker != undefined && marker != ''){
marker.setMap(null);
marker = '';
}
marker = new google.maps.Marker({
map: map,
position: latlng
});
}
</pre>
<h3>Se o geocode não foi bem sucedido</h3>
<p>Se o geocode não foi bem sucedido a função devolve uma mensagem de alerta com a mensagem de erro devolvida pelo parâmetro “status”.</p>
<div class="mm-pre"><span class="left-pre">JS /map.js</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-js">
...
if (status == google.maps.GeocoderStatus.OK) {
var myResult = results[0].geometry.location; // referência ao valor LatLng
createMarker(myResult); // adicionar chamada à função que adiciona o marcador
map.setCenter(myResult);
map.setZoom(17);
} else { // se o valor de status é diferente de "google.maps.GeocoderStatus.OK"
// mensagem de erro
alert("O Geocode não foi bem sucedido pela seguinte razão: " + status);
}
...
</pre>
<p>O código demonstrado neste tutorial é o mínimo necessário para a inclusão do serviço de geocoding numa aplicação. A partir daqui podes passar para o estudo das respostas possíveis das propriedades "status" e "results".</p>
<p><span class="linkExemplos"><a class="btndemo" href="http://maps.marnoto.com/servicogeocoding/exemplo.html" target="_blank">Ver exemplo do mapa.</a></span></p>
<p>Todas as dúvidas ou comentários são bem-vindos. Por favor, utiliza a secção de comentários para que todos partilhem da informação.</p>
<div class="ads_content">
<span class="ads_content_center">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 336x280_marnoto_right_24092014 -->
<ins class="adsbygoogle"
style="display:inline-block;width:336px;height:280px"
data-ad-client="ca-pub-0362839059472765"
data-ad-slot="9524278346"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</span>
</div>
<div class="download-files">
<div class="download-files-title">
Download dos ficheiros necessários para este exemplo</div>
<ul>
<li><a class="btndown" href="http://maps.marnoto.com/downloads/servicogeocoding.zip">servicogeocoding.zip</a></li>
</ul>
</div>Miguel Marnotohttp://www.blogger.com/profile/08168845698852902239noreply@blogger.com5tag:blogger.com,1999:blog-1566703829628107053.post-2496416304535203582015-02-08T21:49:00.001+00:002018-04-04T03:18:37.798+01:00Rápido e simples partilhar um local do Google Maps<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYe_TRZONH-vPZWY7x-xS2x5xAmzq6-tDB_JP5XfLYtkoH63RvuvZ2gXHwHq-NUUH96sBYFNCEsSRrTCboeev_Go6bFUhO2qL1PzOhA8IeDYZv1sQyDM0HwzKvrIS4VNiM6CZWcG-P25s/s1600/mapsharing.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYe_TRZONH-vPZWY7x-xS2x5xAmzq6-tDB_JP5XfLYtkoH63RvuvZ2gXHwHq-NUUH96sBYFNCEsSRrTCboeev_Go6bFUhO2qL1PzOhA8IeDYZv1sQyDM0HwzKvrIS4VNiM6CZWcG-P25s/s1600/mapsharing.jpg" /></a></div>
<p>Por vezes, a partilha da localização do restaurante para o próximo jantar do grupo é uma tarefa bastante penosa. Nem todos os membros do grupo residem na mesma cidade e para piorar as coisas, o dono do restaurante decidiu escolher aquele recanto na travessa Y porque é mais tranquilo.<br>
Esta situação é comum e pode ser transportada para outras actividades de grupo. O que é normal fazer nesta situação é enviar as indicações através de email, ou pior ainda, é tentar descrever o trajeto através do telefone. Ambas as situações são potenciais ataques à paciência de qualquer mente sã e podem ser evitadas recorrendo à partilha de um mapa.<a name='more'></a></p>
<p>Para além de solucionarmos o problema anteriormente descrito, a partilha de um mapa também oferece outras vantagens. <span itemprop="description">O mapa pode ser visualizado num computador, tablet ou telemóvel e pode incluir as indicações do trajecto.</span> Pode ainda utilizar esta técnica para ligar o endereço da sua empresa no seu website para o Google Maps.</p>
<h3>Partilhar um local com o Google Maps</h3>
<ol>
<li>Abre o <a href="http://maps.google.com" target="_blank" title="Google Maps" >Google Maps</a>.</li>
<li>Efetua uma pesquisa por morada (e.g. Av 25 de Abril 122, Ílhavo).</li>
<li>Copia o endereço URL da barra de endereços.</li>
<li>Envia o link por email, ou publica na tua rede social favorita.</li>
</ol>
<br>
<p>Partilhar um mapa com o Google Maps é tão simples como isto. O link contém toda a informação necessária para que a outra pessoa possa visualizar exatamente o mesmo mapa.</p><br>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc6QxPNSQW-Fbz38dfpv3kRLdcVnVV6E-RklOJoUyWP7STQ2-kQW7Vkx6snFbLo_gMEOJgoOXjIOyU6iunpkIdB1LXRjA-zGQxMA6bLPdVjwDT5iUZSc8S46zYfcpV4PWB__4CtAkBXSI/s1600/partilharmapa1.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc6QxPNSQW-Fbz38dfpv3kRLdcVnVV6E-RklOJoUyWP7STQ2-kQW7Vkx6snFbLo_gMEOJgoOXjIOyU6iunpkIdB1LXRjA-zGQxMA6bLPdVjwDT5iUZSc8S46zYfcpV4PWB__4CtAkBXSI/s1600/partilharmapa1.gif" alt="Google Maps" /></a></div>
<p>Esta forma de partilhar um mapa é simples e rápida. Se o Google Maps encontrou o local, então será colocado um marcador no mapa e o Street View fica automaticamente enquadrado no local pretendido.</p><br>
<h3>Incluir um marcador no mapa quando o Google Maps não encontra a morada pretendida</h3>
<ol>
<li>Abre o <a href="http://maps.google.com" target="_blank" title="Google Maps" >Google Maps</a>.</li>
<li>Faz zoom para o local pretendido.</li>
<li>Clicar com o botão esquerdo do rato no local pretendido.</li>
<li>Clicar nas coordenadas de latitude e longitude que surgem na caixa de pesquisa no lado esquerdo do mapa. <b>Este clique coloca um marcador no mapa.</b></li>
<li>Copia o link da barra de endereços ou escolhe a opção de “link abreviado” conforme descrito seguidamente e partilha o link.</li>
</ol>
<br>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyyaHld43D7EsxA-8gOhAL7slogzUZafAdSZvPhqwXVsGIRFrJ7e8WDWo7_65yPLXL4kRUO8sk7NRSxDAdBGmC9w4iP00_DuBfXsRR3GZEMcuXOMZh5zKvx8Z7sftE4-807SibrtyHSeU/s1600/partilharmapa2.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyyaHld43D7EsxA-8gOhAL7slogzUZafAdSZvPhqwXVsGIRFrJ7e8WDWo7_65yPLXL4kRUO8sk7NRSxDAdBGmC9w4iP00_DuBfXsRR3GZEMcuXOMZh5zKvx8Z7sftE4-807SibrtyHSeU/s1600/partilharmapa2.gif" alt="Google Maps" /></a></div>
<h3>O link de partilha</h3>
<p>Copiar o link a partir da barra de endereços tem a vantagem de ser rápido mas existe outra forma de encontrar esse link.
<ol>
<li>Depois de encontrado o local pretendido, clica na <b>roda dentada <i class="fa fa-gear"></i></b> que está no canto inferior direito.</li>
<li>Escolhe a opção <b>“Partilhar ou incorporar mapa”</b>.</li>
<li>Surge uma pequena janela com o link para partilha. Este link é igual ao existente na barra de endereços por isso não tem grande vantagem copiar o link desta forma. A única vantagem aqui existente é o facto de podermos encurtar o endereço com a opção <b>“URL abreviado”</b>.</li>
<li>Copia o link abreviado e partilha.</li>
</ol>
</p>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy7Bue-7nHJLtd_P6VU689M470Lbgh7mk3WNcFixO52sf6JDeIQ33GbzZlob85kl8U9hx_MA_ofx-hsWck_O0WurJGdPjVA8s8zUrl7_c4-4U4ympZz7GjgF9zGS2D2jWnIW9mizt3OdU/s1600/partilharmapa3.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy7Bue-7nHJLtd_P6VU689M470Lbgh7mk3WNcFixO52sf6JDeIQ33GbzZlob85kl8U9hx_MA_ofx-hsWck_O0WurJGdPjVA8s8zUrl7_c4-4U4ympZz7GjgF9zGS2D2jWnIW9mizt3OdU/s1600/partilharmapa3.gif" alt="Google Maps" /></a></div>
<p>Esta opção permite a utilização do mesmo link mas muito mais curto. Desta forma o endereço do link não é tão estranho e permite a partilha onde o limite de caracteres é reduzido.</p>
<h3>O que podes partilhar?</h3>
<ul>
<li>Um mapa rodoviário <i class="fa fa-angle-right"></i> <a href="https://goo.gl/maps/GQdtl" target="_blank">https://goo.gl/maps/GQdtl</a></li>
<li>Um mapa com imagens de satélite tipo Google Earth <i class="fa fa-angle-right"></i> <a href="https://goo.gl/maps/Yi862" target="_blank">https://goo.gl/maps/Yi862</a></li>
<li>Um mapa rodoviário ou imagem de satélite com um marcador (conforme explicado anteriormente) <i class="fa fa-angle-right"></i> <a href="https://goo.gl/maps/CPFEh" target="_blank">https://goo.gl/maps/CPFEh</a></li>
<li>Um link directo para o local mostrado no Street View <i class="fa fa-angle-right"></i> <a href="https://goo.gl/maps/97FnC" target="_blank">https://goo.gl/maps/97FnC</a></li>
<li>Um mapa com direcções predefinidas do ponto de origem para o ponto de destino <i class="fa fa-angle-right"></i> <a href="https://goo.gl/maps/qxdP0" target="_blank">https://goo.gl/maps/qxdP0</a></li>
</ul>
<p>Qualquer uma destas opções é possível de partilhar, toda a informação necessária está contida no endereço do link. Ou seja, se quiseres partilhar uma imagem do Street View basta entrar no Street View, compor a imagem na posição que se pretende e partilhar o endereço. Para partilhar direcções, clica em direcções, escolhe o ponto de origem e o ponto de destino e partilha o link.</p>
<div class="ads_content">
<span class="ads_content_center">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 336x280_marnoto_right_24092014 -->
<ins class="adsbygoogle"
style="display:inline-block;width:336px;height:280px"
data-ad-client="ca-pub-0362839059472765"
data-ad-slot="9524278346"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</span>
</div>
<p>Todas as dúvidas ou comentários são bem-vindos. Por favor, utiliza a secção de comentários para que todos partilhem da informação.</p>Miguel Marnotohttp://www.blogger.com/profile/08168845698852902239noreply@blogger.com0tag:blogger.com,1999:blog-1566703829628107053.post-4667773582565319422014-09-25T19:31:00.002+01:002018-04-04T03:19:52.925+01:00Google vai apagar o Panoramio<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnCzefF0YnK3wOSgDSaseOFh0wdmJ8g77if84v72N3ob4X6YDff25Ti8mKSCRkqIK1EofEV2T6fitSkq7el2ZbbgP0X_HLP-dc9CcmYbEGQiVTeI0D80g6rbB39dUY_8NthGeWqE1xUtI/s1600/panoramio.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnCzefF0YnK3wOSgDSaseOFh0wdmJ8g77if84v72N3ob4X6YDff25Ti8mKSCRkqIK1EofEV2T6fitSkq7el2ZbbgP0X_HLP-dc9CcmYbEGQiVTeI0D80g6rbB39dUY_8NthGeWqE1xUtI/s1600/panoramio.jpg" alt="Panoramio" height="194" width="320" /></a></div>
<p><span itemprop="description">No mesmo dia em que a Google anuncia o <a href="https://www.marnoto.com/2014/09/google-my-maps-esta-de-volta.html" target="_blank">Google My Maps</a> foi também anunciado o fim do <a href="http://www.panoramio.com" target="_blank">Panoramio</a>. Depois de 9 anos a alimentar o Google Maps com imagens georreferenciadas de todo o mundo, eis que o Panoramio será substituído pelo <a href="https://www.google.com/maps/views/home?gl=pt" target="_blank">Google Maps Views</a>.</span><a name='more'></a><br />
Desde o lançamento do Google+ que a Google pretende que todos os seus produtos orbitem em torno da sua rede social. O Views será a nova casa de todas as imagens existentes no Panoramio, desde que os respetivos autores assim o permitam.</p>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnCzefF0YnK3wOSgDSaseOFh0wdmJ8g77if84v72N3ob4X6YDff25Ti8mKSCRkqIK1EofEV2T6fitSkq7el2ZbbgP0X_HLP-dc9CcmYbEGQiVTeI0D80g6rbB39dUY_8NthGeWqE1xUtI/s1600/panoramio.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnCzefF0YnK3wOSgDSaseOFh0wdmJ8g77if84v72N3ob4X6YDff25Ti8mKSCRkqIK1EofEV2T6fitSkq7el2ZbbgP0X_HLP-dc9CcmYbEGQiVTeI0D80g6rbB39dUY_8NthGeWqE1xUtI/s1600/panoramio.jpg" alt="Panoramio" /></a></div>
<h3>Um anúncio inesperado</h3>
<p>Este <a href="https://groups.google.com/forum/m/#!topic/panoramio-questions-support/vTsUTaW_EDo" target="_blank">anúncio foi emitido</a> pelo googler Evan Rapoport no fórum de ajuda do Panoramio e <a href="https://groups.google.com/forum/m/#!topic/panoramio-questions-support/R5toz0EAB8k" target="_blank">reforçado</a> pelo vice-presidente do Google Maps, gerando de imediato uma grande polémica à volta desta decisão.</p>
<p>Um dos utilizadores do Panoramio comenta da seguinte forma: <i>“... Panoramio é um site onde as pessoas de todos os países do mundo se juntam e fazem amizades através das suas fotos e dos seus comentários… o Panoramio promove a Amizade Internacional e por isso é muito importante que o serviço continue a qualquer custo…”</i><br />
De uma forma geral é este o sentimento dos utilizadores que se sentem profundamente dececionados com esta decisão da Google.</p>
<h3>A decepção</h3>
<p>O problema não está tanto na mudança para outra plataforma mas antes no desmembramento da comunidade.
A Google pretende que os seus utilizadores transfiram as suas imagens para o Views, prometendo transferir a contagem de visualizações de cada imagem mas o que fica para trás é o mais importante. <b>A Google não vai transferir os comentários das imagens</b> e a comunidade do Panoramio foi construída graças a esses comentários. Muitos utilizadores criaram laços de amizade, desenvolveram as suas capacidades de fotógrafo e alguns casaram graças ao Panoramio.</p>
<h3>Sentimento de revolta</h3>
<p>O sentimento é de revolta e as vozes fizeram-se ouvir junto dos três espanhóis, Joaquin Cuenca Abela, Jose Florido Conde e Eduardo Manchón Aguilar, que em outubro de 2005 fundaram o Panoramio.com. Os três fundadores criaram uma <a href="http://www.change.org/p/google-google-keep-the-panoramio-community-alive" target="_blank">petição</a> a pedir à Google para não acabar com a comunidade. <i>“Desde que a Google anunciou o encerramento do Panoramio nós, os fundadores do Panoramio, recebemos centenas de mensagens de utilizadores de todo o mundo que querem manter viva a Comunidade Panoramio”</i>. É assim que começa o texto da petição e após 48 horas já conta com cerca de 3000 assinaturas.</p>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZmxDh97nGYkDzh8-0FDsHs2Dj5oi55SwhwpOz3Um2Cff1nleVi9g8k3qbtyDk-OP_xxQ9Mnpn5ExKPs9nUBp8Zy1NJydrBMTTeCkUwpUB_5G4E9r6SFzvzVRaiovi5Ua6H45JWNK1OpE/s1600/panoramio_peticao.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZmxDh97nGYkDzh8-0FDsHs2Dj5oi55SwhwpOz3Um2Cff1nleVi9g8k3qbtyDk-OP_xxQ9Mnpn5ExKPs9nUBp8Zy1NJydrBMTTeCkUwpUB_5G4E9r6SFzvzVRaiovi5Ua6H45JWNK1OpE/s1600/panoramio_peticao.jpg" /></a></div>
<h3>Falsa esperança?</h3>
<p>Eu já assinei aquela petição, porque é muito importante para aqueles que pertencem a esta comunidade mas isto poderá ser uma falsa esperança. Os googlers já demonstraram por diversas vezes que não atendem aos pedidos dos seus utilizadores. Também já demonstraram que não têm qualquer sensibilidade para questões sociais, comunitárias ou de privacidade, como foi exemplo o <a href="https://en.wikipedia.org/wiki/Google_Buzz" target="_blank">desastre do Buzz</a>. Ainda para mais, a lista de <a href="https://en.wikipedia.org/wiki/List_of_Google_products#Discontinued_products_and_services" target="_blank">produtos encerrados</a> pela Google já vai longa e o Panoramio.com já faz parte dela.</p>
<h3>Até junho de 2015</h3>
<p>Embora a Google não tenha determinado a data para o “apagão” podemos antever que será próximo do mês de junho de 2015. Em 4 de junho de 2014 foi publicado um artigo no Geo Developers Blog a anunciar o <a href="https://googlegeodevelopers.blogspot.pt/2014/06/sunsetting-javascript-api-weather-panoramio.html" target="_blank">encerramento das API JavaScript Weather e Panoramio</a> para o próximo dia 04 de Junho de 2015.</p>
<h3>As vantagens e as desvantagens</h3>
<p>O Google Maps Views está preparado para as atuais necessidades de mobilidade, ao contrário da estrutura desatualizada do Panoramio, e promete seguir os mesmos princípios do seu antecessor. No entanto, a fonte de imagens que “abastece” o Views e o novo Google Maps é de alguma forma dispersa. Ou seja, todas as fotografias georreferenciadas existentes no Google+ ou Picasa em álbuns partilhados publicamente, que respeitem os critérios de seleção da Google e cuja localização esteja marcada como partilhada são potenciais candidatas a aparecer no Views. Quer isto dizer que a comunidade de utilizadores do Panoramio vai ficar dispersa na rede social da Google. Não haverá mais um espaço próprio para a comunidade. Haverá pessoas dispersas pelas diversas comunidades existentes no Google+. Isto irá acabar com a identidade da comunidade Panoramio.</p>
<p><b>Quem não quiser que as suas fotografias sejam publicadas no Google Maps ou no Views devem optar por não partilhar a localização das suas fotografias.</b></p>
<p>É certo que tudo deve ter uma evolução. Também é certo que o Panoramio.com não está preparado para as tendências da mobilidade. Mas também é certo que ao final de 9 anos a comunidade Panoramio construiu algo de importante para milhões de pessoas no mundo. Durante mais de 7 anos a Google granjeou muita popularidade para o Maps graças a esta comunidade. O mínimo que poderá ser feito agora é lutar para que as histórias e memórias existentes no Panoramio não sejam apagadas para sempre.</p>
<div class="ads_content">
<span class="ads_content_center">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 336x280_marnoto_right_24092014 -->
<ins class="adsbygoogle"
style="display:inline-block;width:336px;height:280px"
data-ad-client="ca-pub-0362839059472765"
data-ad-slot="9524278346"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</span>
</div>Miguel Marnotohttp://www.blogger.com/profile/08168845698852902239noreply@blogger.com5tag:blogger.com,1999:blog-1566703829628107053.post-73930642578681296042014-09-24T07:30:00.000+01:002018-04-04T03:22:28.201+01:00Google My Maps está de volta e revigorado<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCyYoP0G28q-hNBarllB7T39nP53QRjEbq3Q2SaXRm24P9RC_p3tfb_jeM-9aq1VBXFbaxh65v8QJExCY3JoIx4SjQFLMSa6C4MaARc-h-s-ZJ7HmN90jDo6MdY8Ak9YjX6-SDnYWGwOY/s1600/my_maps_intro.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCyYoP0G28q-hNBarllB7T39nP53QRjEbq3Q2SaXRm24P9RC_p3tfb_jeM-9aq1VBXFbaxh65v8QJExCY3JoIx4SjQFLMSa6C4MaARc-h-s-ZJ7HmN90jDo6MdY8Ak9YjX6-SDnYWGwOY/s1600/my_maps_intro.jpg" alt="My Maps" height="181" width="320" /></a></div>
<p><span itemprop="description">O My Maps permite a criação de mapas personalizados que poderão ser partilhados ou incluídos em páginas web. Este serviço também permite marcar vários pontos num mapa do Google Maps.<br />Este serviço já existia na anterior versão clássica do Google Maps.</span><a name='more'></a> Entretanto foi retirado e surge agora revigorado e com novas funcionalidades.</p>
<p>Em março de 2013 é lançado o <a href="http://google-latlong.blogspot.pt/2013/03/create-collaborate-and-share-advanced.html" target="_blank" title="Google Maps Engine Lite">Google Maps Engine Lite</a>, uma versão menos robusta do <a href="http://www.google.com/enterprise/mapsearth/products/mapsengine.html" target="_blank" title="Google Maps Engine">Google Maps Engine</a> dirigida ao setor empresarial. Nessa altura, a Google pediu aos utilizadores do My Maps para exportarem os seus mapas para a plataforma Maps Engine Lite. Esta comunicação deixava antever que o serviço My Maps iria sofrer alterações.</p>
<p>Após a última grande alteração na imagem e funcionalidade do Google Maps, que ocorreu no início deste ano, a Google retirou o serviço My Maps. Ao que parece não terá sido uma jogada de sucesso, talvez porque muitas pessoas não sabiam onde procurar o Maps Engine Lite.<br />
Agora é anunciada a <a href="http://google-latlong.blogspot.pt/2014/09/make-your-own-way-with-new-my-maps.html" target="_blank" title="Make your own way with the new My Maps">nova versão My Maps</a>, que não é mais do que um novo nome para o Maps Engine Lite. Ainda bem que surge esta alteração de nome. My Maps ou Meus Mapas assenta melhor para o fim a que se destina e as pessoas identificam-se melhor com este nome.</p>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCyYoP0G28q-hNBarllB7T39nP53QRjEbq3Q2SaXRm24P9RC_p3tfb_jeM-9aq1VBXFbaxh65v8QJExCY3JoIx4SjQFLMSa6C4MaARc-h-s-ZJ7HmN90jDo6MdY8Ak9YjX6-SDnYWGwOY/s1600/my_maps_intro.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCyYoP0G28q-hNBarllB7T39nP53QRjEbq3Q2SaXRm24P9RC_p3tfb_jeM-9aq1VBXFbaxh65v8QJExCY3JoIx4SjQFLMSa6C4MaARc-h-s-ZJ7HmN90jDo6MdY8Ak9YjX6-SDnYWGwOY/s1600/my_maps_intro.jpg" alt="My Maps" /></a></div>
<h3>
As novidades</h3>
<p>À semelhança do que já acontecia anteriormente é possível criar um mapa para guardar a localização de pontos de interesse e trajetos de condução, adicionar fotografias e vídeos. Agora também é possível partilhar os mapas da mesma forma que partilhamos os Documentos do Google, importar localizações a partir de uma folha de cálculo ou organizar os marcadores por camadas.<br />
Esta nova versão vem acompanhada da aplicação <a href="https://play.google.com/store/apps/details?id=com.google.android.apps.m4b" target="_blank" title="My Maps para Android">My Maps para Android</a> que permite a visualização, correção ou adição de mapas.</p>
<p>Notas importantes a reter:</p>
<ul>
<li>Após a importação dos mapas antigos para a nova versão, não será mais possível visualizar os mapas na versão clássica.</li>
<li>Os mapas personalizados ficam disponíveis na aplicação Meus Mapas para Android, mas não é possível visualizá-los na aplicação Google Maps para Android ou na aplicação Google Earth para iOS.</li>
</ul>
<h3>Começar a utilizar O Meu Mapa</h3>
<p>Primeiramente é necessário iniciar sessão na conta Google.</p>
<p>Para os <b>novos utilizadores</b> basta entrar na página <a href="https://www.google.com/maps/d/" target="_blank" title="My Maps">https://www.google.com/maps/d/</a>, escolher a opção "Criar um novo mapa" e começar a utilizar o My Maps.</p>
<p>Para quem <b>utilizava a versão anterior</b> do My Maps e ao <a href="https://mapsengine.google.com/map/splash?app=mp" target="_blank" title="Actualizar agora o My Maps">aceder à página de início</a> será convidado a fazer a atualização para a nova versão. Este é um processo que demora alguns segundos e só é necessário escolher a opção "Atualizar agora".</p>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0g2al7-LVGpQeBZiedLaMUUFyzZ9taAJmFc7PwF4_xnx_3vWag4Z_QZL-gc15v77BB-PdWA5IYvbnzgrIDLZphDaYpna6WkGFLXyFdOHqeabqsqBTo1-4V6-AFGmp2CnVpggvVhBVxIM/s1600/my_maps_actualizar.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0g2al7-LVGpQeBZiedLaMUUFyzZ9taAJmFc7PwF4_xnx_3vWag4Z_QZL-gc15v77BB-PdWA5IYvbnzgrIDLZphDaYpna6WkGFLXyFdOHqeabqsqBTo1-4V6-AFGmp2CnVpggvVhBVxIM/s1600/my_maps_actualizar.jpg" height="320" width="239" /></a></div>
<p>De seguida surge uma janela de pedido de confirmação para a atualização do My Maps. Se tens a certeza que queres atualizar é só escolher a opção "Atualizar".</p>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV37Uq_QzsnWdbGpGrXfOFXFFPVmSajdvXS386NXpSZ8aljpVYsrL__ueVHQW_uvy3TKRkcdikgDUw6MQFCxsL8e3xsxYHk3sgVxfOdFjxgEWNOgNrwfgw3uqZ5QbOmsu-_7Hzg3FDAUc/s1600/my_maps_actualizar_confirma.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV37Uq_QzsnWdbGpGrXfOFXFFPVmSajdvXS386NXpSZ8aljpVYsrL__ueVHQW_uvy3TKRkcdikgDUw6MQFCxsL8e3xsxYHk3sgVxfOdFjxgEWNOgNrwfgw3uqZ5QbOmsu-_7Hzg3FDAUc/s1600/my_maps_actualizar_confirma.jpg" height="210" width="320" /></a></div>
<p>Quando o processo estiver concluído surgirá a mensagem de confirmação da atualização.</p>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSvel85E1MnOVoaEC8p3S4DgKSA6iXFgX1abMw3UL1YuTc0Atw71I-D7xHw488OqSrLhXcGchPBnkStYHbw9TUdcsj_mrOh9cFZWWsy11f0uMrbOtKEFeQsslbuqXJVYp24ZMIZNh6Kss/s1600/my_maps_actualizado.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSvel85E1MnOVoaEC8p3S4DgKSA6iXFgX1abMw3UL1YuTc0Atw71I-D7xHw488OqSrLhXcGchPBnkStYHbw9TUdcsj_mrOh9cFZWWsy11f0uMrbOtKEFeQsslbuqXJVYp24ZMIZNh6Kss/s1600/my_maps_actualizado.jpg" alt="My maps" height="200" width="320" /></a></div>
<p>A partir daqui podes visualizar os teus mapas já existentes ou adicionar novos mapas.</p>
<h3>Como aceder aos mapas personalizados</h3>
<p>A Google deve ter considerado que agora o Maps Engine Lite atingiu a maturidade necessária e dá ao My Maps o destaque que merece.<br />
Para aceder ao My Maps basta entrar no <a href="https://www.google.com/maps/" target="_blank" title="Google Maps">Google Maps normal</a>, <b>clicar na caixa de pesquisa</b> e de seguida em "O meu mapa" que aparece abaixo da caixa de pesquisa.</p>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBGDQ1myJNVKs7fV1Jbc04c6B0b4xFLPAac8do40gYIns-KYibn0ttp2NjWA4rXey6t1gMI_kPAG2f7R5dbsmu_Vq-JR7yL5akkURqJoEhc5CKrD3vxZ4yPKWtQVsJr7IcSEo9VuDSOgM/s1600/my_maps_meumapa.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBGDQ1myJNVKs7fV1Jbc04c6B0b4xFLPAac8do40gYIns-KYibn0ttp2NjWA4rXey6t1gMI_kPAG2f7R5dbsmu_Vq-JR7yL5akkURqJoEhc5CKrD3vxZ4yPKWtQVsJr7IcSEo9VuDSOgM/s1600/my_maps_meumapa.jpg" alt="Update My Maps" height="109" width="320" /></a></div>
<p>Seguidamente podes visualizar os teus mapas já existentes através do link <b>"Experimente fazer um mapa personalizado"</b> ou iniciar de imediato a criação de um novo mapa através do botão <b>"Criar"</b>.</p>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSaHMzRk-zQnNRFqZ4raNUshTzmVYMyQbj4G7DY6Er7tDnQ0d3I-XwhGl0nvsOQv8mDZqZwqMm794q30n35z9TBxfrR6geeafbuXmIbr8LbGwK55VZiHvfn1CgkJCv2sGMZSlhApioEHM/s1600/my_maps_novomapa.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSaHMzRk-zQnNRFqZ4raNUshTzmVYMyQbj4G7DY6Er7tDnQ0d3I-XwhGl0nvsOQv8mDZqZwqMm794q30n35z9TBxfrR6geeafbuXmIbr8LbGwK55VZiHvfn1CgkJCv2sGMZSlhApioEHM/s1600/my_maps_novomapa.jpg" alt="My Maps" height="85" width="320" /></a></div>
<h3>Perguntas frequentes</h3>
<p>O novo Meus Mapas na versão gratuita está limitado a 2500 pontos, linhas ou formas. Só pode utilizar até 5 camadas para organizar os marcadores e está limitado a 2500 visualizações diárias.<br />
<b>ACTUALIZADO <small>(5 de Dezembro 2014)</small></b>
A partir de agora o Google My Maps Pro passa a ser gratuito. Os limites anteriormente referidos passam a ser os seguintes: 10 000 pontos, linhas ou formas, 10 camadas por mapa, e 25 000 visualizações diárias.<br />
É aconselhável a consulta das <a href="https://support.google.com/maps/answer/6009908?hl=pt" target="_blank" title="Perguntas frequentes do My Maps">perguntas frequentes</a> do novo Meus Mapas. Assim como a listagem completa dos <a href="https://support.google.com/mymaps/answer/3370982" target="_blank" title="Limites de utilização do my maps">limites de utilização</a> na tabela <b>"compare as edições do My Maps"</b>.</p>
<p>O My Maps é excelente para planear a próxima viagem de férias ou para partilhar pontos de encontro com amigos.<br />As pequenas ou médias empresas podem utilizar o My Maps para indicar a sua localização, com a inclusão de um mapa na página de contactos do seu <i>web site</i>.<br />
As ideias para novos mapas são quase ilimitadas e a Google disponibiliza uma <a href="https://maps.google.com/gallery/?hl=en&utm_source=google&utm_medium=cpc&utm_campaign=NA-LCS-2014-Geo-Products-MapsGallery-HouseAds&utm_term=%2Bmaps%20%2Bgallery&utm_content=SearchAd&gclid=Cj0KEQjwyrqgBRDepamt-LWA2oABEiQAV7nwwMrQiemNoGcXLiv--oO_IG54i_63A2TG34K5YdQMz-EaAp2X8P8HAQ" target="_blank">galeria de exemplos</a> para a utilização do novo My Maps.</p>
<p><b>Agora é hora de começar a mapear... e partilhar!</b></p>
<div class="ads_content">
<span class="ads_content_center">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 336x280_marnoto_right_24092014 -->
<ins class="adsbygoogle"
style="display:inline-block;width:336px;height:280px"
data-ad-client="ca-pub-0362839059472765"
data-ad-slot="9524278346"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</span>
</div>
<p><i>A secção de comentários está aberta à partilha de links para os teus mapas.</i></p>Miguel Marnotohttp://www.blogger.com/profile/08168845698852902239noreply@blogger.com1tag:blogger.com,1999:blog-1566703829628107053.post-88223219232939393642014-09-19T05:16:00.000+01:002018-04-04T03:24:16.006+01:005 formas de personalizar a InfoWindow Google Maps<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMgsvKfINn6rWwMJFAFieYkMkkTuFfJBiDxemNpCFHTl1-qJYJAO1XQog9eHWgqDk6Iyz9DFUMigWt_hsoag-lU2ZzxrIL7xmJWwWQrvvgULbJ5TubhwBYS5raSnI7KmjgoXbT2Y6Kcm4/s1600/styled_infowindow.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMgsvKfINn6rWwMJFAFieYkMkkTuFfJBiDxemNpCFHTl1-qJYJAO1XQog9eHWgqDk6Iyz9DFUMigWt_hsoag-lU2ZzxrIL7xmJWwWQrvvgULbJ5TubhwBYS5raSnI7KmjgoXbT2Y6Kcm4/s1600/styled_infowindow.jpg" alt="infowindow" height="280" width="320" /></a></div>
<p><span itemprop="description">A InfoWindow padrão do Google Maps pode ser personalizada com estes 5 passos de fácil implementação.<br/>
Por um lado, uma infowindow personalizada oferece um aspecto diferenciado aos nossos mapas. Por outro lado, pode e deve ser adequada ao aspecto geral do web site.</span><a name='more'></a></p>
<p>Neste artigo não entrarei em detalhes quanto à criação de mapas, marcadores e Info Windows. Essa informação está disponível nos seguintes artigos:</p>
<ul>
<li><a href="https://www.marnoto.com/2013/09/como-criar-um-mapa-com-google-maps-api.html" target="_blank">Como criar um mapa com Google Maps API v3</a></li>
<li><a href="https://www.marnoto.com/2013/09/adicionar-um-marcador-com-google-maps.html" target="_blank">Adicionar um marcador com Google Maps JavaScript API 3</a></li>
<li><a href="https://www.marnoto.com/2013/09/info-window-no-gogle-maps-api.html" target="_blank">Info Window no Google Maps JavaScript API 3</a></li>
</ul>
<div class="btn-demo-down">
<p>Antes de iniciar o tutorial vê uma demonstração do mapa ou faz o download do código necessário para seguir este exemplo.</p>
<a class="btn-down btndemo" href="http://maps.marnoto.com/5formaspersonalizarinfowindow/exemplo.html" target="_blank" title="Exemplo de personalização da infowindow"><i class="fa fa-eye"></i> DEMO</a>
<a class="btn-down btndown" style="margin-left: 15px;" href="http://maps.marnoto.com/downloads/5formaspersonalizarinfowindow.zip" title="5formaspersonalizarinfowindow.zip"><i class="fa fa-download"></i> DOWNLOAD</a>
</div>
<h3>
Recursos necessários</h3>
<p>Para ser mais fácil de personalizar/alterar os estilos existentes na API do Google Maps utilizamos a biblioteca <a href="https://jquery.com" title="www.jquery.com" target="_blank">jQuery</a>.<br />
O download do jQuery pode ser feito <a href="https://jquery.com/download/" target="_blank">aqui</a> ou utilizar o <a href="https://developers.google.com/speed/libraries/devguide#jquery" target="_blank">CDN do Google</a>. Neste caso estou a utilizar o <b>jQuery v1.11.1</b>.<br /> Para fazer uso do jQuery é necessário incluir o ficheiro <b>jquery.js</b> na nossa pasta <b>js</b>. De seguida introduzir a chamada para o ficheiro jquery.js no ficheiro <b>mapa.html</b> da seguinte forma.</p>
<div class="mm-pre"><span class="left-pre">HTML /index.html</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.20&sensor=false"></script>
<!-- utilização do ficheiro existente na pasta js -->
<script type="text/javascript" src="js/jquery.js"></script></script>
<!-- em alternativa podes recorrer ao CDN da Google -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script></script>
<script type="text/javascript" src="js/map.js"></script>
</head>
...
...
</pre>
<p>As alterações à InfoWindow apresentadas neste exemplo são <b>válidas para as versões 3.18, 3.19 e 3.20 do Google Maps JavaScript API V3</b>.<br />Para que futuramente não haja surpresas desagradáveis é aconselhável forçar a utilização desta versão. Para isso utiliza-se a opção <i>v=3.20</i> no URL da chamada da API.<br /> A versão 3.20 é a actual versão experimental (desde 17 de Fevereiro de 2015). Quer isto dizer que esta versão estará disponível até Novembro de 2015.</p>
<p>Assim, é necessário estar atento às alterações introduzidas pela equipa que desenvolve o Google Maps na estrutura da InfoWindow em próximas versões.</p>
<h3>
1. Criar um cabeçalho na InfoWindow</h3>
<p>Para destacar o título do conteúdo da infowindow podemos criar um cabeçalho com uma cor de fundo diferente do restante conteúdo.<br />
Isto é facilmente conseguido com algumas regras de CSS.<br />
Admitindo que temos um div com <b>id="iw-container"</b>, que agrupa todo o nosso conteúdo, e o nosso cabeçalho é um div com <b>class="iw-title"</b>, atribuímos uma cor azul para o fundo do título e uma cor branca para o texto.</p>
<div class="mm-pre"><span class="left-pre">CSS /style.css</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-css">
#iw-container .iw-title {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 22px;
font-weight: 400;
padding: 10px;
background-color: #48b5e9;
color: white;
margin: 1px;
border-radius: 2px 2px 0 0; /* De acordo com o arredondamento dos cantos da infowindow por padrão. */
}
</pre>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKoO81fO43ZqQCD1h9BJFntx8ZccE1eCSJi0LBpwAMmYjqaFKEIDd0akdhf_oj8ycf2T8xAGogwEaP-9It2gU283ufVmlE7D-cI_7iBxLtHf1CYGHtdQkT2K5607q6d6V5j0XbafashJE/s1600/styledinfowindow001.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKoO81fO43ZqQCD1h9BJFntx8ZccE1eCSJi0LBpwAMmYjqaFKEIDd0akdhf_oj8ycf2T8xAGogwEaP-9It2gU283ufVmlE7D-cI_7iBxLtHf1CYGHtdQkT2K5607q6d6V5j0XbafashJE/s1600/styledinfowindow001.jpg" alt="Info window" height="339" width="430" /></a></div>
<p>
Como é fácil de observar na imagem o fundo do título não fica bem com aquelas margens. Aqui começa a alteração à estrutura da infowindow.<br />
Para conseguirmos remover as margens da infowindow é necessário encontrar o elemento HTML que controla a infowindow. Esse elemento é um div com a seguinte class ".gm-style-iw". Sabendo isto e utilizando algumas regras de CSS podemos alterar o estilo desse div para remover as margens</p>
<div class="mm-pre"><span class="left-pre">CSS /style.css</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-css">
.gm-style-iw {
width: 350px !important;
top: 0 !important;
left: 0 !important;
border-radius: 2px 2px 0 0;
}
</pre>
<p>Agora o cabeçalho e o conteúdo ocupam a margem esquerda e o topo mas não ocupam a totalidade da infowindow. Isto acontece porque com a actualização da API para a versão 3.18 é aplicada uma margem direita na infowindow não permitindo que o respectivo conteúdo possa ocupar a sua largura na totalidade.</p>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdcUrFsQHuzzdQrNTnnm1hX7wHD5epw0cUrdPl8FcilapYp03cbLELgwNxjPr7NSNLFSAiQqsWCoGWDD4Pa2azeO8rWnsLoGn5tuGlATLWLlAKJjvoZdkziISfLg6xpgfhht42PSZrV1E/s1600/styledinfowindow002.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdcUrFsQHuzzdQrNTnnm1hX7wHD5epw0cUrdPl8FcilapYp03cbLELgwNxjPr7NSNLFSAiQqsWCoGWDD4Pa2azeO8rWnsLoGn5tuGlATLWLlAKJjvoZdkziISfLg6xpgfhht42PSZrV1E/s1600/styledinfowindow002.jpg" alt="Info window" height="339" width="430" /></a></div>
<p>Para remover aquela margem direita é necessário remover os DIV que compõem o fundo branco e a sombra. O fundo branco da infowindow e a sua sombra são dois elementos distintos mas ambos fazem parte do div anterior ao div <i>.gm-style-iw</i>. Sabendo isto e utilizando o jQuery e o evento da API do google maps google.maps.event.addListener(infowindow, 'domready', function(), podemos alterar o estilo desse div para remover a margem direita.</p>
<div class="mm-pre"><span class="left-pre">JavaScript /map.js</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-js">
/*
* O evento google.maps.event.addListener() espera pela
* criação da estrutura HTML da infowindow 'domready'
* e antes da abertura da infowindow serão aplicados
* os estilos definidos
*/
google.maps.event.addListener(infowindow, 'domready', function() {
// Referência ao DIV que recebe o conteúdo da infowindow recorrendo ao jQuery
var iwOuter = $('.gm-style-iw');
/* Uma vez que o div pretendido está numa posição anterior ao div .gm-style-iw.
* Recorremos ao jQuery e criamos uma variável iwBackground,
* e aproveitamos a referência já existente do .gm-style-iw para obter o div anterior com .prev().
*/
var iwBackground = iwOuter.prev();
// Remover o div da sombra do fundo
iwBackground.children(':nth-child(2)').css({'display' : 'none'});
// Remover o div de fundo branco
iwBackground.children(':nth-child(4)').css({'display' : 'none'});
});
</pre>
<p>Para completar a personalização da infowindow é necessário aplicar as seguinte regras CSS ao div com a class .gm-style-iw.</p>
<div class="mm-pre"><span class="left-pre">CSS /style.css</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-css">
.gm-style-iw {
width: 350px !important;
top: 0 !important;
left: 0 !important;
background-color: #fff;
box-shadow: 0 1px 6px rgba(178, 178, 178, 0.6);
border: 1px solid rgba(72, 181, 233, 0.6);
border-radius: 2px 2px 0 0;
}
</pre>
<p>Agora a nossa infowindow não apresenta a margem direita e o título e o conteúdo ocupam a totalidade da largura da infowindow.</p>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4axtyjsD7LQWLyJ2XBDPGe9VbSEcOu7eE_y4PDvbJxRThChZbhO6nObYmsLaAAFgvGudLkyaoX8W8Z4F1Vr5NBDxrr17YsPkiUh617jrKglYY0x3c3ISMk1mHuB1SY3goJnyfmU5ENK8/s1600/styledinfowindow003.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4axtyjsD7LQWLyJ2XBDPGe9VbSEcOu7eE_y4PDvbJxRThChZbhO6nObYmsLaAAFgvGudLkyaoX8W8Z4F1Vr5NBDxrr17YsPkiUh617jrKglYY0x3c3ISMk1mHuB1SY3goJnyfmU5ENK8/s1600/styledinfowindow003.jpg" alt="Info window" height="339" width="430" /></a></div>
<p>Com esta alteração surgem dois problemas, o botão de fechar e a cauda da infowindow não estão na posição correcta. Isto leva-nos a aproveitar esta oportunidade para mais duas formas de personalizar a nossa infowindow.</p>
<h3>
2. Reposicionar a infowindow</h3>
<p>A última grande alteração dada à infowindow, por parte dos programadores do Google Maps, foi o enquadramento desta com o respectivo marcador. Agora a infowindow surge centrada em relação ao marcador.<br />
Mas as coisas não têm que ser assim tão lineares e podemos dar um ligeiro "chega pra lá" na infowindow.<br />
Esta alteração requer duas acções. Reposicionar a indowindow em relação ao respectivo marcador e reposicionar a cauda(seta) da infowindow.<br />
Para deslocar a infowindow criamos uma referência a um div que engloba todos os elementos que compõem a infowindow. Esse div encontra-se dois patamares acima do div <i>.gm-style-iw</i>.<br />
Esse div é referenciado da seguinte forma.</p>
<div class="mm-pre"><span class="left-pre">JavaScript /map.js</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-js">
// Desloca a infowindow 115px para a direita
iwOuter.parent().parent().css({left: '115px'});
</pre>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiojhRwdZZBOPZ6HptVmjD_4TGU663IViNAPJKBEf9VaTArZX2ppjf7yPVYeSwVSP43wsWSorIbjzs34yvlnMY8nb9pbtV2zsZ4ckmU9waQSzuO6HVPodV5CXfxLeNRgltNp1rynsdjYE8/s1600/styledinfowindow004.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiojhRwdZZBOPZ6HptVmjD_4TGU663IViNAPJKBEf9VaTArZX2ppjf7yPVYeSwVSP43wsWSorIbjzs34yvlnMY8nb9pbtV2zsZ4ckmU9waQSzuO6HVPodV5CXfxLeNRgltNp1rynsdjYE8/s1600/styledinfowindow004.jpg" alt="Info window" height="339" width="430" /></a></div>
<p>
Como é possível observar na imagem anterior a cauda da infowindow não aponta para o respectivo marcador. Torna-se necessário deslocar a cauda para apontar ao nosso marcador.<br />
Os elementos que compõem a cauda e a sua sombra estão dentro do mesmo div que agrupa o fundo da infowindow.<br />
Os elementos da <b>sombra da cauda</b> estão agrupados no primeiro descendente de iwBackground. Com o jQuery utilizamos <i>iwBackground.children(':nth-child(1)')</i>. Os elementos que compõem a <b>cauda</b> estão no terceiro descendente - <i>iwBackground.children(':nth-child(3)')</i>.</p>
<div class="mm-pre"><span class="left-pre">JavaScript /map.js</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-js">
// Desloca a sombra da seta a 76px da margem esquerda
iwBackground.children(':nth-child(1)').attr('style', function(i,s){ return s + 'left: 76px !important;'});
// Desloca a seta a 76px da margem esquerda
iwBackground.children(':nth-child(3)').attr('style', function(i,s){ return s + 'left: 76px !important;'});
</pre>
<p>Já que estamos a mexer na cauda podemos aproveitar e alterar a cor do contorno para se enquadrar com os contornos da infowindow e aplicar o valor 1 a z-index para sobrepor a cauda à infowindow.</p>
<div class="mm-pre"><span class="left-pre">JavaScript /map.js</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-js">
// Altera a cor desejada para o contorno da cauda.
// O contorno da cauda é composto por dois descendentes do div que contem a cauda.
// O método .find('div').children() faz referência a todos os div que sejam os descendentes directos do div anterior.
iwBackground.children(':nth-child(3)').find('div').children().css({'box-shadow': 'rgba(72, 181, 233, 0.6) 0px 1px 6px', 'z-index' : '1'});
</pre>
<p>Agora basta descer um pouco a infowindow para a deixar enquadrada com a cauda.</p>
<div class="mm-pre"><span class="left-pre">CSS /style.css</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-css">
.gm-style-iw {
width: 350px !important;
top: 15px !important; // mover a infowindow 15px para baixo
left: 0 !important;
background-color: #fff;
box-shadow: 0 1px 6px rgba(178, 178, 178, 0.6);
border: 1px solid rgba(72, 181, 233, 0.6);
border-radius: 2px 2px 0 0;
}
</pre>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgErTiB7I40VZPMEQGr5NJEQ7gnwWG7u036IzojzERrMD4WpXqhJX6hqlUg6-LrOaaFNyMmVBDX3dgaeqTv8hLkInws6zK6VlB8Yf2Nt2hcVZ3t_fIe37PE9szWwYFeSd5L4IEIukytoJ8/s1600/styledinfowindow005.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgErTiB7I40VZPMEQGr5NJEQ7gnwWG7u036IzojzERrMD4WpXqhJX6hqlUg6-LrOaaFNyMmVBDX3dgaeqTv8hLkInws6zK6VlB8Yf2Nt2hcVZ3t_fIe37PE9szWwYFeSd5L4IEIukytoJ8/s1600/styledinfowindow005.jpg" alt="Info window" height="339" width="430" /></a></div>
<h3>
3. Botão fechar infowindow</h3>
<p>O botão de fechar a infowindow necessita de ser reposicionado e pode receber um pouco mais de destaque.<br />
O seguinte código reposiciona o botão no canto superior direito e cria um efeito à volta do botão.</p>
<div class="mm-pre"><span class="left-pre">JavaScript /map.js</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-js">// Aproveitando a referência já criada ao div .gm-style-iw com a variável iwOuter.
// Criamos uma nova variável iwCloseBtn.
// Utilizando o método .next() do JQuery referenciamos o div seguinte ao div .gm-style-iw.
// É este div que agrupa os elementos do botão fechar.
var iwCloseBtn = iwOuter.next();
// Aplica o efeito desejado ao botão fechar
iwCloseBtn.css({
opacity: '1', // por padrão o botão fechar tem uma opacidade de 0.7
right: '38px', top: '3px', // reposicionamento do botão
border: '7px solid #48b5e9', // aumento da borda do botão e nova cor
'border-radius': '13px', // efeito circular
'box-shadow': '0 0 5px #3990B9' // efeito 3D para salientar o botão
});
// A API aplica automaticamente 0.7 de opacidade ao botão após o evento mouseout.
// Esta função reverte esse evento para o valor desejado.
iwCloseBtn.mouseout(function(){
$(this).css({opacity: '1'});
});
</pre>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8b2zAa82431UOHsngwaAKqbmETrabcvL5skjvy5QKkQ6CTZtzVqhzuk5S_f83z3tPI2Aw0Q5h8E3utcjWS4u1rWAqgGy60ZWukUfvWeqBwZBvS6N8weA7xM5k31gl74uZfUrtrKI3vXA/s1600/styledinfowindow006.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8b2zAa82431UOHsngwaAKqbmETrabcvL5skjvy5QKkQ6CTZtzVqhzuk5S_f83z3tPI2Aw0Q5h8E3utcjWS4u1rWAqgGy60ZWukUfvWeqBwZBvS6N8weA7xM5k31gl74uZfUrtrKI3vXA/s1600/styledinfowindow006.jpg" alt="Info window" height="339" width="430" /></a></div>
<h3>
4. Cantos arredondados</h3>
<p>Em versões anteriores do Google Maps a infowindow tinha os cantos muito mais arredondados. É uma questão de gosto e de tendências, por isso fica ao gosto de cada um atribuir ou não mais enfase ao contorno dos cantos.<br />
Esta tarefa é muito simples, basta aplicar 10px à regra CSS <i>border-radius</i> da classe <i>.gm-style-iw</i>.</p>
<div class="mm-pre"><span class="left-pre">CSS /style.css</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-css">
.gm-style-iw {
width: 350px !important;
top: 15px !important;
left: 0 !important;
background-color: #fff;
box-shadow: 0 1px 6px rgba(178, 178, 178, 0.6);
border: 1px solid rgba(72, 181, 233, 0.6);
border-radius: 2px 2px 10px 10px; // aplicar 10px nos cantos inferiores da infowindow
}
</pre>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUHJXiIRyB8xJzujuG0YsJ5McZTVlz0-5USkl_dFczZkNmFke1yDlXSGMrzJfzmd8Yuv1HpAU9eDnvZ4dw0x551a0ns9_kQZ_xPL3fN4_8KgHnm3sXbhHguGUHcN5Us1zPncpXAR0kORg/s1600/styledinfowindow007.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUHJXiIRyB8xJzujuG0YsJ5McZTVlz0-5USkl_dFczZkNmFke1yDlXSGMrzJfzmd8Yuv1HpAU9eDnvZ4dw0x551a0ns9_kQZ_xPL3fN4_8KgHnm3sXbhHguGUHcN5Us1zPncpXAR0kORg/s1600/styledinfowindow007.jpg" alt="Info window" height="339" width="430" /></a></div>
<h3>
5. Efeito "fade" na base da infowindow</h3>
<p>Por último podemos aplicar um efeito "fade" na base do conteúdo da infowindow. Este efeito sugere que existe mais conteúdo escondido, sendo necessário fazer "scroll".<br />
Este efeito é conseguido sobrepondo um div com efeito gradiente sobre a última linha do conteúdo.</p>
<p>Primeiro de tudo é necessário criar o DIV no final do conteúdo HTML da infowindow.</p>
<div class="mm-pre"><span class="left-pre">HTML /index.html</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-html">
<div class="iw-bottom-gradient"></div>
</pre>
<p>Seguidamente aplicamos as regras CSS para a class <i>iw-bottom-gradient</i>.</p>
<div class="mm-pre"><span class="left-pre">CSS /style.css</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-css">
.iw-bottom-gradient {
position: absolute;
width: 326px;
height: 25px;
bottom: 10px;
right: 18px;
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
}
</pre>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh8D3ymV84lsJkWieUVWf_FeY_U2he11mjt9cwD-HD0lI83yhgTSplyzTbU9c7_BAmHaU0qiy0CtGEzaEjsRMPmw4TAEh1AjSA10f5HkBCGxGEcsh-ql8c1OZ4ob29lQyNmvoAlAN912k/s1600/styledinfowindow008.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh8D3ymV84lsJkWieUVWf_FeY_U2he11mjt9cwD-HD0lI83yhgTSplyzTbU9c7_BAmHaU0qiy0CtGEzaEjsRMPmw4TAEh1AjSA10f5HkBCGxGEcsh-ql8c1OZ4ob29lQyNmvoAlAN912k/s1600/styledinfowindow008.jpg" alt="Info window" height="339" width="430" /></a></div>
<p>Assim concluímos as 5 formas de personalizar a InfoWindow do Google Maps. Cada personalização pode ser aplicada isoladamente ou na totalidade.<br />
O resultado final não é o "estado da arte" mas antes uma exemplificação de um caminho possível para dar nova vida à InfoWindow.<br />
Convido-te a deixar um link nos comentários e mostrar a tua criatividade com a personalização das infowindows.</p>
<p><span class="linkExemplos"><a class="btndemo" href="http://maps.marnoto.com/5formaspersonalizarinfowindow/exemplo.html" target="_blank">Ver exemplo do mapa.</a></span></p>
<p>Todas as dúvidas ou comentários são bem-vindos. Por favor, utiliza a secção de comentários para que todos partilhem da informação.</p>
<div class="ads_content">
<span class="ads_content_center">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 336x280_marnoto_right_24092014 -->
<ins class="adsbygoogle"
style="display:inline-block;width:336px;height:280px"
data-ad-client="ca-pub-0362839059472765"
data-ad-slot="9524278346"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</span>
</div>
<div class="download-files">
<div class="download-files-title">
Download dos ficheiros necessários para este exemplo</div>
<ul>
<li><a class="btndown" href="http://maps.marnoto.com/downloads/5formaspersonalizarinfowindow.zip">5formaspersonalizarinfowindow.zip</a></li>
</ul>
</div>Miguel Marnotohttp://www.blogger.com/profile/08168845698852902239noreply@blogger.com14tag:blogger.com,1999:blog-1566703829628107053.post-16402183176930483082014-06-06T15:56:00.001+01:002018-04-04T03:24:46.432+01:00Street View visita os Estádios do Mundial do Brasil 2014<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQEt8fTS4GOWW4sqbUULUcyGNpE6q3JK33GWeICT7_y7m1EjK05FKAn2DM5VlGUPBOZ_ObMlOaqaiLfRZOcpyDUX_Ji1GILqy2HQSuFdMyvQl_HNPudLAXqw4_un2Y9Sja3a4c8zvQGEw/s1600/brasil2014.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQEt8fTS4GOWW4sqbUULUcyGNpE6q3JK33GWeICT7_y7m1EjK05FKAn2DM5VlGUPBOZ_ObMlOaqaiLfRZOcpyDUX_Ji1GILqy2HQSuFdMyvQl_HNPudLAXqw4_un2Y9Sja3a4c8zvQGEw/s1600/brasil2014.jpg" height="184" width="320" /></a></div>
O Campeonato Mundial de Futebol do Brasil está quase a começar, pena é que nem todos teremos a oportunidade de estar presente. O Google Maps, com o Street View, oferece a oportunidade de <a href="https://www.google.com/maps/views/streetview/brazils-world-cup-stadiums?gl=us" title="Street View Estádios de Futebol no Brasil" target="_blank">visitar o interior dos estádios</a>. As imagens 360º dão uma excelente perspetiva da grandiosidade de cada estádio.<a name='more'></a>
<br /><br/>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.google.com/maps/views/streetview/brazils-world-cup-stadiums?gl=us" title="Street View Estádios de Futebol no Brasil" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQEt8fTS4GOWW4sqbUULUcyGNpE6q3JK33GWeICT7_y7m1EjK05FKAn2DM5VlGUPBOZ_ObMlOaqaiLfRZOcpyDUX_Ji1GILqy2HQSuFdMyvQl_HNPudLAXqw4_un2Y9Sja3a4c8zvQGEw/s1600/brasil2014.jpg" /></a></div>
<br>
É ainda possível <a href="https://www.google.com/maps/views/streetview/brazils-painted-streets?gl=us" title="Street View ruas brasileiras" target="_blank">passear por algumas das ruas brasileiras</a>, que foram decoradas a rigor para receber os milhares de adeptos do desporto rei.
<br /><br/>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.google.com/maps/views/streetview/brazils-painted-streets?gl=us" title="Street View ruas brasileiras" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw2IFB7mazW4q9EjlDCbwWzPjhR62r2b89U1cCS8jUFwLP-72ZUyj6CQqEnyR7vkH1NafUpa_H0SAsOMfkBh38-dHG36f2CcipkslXnBk0-6zhqax2PKHPsc1nYXhIeRb3afqLppTQKAE/s1600/brasilruas2014.jpg" /></a></div>
<br><br>Miguel Marnotohttp://www.blogger.com/profile/08168845698852902239noreply@blogger.com0tag:blogger.com,1999:blog-1566703829628107053.post-13704948728270648462014-04-26T18:40:00.000+01:002018-04-04T03:29:24.045+01:00Converter as coordenadas geográficas do Google Maps<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiifgr0f083Op-4HaDKPn5eH6C4t8MwiV_ymEL5gcmDYBPb70sEij06sFF3QSpG4GNK7EhUL3YyApNnsvQQx46-0Vfw6bfiHisHM7VlPKQPRCV4AK2lNi5WEpvY0w9p0ulouoW3Vmb14Ss/s1600/ddtodms.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img itemprop="image" alt="Coordenadas Google Maps" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiifgr0f083Op-4HaDKPn5eH6C4t8MwiV_ymEL5gcmDYBPb70sEij06sFF3QSpG4GNK7EhUL3YyApNnsvQQx46-0Vfw6bfiHisHM7VlPKQPRCV4AK2lNi5WEpvY0w9p0ulouoW3Vmb14Ss/s1600/ddtodms.jpg" title="" /></a></div>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- list-conversor-pt -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:15px"
data-ad-client="ca-pub-0362839059472765"
data-ad-slot="6496176743"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<p>As coordenadas geográficas utilizadas pelo Google Maps são designadas de Coordenadas DD (Decimal Degrees). Ou seja, estas coordenadas estão no formato Graus Decimais (e.g. Lat 40.601203, Lng -8.668173).<a name='more'></a>
Outro formato de representação das coordenadas geográficas, bastante comum entre os utilizadores de GPS, é o formato DMS (Degrees, Minutes, Seconds, e.g N 40° 36' 4.3", W 8° 40' 5.4").<br>
<span itemprop="description">A partir das coordenadas DD, utilizadas para <a href='https://www.marnoto.com/2013/12/mapa-com-varios-marcadores-google-maps.html' target='_blank' title='Mapa com vários marcadores - Google Maps API JavaScript v3'>inserir marcadores no mapa</a>, podes com facilidade converter essas coordenadas no formato DMS.</span> Com certeza que esta informação será bastante útil para os visitantes dos teus mapas.</p>
<div style="margin-bottom: 38px;">
<span>Poderás também estar interessado em:</span><br>
<span style="font-size: 24px; margin-left: 25px;"><a href="http://maps.marnoto.com/conversor-coordenadas/" target="_blank">Conversor de coordenadas geográficas</a></span>
</div>
<h3>O sistema de coordenadas geográficas</h3>
<p>Convém antes de mais referir que ambos os sistemas dividem o globo em 360 graus, a diferença está no fraccionamento do grau. A latitude é compreendida entre o valor 0 no equador até 90 graus nos pólos. A longitude é compreendida entre o valor 0 no meridiano de GreenWich até 180 graus na parte oposta do globo.</p>
<p>Assim, temos os seguintes valores:</p>
<ul>
<li>O valor de latitude superior a 0 (0 a 90) é referente ao Norte (N) e inferior a 0 (0 a -90) é referente ao Sul (S).</li>
<li>O valor de longitude superior a 0 (0 a 180) é referente a Este (E) e inferior a 0 (0 a -180) é referente a Oeste (O ou W).</li>
</ul>
<p>Por exemplo, se determinado ponto tiver as coordenadas Lat 40.601203, Lng -8.668173 isto quer dizer que o ponto situa-se na latitude Norte e longitude Oeste.</p>
<div class="btn-demo-down">
<p>Antes de iniciar o tutorial vê uma demonstração do mapa ou faz o download do código necessário para seguir este exemplo.</p>
<a class="btn-down btndemo" href="http://maps.marnoto.com/convertercoordenadas/exemplo.html" target="_blank" title="Exemplo de mapa com coordenadas em DMS"><i class="fa fa-eye"></i> DEMO</a>
<a class="btn-down btndown" style="margin-left: 15px;" href="http://maps.marnoto.com/downloads/converter_coordenadas.zip" title="converter_coordenadas.zip"><i class="fa fa-download"></i> DOWNLOAD</a>
</div>
<h3>Iniciar a conversão das coordenadas</h3>
<p>Antes de mais vou mostrar-te o código que verifica se um determinado ponto fica a Norte, Sul, Este ou Oeste.</p>
<div class="mm-pre"><span class="left-pre">JavaScript /map.js</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-js">
function ddToDms(lat, lng) {
var lat = lat;
var lng = lng;
var latResult, lngResult;
// Certificar que estás a trabalhar com números.
// Isto é importante para o caso de obteres os valores
// com origem em inputs de texto no html.
lat = parseFloat(lat);
lng = parseFloat(lng);
// Verificar a correspondência das coordenadas para a latitude: Norte ou Sul.
if (lat >= 0) {
latResult = 'N';
} else {
latResult = 'S';
}
// O exemplo anterior pode ser substituído pelo seguinte exemplo,
// por forma a reduzir a quantidade de código.
latResult = (lat >= 0)? 'N' : 'S';
// Verificar a correspôndência das coordenadas para a longitude: Este ou Oeste.
if (lng >= 0) {
lngResult = 'E';
} else {
lngResult = 'W';
}
// O exemplo anterior pode ser substituído pelo seguinte exemplo
// por forma a reduzir a quantidade de código.
lngResult = (lng >= 0)? 'E' : 'W';
}
</pre>
<h3>Coordenadas no formato DMS</h3>
<p>O formato DMS utiliza a medida do ângulo para determinar a posição dos objectos no globo.
<br>
A unidade de medida do ângulo é o <b>grau</b> e existem 360 graus num círculo completo. (Símbolo do grau é <b>º</b>)
<br>
Cada grau é dividido em 60 <b>minutos</b>. (Símbolo do minuto é <b>'</b>) 1º = 60'
<br>
Cada minuto é dividido em 60 <b>segundos</b>. (Símbolo do segundo é <b>"</b>) 1' = 60"
<br>
<b>Assim, em 1 grau existem 60 * 60 segundos, ou 3600 segundos.</b></p>
<h3>A conversão das coordenadas DD em DMS</h3>
<p>O passo seguinte é a conversão efectiva das coordenadas para o formato DMS.
<br>
Uma pequena introdução à equivalência entre os dois formatos para que a compreensão do código seja facilitada.
<br>
Tendo em conta os seguintes valores em DD Lat 40.601203.</p>
<ol>
<li>
Antes de mais lembrar que se o valor de latitude é positivo, isso quer dizer que o objecto está no hemisfério Norte.
</li>
<li>
O valor inteiro do formato DD equivale ao valor dos graus no formato DMS. Ou seja, <b>o valor 40 em DD é equivalente ao valor 40º em DMS</b>.
<br>
Assim tens: DMS Lat N 40º.
</li>
<li>A parte decimal no formato DD é multiplicada por 60 e o valor inteiro daí resultante converte-se nos minutos no formato DMS. Ou seja, <b>retirando 40 ao valor 40.601203 ficas com 0.601203. Então multiplicas 0.601203 * 60 = 36.07218 assim o valor dos minutos é 36'</b>.
<br>
Agora já tens: DMS Lat 40º 36'
</li>
<li>Agora utilizas a parte decimal resultante da multiplicação de 0.601203 * 60 = 36.07218 e multiplicas por 60. Ou seja, <b>a 36.07218 retiras o 36 e multiplicas 0.07218 * 60 = 4.3308. Reduzindo este valor a duas casas decimais ficas com 4.33</b>.
<br>
Assim ficas com: DMS Lat 40º 36' 4.33"
<br>
<br>
<b>DD 40.601203 = DMS N 40º 36' 4.33"</b>
</li>
</ol>
<p>Agora já podes ver o código JavaScript a utilizar para fazer a conversão automática para todos os marcadores existentes no teu projecto.</p>
<div class="mm-pre"><span class="left-pre">JavaScript /map.js</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-js">
// Função que converte DD para DMS.
// Tendo como exemplo o valor -40.601203.
function getDms(val) {
// Variáveis necessárias à conversão
var valDeg, valMin, valSec, result;
// Aqui convertes o valor recebido no parâmetro para um valor absoluto.
// Ou seja, convertes o valor negativo para positivo.
// Neste passo não interessa se é Norte, Sul, Este ou Oeste,
// essa verificação foi efetuada anteriormente.
val = Math.abs(val); // -40.601203 = 40.601203
// ---- Graus ----
// Retirar o valor inteiro de DD para obter o valor Degrees em DMS
valDeg = Math.floor(val); // 40.601203 = 40
// Adicionar o valor graus ao resultado, adicionando o símbolo graus 'º'.
result = valDeg + "º"; // 40º
// ---- Minutos ----
// Retirar ao valor inicial o valor Degrees para ficar só com
// a parte decimal.
// Multiplicar a parte decimal por 60.
// Math.floor devolve somente o valor inteiro.
// ((40.601203 - 40 = 0.601203) * 60 = 36.07218) = 36
valMin = Math.floor((val - valDeg) * 60); // 36.07218 = 36
// Adicionar o valor minutos ao resultado, adicionando o símbolo minutos '''.
result += valMin + "'"; // 40º36'
// ---- Segundos ----
// Para obter o valor em segundos é necessário:
// 1º - retirar o valor em graus ao valor inicial: 40 - 40.601203 = 0.601203;
// 2º - converter o valor minutos (36') em decimal ( valMin/60 = 0.6) para
// de seguida o subtrair ao valor anterior: 0.601203 - 0.6 = 0.001203;
// 3º - agora que já tens o valor dos segundos em decimal,
// precisas de o converter em segundos de grau.
// Para isso multiplicas esse valor (0.001203) por 3600, que é
// o número de segundos existente num grau.
// Obtens 0.001203 * 3600 = 4.3308
// Como estás a utilizar a função Math.round(),
// que arredonda o valor à unidade seguinte,
// podes controlar o número de casas decimais através da
// multiplicação por 1000 antes de Math.round
// e consequente divisão por 1000 após a função Math.round.
// Obtens 4.3308 * 1000 = 4330.8 -> Math.round = 4331 -> 4331 / 1000 = 4.331
// Neste caso o valor final terá 3 casas decimais.
// Se quiseres somente duas casas decimais basta
// substituir o valor 1000 por 100.
valSec = Math.round((val - valDeg - valMin / 60) * 3600 * 1000) / 1000; // 40.601203 = 4.331
// Adicionar o valor segundos ao resultado,
// adicionando o símbolo segundos '"'.
result += valSec + '"'; // 40º36'4.331"
// Devolve a string resultante.
return result;
}
</pre>
<h3>O código final</h3>
<p>Com uma pequena alteração no código da função ddTomDms() consegues converter de forma automática as coordenadas DD para DMS.
<br>
O seguinte código mostra como utilizar as duas funções em conjunto, neste código só serão comentadas as alterações.</p>
<div class="mm-pre"><span class="left-pre">JavaScript /map.js</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-js">
// Função que constrói a string de conversão
// de coordenadas em DD para DMS.
function ddToDms(lat, lng) {
var lat = lat;
var lng = lng;
var latResult, lngResult, dmsResult;
lat = parseFloat(lat);
lng = parseFloat(lng);
latResult = (lat >= 0)? 'N' : 'S';
// Chamada à função getDms(lat) para as coordenadas da Latitude em DMS.
// O resultado será adicionado à variável latResult.
latResult += getDms(lat);
lngResult = (lng >= 0)? 'E' : 'W';
// Chamada à função getDms(lng) para as coordenadas da Longitude em DMS.
// O resultado será adicionado à variável lngResult.
lngResult += getDms(lng);
// Agora é só juntar as duas variáveis e separá-las com um espaço.
dmsResult = latResult + ' ' + lngResult;
// Devolvendo a string
return dmsResult;
}
function getDms(val) {
var valDeg, valMin, valSec, result;
val = Math.abs(val);
valDeg = Math.floor(val);
result = valDeg + "º";
valMin = Math.floor((val - valDeg) * 60);
result += valMin + "'";
valSec = Math.round((val - valDeg - valMin / 60) * 3600 * 1000) / 1000;
result += valSec + '"';
return result;
}
</pre>
<p>O código completo está disponível no link abaixo. Nesse código é feita uma chamada à função ddToDms() da seguinte forma:</p>
<div class="mm-pre"><span class="left-pre">JavaScript /map.js</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-js">
var dmsCoords = ddToDms(latlng.lat(), latlng.lng());
</pre>
<p>A variável dmsCoords será incluída na <a href='https://www.marnoto.com/2013/09/info-window-no-gogle-maps-api.html' title='Criar uma InfoWindow no Google Maps API JavaScript v3' target='_blank'>construção da InfoWindow</a>. Ou poderá ser incluída em qualquer outro local, não esquecendo que os valores a passar nos parâmetros terão de ser primeiro a latitude e depois a longitude -> ddToDms(lat, lng).</p>
<span class="linkExemplos"><a class="btndemo" href="http://maps.marnoto.com/convertercoordenadas/exemplo.html" target="_blank">Ver exemplo do mapa</a><small> Os estádios do Mundial de 2014 no Brasil</small></span><br>
<p>Este exemplo mostra a localização dos estádios onde vão decorrer os jogos do Mundial de Futebol do Brasil 2014. Ao fazer click nos marcadores abre uma Info Window com o nome e localização do Estádio, um link para a respectiva página da FIFA e ainda as coordenadas GPS no formato DMS.</p>
<p>Para mais informações acerca da criação de mapas com vários marcadores, por favor consulte o seguinte artigo:
<ul>
<li><a href="https://www.marnoto.com/2013/12/mapa-com-varios-marcadores-google-maps.html" target="_blank">Mapa com vários marcadores - Google Maps API JavaScript v3</a></li>
</ul>
</p>
<p>Todas as dúvidas ou comentários são bem-vindos. Por favor, utilize a secção de comentários para que todos partilhem da informação.</p>
<div class="ads_content">
<span class="ads_content_center">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 336x280_marnoto_right_24092014 -->
<ins class="adsbygoogle"
style="display:inline-block;width:336px;height:280px"
data-ad-client="ca-pub-0362839059472765"
data-ad-slot="9524278346"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</span>
</div>
<div class="download-files">
<div class="download-files-title">
Download dos ficheiros necessários para este exemplo</div>
<ul>
<li><a class="btndown" href="http://maps.marnoto.com/downloads/converter_coordenadas.zip" >converter_coordenadas.zip</a></li>
</ul>
</div>Miguel Marnotohttp://www.blogger.com/profile/08168845698852902239noreply@blogger.com4tag:blogger.com,1999:blog-1566703829628107053.post-45153690850319221402013-12-18T13:16:00.000+00:002018-04-04T03:29:57.630+01:00Obter coordenadas no novo Google Maps<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpqqMGS70FPHMmgVGvRK3MSkkrSxSNH4nZy38rgGHC8jAKJn9ZTwQzsyih4g4iYuI2OjWfKt_WDvHrkscpc2R7PYkJmWOubOOltY2e7v5ub14h4isTqCgwVRXpUIyhBLPmcINfuIyKKtM/s1600/coords.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img itemprop="image" alt="Coordenadas Google Maps" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpqqMGS70FPHMmgVGvRK3MSkkrSxSNH4nZy38rgGHC8jAKJn9ZTwQzsyih4g4iYuI2OjWfKt_WDvHrkscpc2R7PYkJmWOubOOltY2e7v5ub14h4isTqCgwVRXpUIyhBLPmcINfuIyKKtM/s1600/coords.png" title="" /></a></div>
<p>O novo Google Maps é muito mais apelativo aos nossos olhos mas muitas utilidades ficaram na gaveta. Aos poucos a Google vai implementando algumas das ferramentas mais úteis da anterior versão.<a name='more'></a> Mas a facilidade com que se encontravam as coordenadas de um local no formato graus decimais (DDD: 40.604036, -8.665247) ainda não foi implementada no novo Google Maps.</p>
<div>
<span>Poderás também estar interessado em:</span><br>
<span style="font-size: 24px; margin-left: 25px;"><a href="http://maps.marnoto.com/conversor-coordenadas/" target="_blank">Conversor de coordenadas geográficas</a></span>
</div>
<br />
<p>À data da publicação deste artigo a única forma de encontrar essas coordenadas é através do URL.<br />
Ao fazer click no mapa surge uma caixa no canto superior esquerdo que mostra as coordenadas de GPS. Com um click nessas coordenadas o URL da página é alterado e no final do URL encontramos as coordenadas DDD.<br />
No seguinte URL mostro o endereço completo de uma localização após o click nas coordenadas de GPS. No final do URL aparacem as respectivas coordenadas em graus decimais.</p>
<blockquote class="quote center">
https://www.google.com/maps/preview#!q=40%C2%B0+38.396'%2C+-8%C2%B0+36.570'&data=!4m14!2m13!1m12!3m8!1m3!1d10723!2d-8.6007929!3d40.6367078!3m2!1i1366!2i680!4f13.1!4m2!3d<b><span style="color: blue;">40.6399333</span></b>!4d<b><span style="color: blue;">-8.6095</span></b></blockquote>
<p><span itemprop="description">Com a API do Google Maps podemos facilmente criar o nosso próprio sistema de pesquisa de coordenadas no formato graus decimais</span>.<br />
Antes da explicação do código vejamos uma demonstração do sistema em funcionamento.</p>
<div class="btn-demo-down">
<p>Antes de iniciar o tutorial vê uma demonstração do mapa ou faz o download do código necessário para seguir este exemplo.</p>
<a class="btn-down btndemo" href="http://maps.marnoto.com/pesquisacoordenadas/exemplo.html" target="_blank" title="Exemplo de como obter coordenadas no novo Google Maps"><i class="fa fa-eye"></i> DEMO</a>
<a class="btn-down btndown" style="margin-left: 15px;" href="http://maps.marnoto.com/downloads/pesquisa_coordenadas.zip" title="pesquisa_coordenadas.zip"><i class="fa fa-download"></i> DOWNLOAD</a>
</div>
<h3>Actualização <small>(3 de Abril de 2014)</small></h3>
<p>No final de Fevereiro passado, a equipa do Google Maps trouxe de volta a possibilidade de clicar com o botão direito no mapa e solicitar mais informações sobre o local seleccionado. Assim, é novamente possível obter as direcções para ou a partir do local, bem como visualizar a latitude e longitude.</p>
<img class="aligncenter" alt="Coordenadas Google Maps" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFGo7_W43DqGSYCSHhyphenhyphenFyG5TP0mlMAod4HqUuBCKsQuFaWupUCy2QhHtfephORMHJtd2Sll5djpRIKeDKVf_l7g1OjNAP6q1jGpeWWd9POxmEitESKGNi52BlApPk7Osxjvsi3tZ5O5UU/s1600/gm_coords.gif" title="" />
<h3>
Implementação do sistema de detecção de coordenadas</h3>
<p>O código JavaScript necessário para implementar um sistema de detecção de coordenadas é muito simples. Antes de mais é necessário fazer uso do evento que detecta um click no mapa e inserir um marcador no mapa. Ao mesmo tempo passamos os valores de latitude e longitude para as respectivas caixas de texto existentes no topo da página.</p>
<p>O seguinte código demonstra como iniciar o mapa e a detecção do click no mapa. Os comentários inseridos no código devem ser suficientes para perceber o seu funcionamento.</p>
<div class="mm-pre"><span class="left-pre">JavaScript /map.js</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-js">// Váriáveis necessárias
var map;
var marker;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(40.601203,-8.668173),
zoom: 9,
mapTypeId: 'roadmap'
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// Evento que detecta o click no mapa para criar o marcador
google.maps.event.addListener(map, "click", function(event) {
// O evento "click" retorna a posição do click no mapa,
// através dos métodos latLng.lat() e latLng.lng().
// Passamos as respectivas coordenadas para as variáveis lat e lng
// para posterior referência.
// Utilizamos o método toFixed(6) para limitar o número de casas decimais.
// A API ignora os valores além da 6ª casa decimal
var lat = event.latLng.lat().toFixed(6);
var lng = event.latLng.lng().toFixed(6);
// A criação do marcador é feita na função createMarker() e
// passamos os valores das coordenadas do click através
// dos parâmetros lat e lng.
createMarker(lat, lng);
// getCoords() actualiza os valores de Latitue e Longitude
// das caixas de texto existentes no topo da página
getCoords(lat, lng);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</pre>
<p>Agora vejamos o código para a criação do marcador no mapa, com a adição do evento que detecta o arrastar do marcador para um posicionamento no mapa com maior precisão.</p>
<div class="mm-pre"><span class="left-pre">JavaScript /map.js</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-js">// Função que cria o marcador
function createMarker(lat, lng) {
// A intenção é criar um único marcador, por isso
// verificamos se já existe um marcador no mapa.
// Assim cada vez que é feito um click no mapa
// o anterior marcador é removido e é criado outro novo.
// Se a variável marker contém algum valor
if (marker) {
// remover esse marcador do mapa
marker.setMap(null);
// remover qualquer valor da variável marker
marker = "";
}
// definir a variável marker com os novos valores
marker = new google.maps.Marker({
// Define a posição do marcador através dos valores lat e lng
// que foram definidos através do click no mapa
position: new google.maps.LatLng(lat, lng),
// Esta opção permite que o marcador possa ser arrastado
// para um posicionamento com maior precisão.
draggable: true,
map: map
});
// Evento que detecta o arrastar do marcador para
// redefinir as coordenadas lat e lng e
// actualiza os valores das caixas de texto no topo da página
google.maps.event.addListener(marker, 'dragend', function() {
// Actualiza as coordenadas de posição do marcador no mapa
marker.position = marker.getPosition();
// Redefine as variáveis lat e lng para actualizar
// os valores das caixas de texto no topo
var lat = marker.position.lat().toFixed(6);
var lng = marker.position.lng().toFixed(6);
// Chamada da função que actualiza os valores das caixas de texto
getCoords(lat, lng);
});
}
</pre>
<p>A actualização dos valores de latitude e longitude das caixas de texto é feita da seguinte forma.</p>
<div class="mm-pre"><span class="left-pre">JavaScript /map.js</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-js">// Função que actualiza as caixas de texto no topo da página
function getCoords(lat, lng) {
// Referência ao elemento HTML (input) com o id 'lat'
var coords_lat = document.getElementById('lat');
// Actualiza o valor do input 'lat'
coords_lat.value = lat;
// Referência ao elemento HTML (input) com o id 'lng'
var coords_lng = document.getElementById('lng');
// Actualiza o valor do input 'lng'
coords_lng.value = lng;
}
</pre>
<p>A utilidade deste pequeno sistema de detecção de coordenadas do Google Maps é limitada. No entanto, os métodos utilizados podem ser adaptados em sistemas mais complexos e permitirem uma interacção bastante interessante com a API.</p>
<p>Todas as dúvidas ou comentários são bem-vindos. Por favor, utilizar a secção de comentários para que todos partilhem da informação.</p>
<div class="ads_content">
<span class="ads_content_center">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 336x280_marnoto_right_24092014 -->
<ins class="adsbygoogle"
style="display:inline-block;width:336px;height:280px"
data-ad-client="ca-pub-0362839059472765"
data-ad-slot="9524278346"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</span>
</div>
<div class="download-files">
<div class="download-files-title">
Download dos ficheiros necessários para este exemplo</div>
<ul>
<li><a class="btndown" href="http://maps.marnoto.com/downloads/pesquisa_coordenadas.zip">pesquisa_coordenadas.zip</a></li>
</ul>
</div>Miguel Marnotohttp://www.blogger.com/profile/08168845698852902239noreply@blogger.com9tag:blogger.com,1999:blog-1566703829628107053.post-50973221489847353392013-12-14T19:54:00.003+00:002018-04-04T03:30:34.404+01:00Mapa com vários marcadores - Google Maps API JavaScript v3<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqW25hCcNDGmgdTTfyGtbIvTqezpw6lAOuLEPdJwlOBtPvlXUh7JbZjSzNWyUiVh1ccN8ywIT5iMn_54nDGfy6KRW9rc3-9niM3VKkU6Z-062KJSrooM-W-0MXQfGRPNyod8PRqt18QXE/s1600/multimarker.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" itemprop="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqW25hCcNDGmgdTTfyGtbIvTqezpw6lAOuLEPdJwlOBtPvlXUh7JbZjSzNWyUiVh1ccN8ywIT5iMn_54nDGfy6KRW9rc3-9niM3VKkU6Z-062KJSrooM-W-0MXQfGRPNyod8PRqt18QXE/s1600/multimarker.jpg" /></a></div>
<p><span itemprop="description">Adicionar vários marcadores a um mapa sem recorrer a uma base de dados pode ser limitado mas tem as suas vantagens, quando o número de marcadores é reduzido.</span><a name='more'></a><br />
Quando pretendemos introduzir até 10 ou 15 marcadores num mapa poderá ser mais eficaz a sua inclusão numa variável junto do código que cria o próprio mapa.</p>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- links_multiplos_marcadores -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-0362839059472765"
data-ad-slot="4353422337"
data-ad-format="link"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br>
<p>Neste artigo não entrarei em detalhes quanto à criação de mapas, marcadores e Info Windows. Essa informação está disponível nos seguintes artigos:</p>
<ul>
<li><a href="https://www.marnoto.com/2013/09/como-criar-um-mapa-com-google-maps-api.html" target="_blank">Como criar um mapa com Google Maps API v3</a></li>
<li><a href="https://www.marnoto.com/2013/09/adicionar-um-marcador-com-google-maps.html" target="_blank">Adicionar um marcador com Google Maps JavaScript API 3</a></li>
<li><a href="https://www.marnoto.com/2013/09/info-window-no-gogle-maps-api.html" target="_blank">Info Window no Google Maps JavaScript API 3</a></li>
</ul>
<div class="btn-demo-down">
<p>Antes de iniciar o tutorial vê uma demonstração do mapa ou faz o download do código necessário para seguir este exemplo.</p>
<a class="btn-down btndemo" href="http://maps.marnoto.com/multiplos_marcadores/exemplo.html" target="_blank" title="Exemplo de mapa com multiplos marcadores"><i class="fa fa-eye"></i> DEMO</a>
<a class="btn-down btndown" style="margin-left: 15px;" href="http://maps.marnoto.com/downloads/multiplos_marcadores.zip" title="multiplos_marcadores.zip"><i class="fa fa-download"></i> DOWNLOAD</a>
</div>
<h3>
Definir a informação dos marcadores</h3>
<p>Primeiro é necessário definir a posição do marcador no mapa e o conteúdo da InfoWindow.<br />
A informação é guardada numa variável <i>Array de objectos</i> com o nome <b><i>markersData</i></b> da seguinte forma:</p>
<div class="mm-pre"><span class="left-pre">JavaScript /map.js</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-js">var markersData = [
{
lat: 40.6386333,
lng: -8.745,
nome: "Parque de Campismo Praia da Barra",
morada1:"Rua Diogo Cão, 125",
morada2: "Praia da Barra",
codPostal: "3830-772 Gafanha da Nazaré" // não colocar virgula no último item de cada marcador
},
{
lat: 40.59955,
lng: -8.7498167,
nome: "Parque de Campismo da Costa Nova",
morada1:"Quinta dos Patos, n.º 2",
morada2: "Praia da Costa Nova",
codPostal: "3830-453 Gafanha da Encarnação" // não colocar virgula no último item de cada marcador
},
{
lat: 40.6247167,
lng: -8.7129167,
nome: "Parque de Campismo da Gafanha da Nazaré",
morada1:"Rua dos Balneários do Complexo Desportivo",
morada2: "Gafanha da Nazaré",
codPostal: "3830-225 Gafanha da Nazaré" // não colocar virgula no último item de cada marcador
} // não colocar vírgula no último marcador
];</pre>
Esta forma de guardar informação não é a mais eficaz do ponto de vista de performance do código JavaScript. Mas o que se pretende aqui é mostrar da forma mais clara possível como criar um procedimento para inserir múltiplos marcadores num mapa.<br />
<h3>
Como criar os marcadores</h3>
Para inserir os marcadores definidos anteriormente no mapa é necessário criar uma função (<i>displayMarkers()</i>) que vai percorrer cada item do <i>array de objectos markersData</i> e criar o respectivo marcador recorrendo à função (<i>createMarker()</i>).<br />
Primeiro vamos dar uma vista de olhos no código:<br />
<br />
<div class="mm-pre"><span class="left-pre">JavaScript /map.js</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-js">// Esta função vai percorrer a informação contida na variável markersData
// e cria os marcadores através da função createMarker
function displayMarkers(){
// esta variável vai definir a área de mapa a abranger e o nível do zoom
// de acordo com as posições dos marcadores
var bounds = new google.maps.LatLngBounds();
// Loop que vai percorrer a informação contida em markersData
// para que a função createMarker possa criar os marcadores
for (var i = 0; i < markersData.length; i++){
var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng);
var nome = markersData[i].nome;
var morada1 = markersData[i].morada1;
var morada2 = markersData[i].morada2;
var codPostal = markersData[i].codPostal;
createMarker(latlng, nome, morada1, morada2, codPostal);
// Os valores de latitude e longitude do marcador são adicionados à
// variável bounds
bounds.extend(latlng);
}
// Depois de criados todos os marcadores,
// a API, através da sua função fitBounds, vai redefinir o nível do zoom
// e consequentemente a área do mapa abrangida de acordo com
// as posições dos marcadores
map.fitBounds(bounds);
}
</pre>
<br />
Os comentários inseridos no código devem ser suficientes para a compreensão do funcionamento desta função. Esta função percorre cada item da variável <i>markersData</i> e faz uma chamada à função <i>createMarker</i>, passando a respectiva informação. Adicionalmente é criada uma variável <i>bounds</i> que vai passar à API a localização de cada marcador. A função <i>fitBounds()</i> vai adequar o nível do zoom do mapa a fim de mostrar todos os marcadores.<br />
<br />
Agora vejamos a função createMarker:<br /><br />
<div class="mm-pre"><span class="left-pre">JavaScript /map.js</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-js">// Função que cria os marcadores e define o conteúdo de cada Info Window.
function createMarker(latlng, nome, morada1, morada2, codPostal){
var marker = new google.maps.Marker({
map: map,
position: latlng,
title: nome
});
// Evento que dá instrução à API para estar alerta ao click no marcador.
// Define o conteúdo e abre a Info Window.
google.maps.event.addListener(marker, 'click', function() {
// Variável que define a estrutura do HTML a inserir na Info Window.
var iwContent = '<div id="iw_container">' +
'<div class="iw_title">' + nome + '</div>' +
'<div class="iw_content">' + morada1 + '<br />' +
morada2 + '<br />' +
codPostal + '</div></div>';
// O conteúdo da variável iwContent é inserido na Info Window.
infoWindow.setContent(iwContent);
// A Info Window é aberta com um click no marcador.
infoWindow.open(map, marker);
});
}
</pre>
Os marcadores são adicionados ao mapa através da variável <i>marker</i>. Adicionalmente é definido o conteúdo da <i>info window</i> para cada marcador.
<br />
<br />
Estas duas funções não fazem sentido sem a função que inicializa a criação do mapa:<br /><br />
<div class="mm-pre"><span class="left-pre">JavaScript /map.js</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-js">function initialize() {
var mapOptions = {
center: new google.maps.LatLng(40.601203,-8.668173),
zoom: 9,
mapTypeId: 'roadmap',
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// Cria a nova Info Window com referência à variável infoWindow.
// O conteúdo da Info Window é criado na função createMarker.
infoWindow = new google.maps.InfoWindow();
// Evento que fecha a infoWindow com click no mapa.
google.maps.event.addListener(map, 'click', function() {
infoWindow.close();
});
// Chamada para a função que vai percorrer a informação
// contida na variável markersData e criar os marcadores a mostrar no mapa
displayMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);
</pre>
<span class="linkExemplos"><a class="btndemo" href="http://maps.marnoto.com/multiplos_marcadores/exemplo.html" target="_blank">Ver exemplo do mapa.</a></span><br />
<br />
Este exemplo mostra como adicionar múltiplos marcadores no mapa. Utiliza uma só Info Window para mostrar informação relativa a cada marcador.<br />
Todas as dúvidas ou comentários são bem-vindos. Por favor, utilizar a secção de comentários para que todos partilhem da informação.<br />
<br /><br />
<div class="ads_content">
<span class="ads_content_center">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 336x280_marnoto_right_24092014 -->
<ins class="adsbygoogle"
style="display:inline-block;width:336px;height:280px"
data-ad-client="ca-pub-0362839059472765"
data-ad-slot="9524278346"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</span>
</div>
<div class="download-files">
<div class="download-files-title">
Download dos ficheiros necessários para este exemplo</div>
<ul>
<li><a class="btndown" href="http://maps.marnoto.com/downloads/multiplos_marcadores.zip">multiplos_marcadores.zip</a></li>
</ul>
</div>Miguel Marnotohttp://www.blogger.com/profile/08168845698852902239noreply@blogger.com58tag:blogger.com,1999:blog-1566703829628107053.post-65565463053848009562013-09-26T11:01:00.002+01:002018-04-04T03:31:16.523+01:00Info Window no Google Maps API JavaScript v3<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEgkcW8GI1d4C87xNbg5JrUHscM6ip5cNEqEwScJWRGAGEaQFb39275TQL-zwb93R4HgiGT2roms3fy3YnIaZwX7Eqio6OB8C_Wc65kftK0sWUgrEmE4jm2rEthrIjE6Os2xb0Flyu7dI/s1600/infowindowmuseu2.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" itemprop="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEgkcW8GI1d4C87xNbg5JrUHscM6ip5cNEqEwScJWRGAGEaQFb39275TQL-zwb93R4HgiGT2roms3fy3YnIaZwX7Eqio6OB8C_Wc65kftK0sWUgrEmE4jm2rEthrIjE6Os2xb0Flyu7dI/s1600/infowindowmuseu2.jpg" /></a></div>
<p><span itemprop='description'>A Info Window do Google Maps não é mais do que um <div> em forma de balão de banda desenhada, com uma posição no mapa definida através das <a href='https://www.marnoto.com/2013/09/adicionar-um-marcador-com-google-maps.html' target='_blank'>coordenadas do marcador</a>.</span><a name='more'></a></p>
<p>Assim, a <a href='https://www.marnoto.com/2014/09/5-formas-de-personalizar-infowindow.html' target='_blank'>infowindow pode ser personalizada com CSS</a> e pode conter quaisquer outros elementos HTML no seu interior.<br />
O conteúdo da Info Window pode ser definido na <a href='https://www.marnoto.com/2013/09/como-criar-um-mapa-com-google-maps-api.html' target='_blank'>inicialização do mapa</a>, no caso de o mapa conter somente um marcador, ou a posteriori através de uma chamada à API com a função <i>setContent()</i>.</p>
<p>No caso de haver <a href='https://www.marnoto.com/2013/12/mapa-com-varios-marcadores-google-maps.html' target='_blank'>mais do que um marcador no mapa</a>, o conteúdo da Info Window é definido aquando da criação do marcador, sendo utilizada a mesma Info Window para todos os marcadores.</p>
<span class="artigos-rel-title">Artigos relacionados:</span><br />
<ul class="artigos-rel">
<li><a href="https://www.marnoto.com/2014/09/5-formas-de-personalizar-infowindow.html" target="_blank">5 formas de personalizar a InfoWindow Google Maps</a></li>
</ul>
<div class="btn-demo-down">
<p>Antes de iniciar o tutorial vê uma demonstração do mapa ou faz o download do código necessário para seguir este exemplo.</p>
<a class="btn-down btndemo" href="http://maps.marnoto.com/crianovainfowindow/exemplo.html" target="_blank" title="Exemplo de uma simples Info Window"><i class="fa fa-eye"></i> DEMO</a>
<a class="btn-down btndown" style="margin-left: 15px;" href="http://maps.marnoto.com/downloads/Criar_nova_info_window.zip" title="Criar_nova_info_window.zip"><i class="fa fa-download"></i> DOWNLOAD</a>
</div>
<h3>
Criar a Info Window</h3>
<p>A crição de uma Info Window para um único marcador é bastante simples e obedece aos seguintes requisitos:</p>
<ul>
<li><b>Conteúdo</b> que pode ser simples texto ou HTML<br />
<div class="mm-pre"><span class="left-pre">JavaScript /map.js</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-js">var conteudo = '<div id="iw_container">' +
'<div class="iw_title">Museu Marítimo de Ílhavo</div>' +
'<div class="iw_content">Visite o aquário de bacalhaus no Museu Marítimo de Ílhavo.</div>' +
'</div>';</pre>
</li>
<li><b>Criar a nova Info Window</b> com o construtor da API <i><b>new google.maps.InfoWindow()</b></i>, e ao mesmo tempo indicar que a Info Window deve buscar o seu conteúdo na variável <i><b>conteudo</b></i> anteriormente definida<br />
<div class="mm-pre"><span class="left-pre">JavaScript /map.js</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-js">var infowindow = new google.maps.InfoWindow({
content: conteudo
});
</pre>
</li>
<li><b>Abrir a Info Window</b> através de uma função da API que detecta um click no respectivo marcador e abre a InfoWindow.<br />A função <b><i>google.maps.event.addListener(<marcador>, <evento>, <acção>)</i></b> está constantemente à espera de um click (neste caso o <evento> é um click) no marcador (<marcador> neste exemplo só existe um marcador definido no mapa), para executar uma <acção> que neste caso é uma função que faz uma chamada à API <b><i>(infowindow.open(<mapa>,<marcador>)</i></b> e pede que a Info Window - definida na variável infowindow - seja aberta ( <i>.open() )</i> no mapa definido em <i>map</i> e cujas coordenadas devem ser as mesmas do marcador definido em <i>marker</i>.<br />Pode parecer complicado mas o exemplo seguinte mostra como é bastante simples abrir uma Info Window no respectivo marcador.<br />
<div class="mm-pre"><span class="left-pre">JavaScript /map.js</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-js">google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
</pre>
</li>
</ul>
<p>A API insere um link ( x ) no topo direito para que o utilizador possa fechar a Info Window. Adicionalmente podemos inserir um novo evento - <i><b>infowindow.close()</b></i> - que fecha a Info Window com um click no mapa.<br />
Como o exemplo seguinte mostra, desta vez a API é instruída para aguardar um click no mapa e quando isso acontecer fecha a Info Window.</p>
<div class="mm-pre"><span class="left-pre">JavaScript /map.js</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-js"> // evento que fecha a infoWindow com click no mapa
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});</pre>
<br />
Agora tudo junto...
<br />
<div class="mm-pre"><span class="left-pre">JavaScript /map.js</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-js">var ilhavo = new google.maps.LatLng(40.604036,-8.665247);
var museu = new google.maps.LatLng(40.604382,-8.665983);
function initialize() {
var mapOptions = {
center: ilhavo,
zoom: 18,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
// variável que define o conteúdo da Info Window
var conteudo = '<div id="iw_container">' +
'<div class="iw_title">Museu Marítimo de Ílhavo</div>' +
'<div class="iw_content">Visite o aquário de bacalhaus no Museu Marítimo de Ílhavo.</div>' +
'</div>';
// cria a nova Info Window com referência à variável infowindow e atribui o conteúdo
var infowindow = new google.maps.InfoWindow({
content: conteudo
});
// variável que define as opções do marcador
var marker = new google.maps.Marker({
position: museu, // variável com as coordenadas Lat e Lng
map: map,
title:"Museu Marítimo de Ílhavo"
});
// procedimento que mostra a Info Window através de um click no marcador
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker); //map e marker são as variáveis definidas anteriormente
});
// evento que fecha a infoWindow com click no mapa
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</pre>
<span class="linkExemplos btndemo"><a class="btndemo" href="http://maps.marnoto.com/crianovainfowindow/exemplo.html" target="_blank">Ver exemplo do mapa.</a></span>
<p>Este exemplo mostra como adicionar uma simples Info Window com conteúdo em HTML. A Info Window também pode receber links, imagens e formulários.</p>
<p>Todas as dúvidas ou comentários são bem-vindos. Por favor, utilizar a secção de comentários para que todos partilhem da informação.</p>
<blockquote>
<div class="blockQuoteTitle">
CURIOSIDADE</div>
O Museu Marítimo de Ílhavo inaugurou em 2013 o primeiro Aquário de Bacalhaus do país. <a href="http://www.museumaritimo.cm-ilhavo.pt/" target="_blank">Museu Marítimo de Ílhavo</a></blockquote>
<br /><br />
<div class="ads_content">
<span class="ads_content_center">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 336x280_marnoto_right_24092014 -->
<ins class="adsbygoogle"
style="display:inline-block;width:336px;height:280px"
data-ad-client="ca-pub-0362839059472765"
data-ad-slot="9524278346"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</span>
</div>
<div class="download-files">
<div class="download-files-title">
Download dos ficheiros necessários para este exemplo</div>
<ul>
<li><a class="btndown" href="http://maps.marnoto.com/downloads/Criar_nova_info_window.zip">Criar_nova_info_window.zip</a></li>
</ul>
</div>Miguel Marnotohttp://www.blogger.com/profile/08168845698852902239noreply@blogger.com18tag:blogger.com,1999:blog-1566703829628107053.post-61136764881755735482013-09-24T10:12:00.001+01:002018-04-04T03:31:46.135+01:00Adicionar um marcador com Google Maps JavaScript API v3<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgBvMqfS4OzDklyNm3NPfd4E-iqpmuZOWHfyZA_4zNu3d4UlB9VAA7dS68TvH9muSL677P3KpRjJYlYBE52jXepXIIxY0pVl9PjjW-wpoiyPFMFmeS2NS6Woe02c2XLs3JLs1C-jWa3gE/s1600/markerfarol.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img itemprop="image" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgBvMqfS4OzDklyNm3NPfd4E-iqpmuZOWHfyZA_4zNu3d4UlB9VAA7dS68TvH9muSL677P3KpRjJYlYBE52jXepXIIxY0pVl9PjjW-wpoiyPFMFmeS2NS6Woe02c2XLs3JLs1C-jWa3gE/s1600/markerfarol.jpg" /></a></div>
<p>Os marcadores são simples ícones que indicam a posição de um determinado local num mapa.<br />
Já vimos anteriormente como <a href="https://www.marnoto.com/2013/09/como-criar-um-mapa-com-google-maps-api.html">adicionar um mapa</a> a uma página de um web site.<a name='more'></a> <span itemprop="description">Neste tutorial vou explicar como adicionar um marcador e como utilizar um ícone personalizado substituindo o marcador característico do Google Maps.</span></p>
<p>Poderás estar interessado em <a href="https://www.marnoto.com/2015/02/rapido-e-simples-partilhar-um-mapa.html">Rápido e simples partilhar um local com o Google Maps</a></p>
<div class="btn-demo-down">
<p>Antes de iniciar o tutorial vê uma demonstração do mapa ou faz o download do código necessário para seguir este exemplo.</p>
<a class="btn-down btndemo" href="http://maps.marnoto.com/adicionarmarcador/exemplo.html" target="_blank" title="Exemplo de marcador simples com Google Maps API"><i class="fa fa-eye"></i> DEMO</a>
<a class="btn-down btndown" style="margin-left: 15px;" href="http://maps.marnoto.com/downloads/Adicionar_marcador_simples.zip" title="Adicionar_marcador_simples.zip"><i class="fa fa-download"></i> DOWNLOAD</a>
</div>
<p>Para adicionar um marcador no mapa temos de fazer uso do construtor <i><b>google.maps.Marker</b></i> e definir as opções específicas do marcador.</p>
<div class="mm-pre"><span class="left-pre">JavaScript /map.js</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-js"> // variável que indica as coordenadas do centro do mapa
var praiaBarra = new google.maps.LatLng(40.640416,-8.749541);
// variável que indica as coordenadas do marcador
var farolAveiro = new google.maps.LatLng(40.642851,-8.747596);
function initialize() {
var mapOptions = {
center: praiaBarra, // variável com as coordenadas Lat e Lng
zoom: 15,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
// variável que define as opções do marcador
var marker = new google.maps.Marker({
position: farolAveiro, // variável com as coordenadas Lat e Lng
map: map,
title:"Farol de Aveiro"
});
}
google.maps.event.addDomListener(window, 'load', initialize);</pre>
<p>Adicionar um simples marcador no mapa requer a adição de uma nova variável à função <i><b>initialize()</b></i> que vamos designar de <i><b>marker</b></i>. A variável <i><b>marker</b></i> faz uma chamada ao construtor <i><b>google.maps.Marker</b></i> e passa os parâmetros <i>position</i>, <i>map</i> e <i>title</i>.</p>
<ul>
<li><b>position</b> - valores de latitude e longitude do marcador. Fora da função <i>initialize()</i> é criada a variável <b><i>farolAveiro</i></b> que define as coordenadas de Latitude e Longitude para o marcador a inserir no mapa. Os valores das coordenadas LatLng enviados para a API têm sempre de ser passados através do construtor <b><i>google.maps.LatLng()</i></b>.</li>
<li><b>map</b> - neste caso o marcador é adicionado ao único mapa existente definido pela variável <i>map</i>.</li>
<li><b>title</b> - O título do marcador é visível quando o cursor do rato é colocado sobre o marcador.</li>
</ul>
<h3>
Alterar a imagem do marcador do Google Maps</h3>
<p>O exemplo anterior adiciona um marcador no mapa com a imagem característica do Google Maps. Mas existe uma opção que permite a utilização de imagens personalizadas nos marcadores.<br />
A opção <b><i>icon</i></b> permite definir um URL para a imagem pretendida.</p>
<div class="mm-pre"><span class="left-pre">JavaScript /map.js</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-js"> ...
// variável que define o URL para a nova imagem do marcador
var minhaImagem = 'images/farol.png';
// variável que define as opções do marcador
var marker = new google.maps.Marker({
position: farolAveiro,
map: map,
title:"Farol de Aveiro",
icon: minhaImagem // define a nova imagem do marcador
});
}
google.maps.event.addDomListener(window, 'load', initialize);</pre>
<p>A API redimensiona automaticamente a imagem a utilizar como marcador. No entanto é aconselhável a utilização de imagens com uma largura de 20px e altura de 32px. Para utilizar o icon normal do Google Maps basta remover a opção <i>icon: minhaImagem</i>.</p>
<p><span class="linkExemplos"><a class="btndemo" href="http://maps.marnoto.com/adicionarmarcador/exemplo.html" target="_blank">Ver exemplo do mapa.</a></span></p>
<p>Ícones gratuitos para utilizar no Google Maps em <a href="http://mapicons.nicolasmollet.com/">http://mapicons.nicolasmollet.com</a></p>
<blockquote>
<div class="blockQuoteTitle">
CURIOSIDADE</div>
O Farol de Aveiro fica situado na praia da Barra, concelho de Ílhavo, com 62m de altura, é o farol mais alto de Portugal e o segundo maior da Península Ibérica.</blockquote>
<br /><br />
<div class="ads_content">
<span class="ads_content_center">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 336x280_marnoto_right_24092014 -->
<ins class="adsbygoogle"
style="display:inline-block;width:336px;height:280px"
data-ad-client="ca-pub-0362839059472765"
data-ad-slot="9524278346"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</span>
</div>
<div class="download-files">
<div class="download-files-title">
Download dos ficheiros necessários para este exemplo</div>
<ul>
<li><a class="btndown" href="http://maps.marnoto.com/downloads/Adicionar_marcador_simples.zip">Adicionar_marcador_simples.zip</a></li>
</ul>
</div>
<p>Todas as dúvidas ou comentários são bem-vindos. Por favor, utilizar a secção de comentários para que todos partilhem da informação.</p>Miguel Marnotohttp://www.blogger.com/profile/08168845698852902239noreply@blogger.com1tag:blogger.com,1999:blog-1566703829628107053.post-29488234714726148262013-09-23T14:51:00.000+01:002018-04-04T03:32:28.761+01:00Como criar um mapa com Google Maps API v3<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyLLNY_C7I55dbqf4nfh_u3-UGgoto3bXAnIUZW5i2mkAy0LKLK_VfkW4mnxXAl9pX0OlVwJImlMTNyrq259V02m5D9G9OWhf6ALmHb70aP-j-2Gkti6YV19LCDFAW_nkCCn8JkArFGzI/s1600/logogmaps.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img itemprop="image" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyLLNY_C7I55dbqf4nfh_u3-UGgoto3bXAnIUZW5i2mkAy0LKLK_VfkW4mnxXAl9pX0OlVwJImlMTNyrq259V02m5D9G9OWhf6ALmHb70aP-j-2Gkti6YV19LCDFAW_nkCCn8JkArFGzI/s1600/logogmaps.jpg" /></a></div>
<p><span itemprop="description">O Google Maps JavaScript API v3 permite inserir um mapa personalizado em qualquer web site, de forma fácil e rápida.</span> Mesmo para quem tem poucas noções de JavaScript, mas quer aventurar-se nas linguagens de programação, esta API da Google é bastante fácil de aprender e intuitiva.<a name='more'></a></p>
<p>Iniciamos este tutorial com uma breve noção básica do necessário para inserir um mapa num web site:</p>
<ol>
<li>URL para a API do Google Maps a inserir na secção <head> da página.
</li>
<li>Espaço reservado na página do web site para o mapa.
</li>
<li>Declarações CSS para definir o tamanho do espaço reservado para o mapa.
</li>
<li>Ficheiro JavaScript para definir as opções do mapa.</li>
</ol>
<div class="btn-demo-down">
<p>Antes de iniciar o tutorial vê uma demonstração do mapa ou faz o download do código necessário para seguir este exemplo.</p>
<a class="btn-down btndemo" href="http://maps.marnoto.com/criarmapasimples/exemplo.html" target="_blank" title="Exemplo de mapa simples com Google Maps API"><i class="fa fa-eye"></i> DEMO</a>
<a class="btn-down btndown" style="margin-left: 15px;" href="http://maps.marnoto.com/downloads/Como_criar_mapa_GoogleMapsAPI.zip" title="Como_criar_mapa_GoogleMapsAPI.zip"><i class="fa fa-download"></i> DOWNLOAD</a>
</div>
<h3>
Link para a API do Google Maps</h3>
<p>O link para a API do Google Maps faz a chamada para o ficheiro JavaScript que irá carregar todos os componentes do mapa e deve ser inserido na secção <head> da página. Neste caso é enviado um parâmetro - <b>&sensor=false</b> - indicando que este mapa não vai fazer uso de sensores de localização. Este parâmetro é obrigatório e aceita os valores <i>false</i> ou <i>true</i>.</p>
<div class="mm-pre"><span class="left-pre">HTML /index.html</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-html"><!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<body>
...</pre>
<h3>
Espaço para o mapa</h3>
<p>O mapa pode ser inserido em qualquer secção da página, basta para isso reservar um espaço específico no ficheiro HTML. Por norma utiliza-se o elemento <i><div></i> com um <i>id="map-canvas"</i>.</p>
<div class="mm-pre"><span class="left-pre">HTML /index.html</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-html"><body>
<div id="map-canvas"></div>
...</pre>
<h3>
O tamanho do mapa</h3>
<p>O tamanho do mapa é definido pelas declarações do ficheiro .css e a única declaração obrigatória é a altura. Se não for definida uma altura específica o <div id="map-canvas"> não expande e o mapa não será visualizado.</p>
<div class="mm-pre"><span class="left-pre">CSS /style.css</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-css">#map-canvas {
width: 400px;
height: 400px;
}</pre>
<p>O exemplo anterior define uma largura de 400px, mas este valor é opcional. As medidas podem também ser definidas em percentagens.<br />
O código seguinte apresenta um mapa que ocupa a totalidade da página.</p>
<div class="mm-pre"><span class="left-pre">CSS /style.css</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-css">html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas {
height: 100%;
}</pre>
<h3>
Personalizar o mapa</h3>
<p>As definições personalizadas do nosso mapa são declaradas num ficheiro JavaScript da seguinte forma.</p>
<div class="mm-pre"><span class="left-pre">JavaScript /map.js</span><span class="right-pre">marnoto.com</span><div style="clear: both"></div></div>
<pre class="prettyprint lang-js">function initialize() {
var mapOptions = {
center: new google.maps.LatLng(40.680898,-8.684059),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);</pre>
<p>A função <i><b>initialize()</b></i> contém duas variáveis <i><b>mapOptions</b></i> e <i><b>map</b></i>. A primeira define algumas características do mapa na sua fase de inicialização. A segunda variável indica à API onde deve inserir o mapa e faz referência à variável que contém as opções de inicialização.</p>
<p>As opções definidas neste exemplo são as seguintes:</p>
<ul>
<li><b>center: new google.maps.LatLng(<span style="color: orange;">40.680898,-8.684059</span>)</b>
<br />dentro dos parêntesis são definidas as coordenadas de Latitude e Longitude para indicar o centro do mapa.</li>
<li><b>zoom: 11</b><br />indica o valor para ampliação do mapa, varia entre 0 e 21. Quanto maior for este valor mais pormenorizado é o mapa. A área de cobertura do mapa é definida pelo tamanho do espaço reservado para o mapa e pelo valor do <i>zoom</i>. Quanto maior for o valor do <i>zoom</i>, menor a área de cobertura do mapa.</li>
<li><b>mapTypeId: google.maps.MapTypeId.ROADMAP</b><br />o <i>mapTypeID</i> define qual o tipo de mapa apresentado na inicialização. Este parâmetro não restringe o tipo de mapa, o utilizador pode alterar o tipo de mapa que pretende utilizar.<br />Tipos de mapa disponíveis:</li>
<ul>
<li>ROADMAP (mapa normal em 2D)</li>
<li>SATELLITE (imagens fotografia aérea)</li>
<li>HYBRID (fotografia aérea com sobreposição de ruas e outras informações)</li>
<li>TERRAIN (mapa em modo 3D com elevações do terreno)</li>
</ul>
</ul>
<br />
<p>A variável <i><b>var map =</b></i> faz uma chamada para a API e passa dois parâmetros</p>
<ul>
<li><b><i>document.getElementById("map-canvas")</i></b> indica qual o espaço onde deve ser inserido o mapa</li>
<li><b><i>mapOptions</i></b> passa os valores definidos nas opções</li>
</ul>
<p>Por fim é iniciada a função <i><b>initialize()</b></i> através de uma função própria da API, o <i><b>addDomListener</b></i>. Desta forma quando ocorrer o evento <i><b>"load"</b></i> do elemento <i><b>window</b></i> é inicializada a função <i style="font-weight: bold;">initialize </i>e o mapa definido surge na página.</p>
<p><span class="linkExemplos"><a class="btndemo" href="http://maps.marnoto.com/criarmapasimples/exemplo.html" target="_blank">Ver exemplo do mapa.</a></span></p>
<h3>
Coordenadas do Google Maps</h3>
<p>As coordenadas definidas em <i><b>google.maps.LatLng() </b></i>estão no formato de <a href='https://www.marnoto.com/2014/04/converter-coordenadas-gps.html' target='_blank'>coordenadas graus decimais</a> e podem ser <a href='https://www.marnoto.com/2013/12/obter-coordenadas-no-novo-google-maps.html' target='_blank'>encontradas da seguinte forma</a>:</p>
<ol>
<li>Abrir a página <a href="https://maps.google.com/">https://maps.google.com</a></li>
<li>Procurar o local desejado</li>
<li>Fazer click com o botão do lado direito no local desejado e escolher a opção "O que é isto?"</li>
<li>Na caixa de pesquisa (topo) aparecem as coordenadas do local. São estes os valores que devem ser utilizados</li>
</ol>
<br /><br />
<div class="ads_content">
<span class="ads_content_center">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 336x280_marnoto_right_24092014 -->
<ins class="adsbygoogle"
style="display:inline-block;width:336px;height:280px"
data-ad-client="ca-pub-0362839059472765"
data-ad-slot="9524278346"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</span>
</div>
<div class="download-files">
<div class="download-files-title">
Download dos ficheiros necessários para este exemplo</div>
<ul>
<li><a class="btndown" href="http://maps.marnoto.com/downloads/Como_criar_mapa_GoogleMapsAPI.zip">Como_criar_mapa_GoogleMapsAPI.zip</a></li>
</ul>
</div>
<br />
<p>Todas as dúvidas ou comentários são bem-vindos. Por favor, utilizar a secção de comentários para que todos partilhem da informação.</p>Miguel Marnotohttp://www.blogger.com/profile/08168845698852902239noreply@blogger.com1