Neste exemplo vamos mostrar o mínimo de HTML necessário para mostrar um mapa customizado no Google Maps.
Cabeçalho do HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100%; z-index: 0;}
#gmnoprint {width: auto;}
</style>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Map do Brasil</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
Parte de script deste HTML
Toda esta sequência de código deve ser envolta pela tag SCRIPT, não se esqueça:
<script>
.
.
.
</script>
Classe CustomMapType
// Definição da classe CustomMapType
function CustomMapType() {}
// Tamanho do quadrante
CustomMapType.prototype.tileSize = new google.maps.Size(256,256);
// Zoom Máximo
CustomMapType.prototype.maxZoom = 7;
// Cria uma DIV cuja imagem de fundo é uma das "Tiles"
CustomMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
var div = ownerDocument.createElement('DIV');
var baseURL = 'Tiles/';
baseURL += zoom + '_' + coord.x + '_' + coord.y + '.png';
div.style.width = this.tileSize.width + 'px';
div.style.height = this.tileSize.height + 'px';
div.style.backgroundColor = '#1B2D33';
div.style.backgroundImage = 'url(' + baseURL + ')';
return div;
};
CustomMapType.prototype.name = "Custom";
CustomMapType.prototype.alt = "Mapa do tipo composição de quadrantes";
Inicialização do Mapa
// Define a variável que representa a imagem lógica do mapa
var map;
var CustomMapType = new CustomMapType();
// Inicia o ambiente do mapa (Rotina automaticamente chamada pela API do GoogleMaps
function initialize() {
var mapOptions = {
minZoom: 2,
maxZoom: 7,
isPng: true,
mapTypeControl: false,
streetViewControl: false,
center: new google.maps.LatLng(75.07,-76.08),
zoom: 3,
mapTypeControlOptions: {
mapTypeIds: ['custom', google.maps.MapTypeId.ROADMAP],
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
// Instancia a classe google.maps
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
map.mapTypes.set('custom',CustomMapType);
map.setMapTypeId('custom');
/*
Marca (Marker)
*/
var image = 'mark.gif';
var myLatLng = new google.maps.LatLng(80, -88);
// Use a propriedade: icon: image, para colocar seu ícone personalizado
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
type: 'point'
});
}
quarta-feira, 20 de março de 2013
terça-feira, 19 de março de 2013
Curso de GoogleMaps - I - Corte do Mapa
A API do Google Maps permite ao usuário colocar funcionalidades de mapa (marcas, zoom) em seus próprios mapas ou figuras prontas.
O diagrama a seguir mostra os cortes e as proporções, além dos nomes dos quadrantes (acrescentar a extensão "jpg"):
Procedimento
Comece com a figura em 1024 x 1024 e salve como 3.jpg. Faça o redimensionamento desta figura para 512 x 512 e salve como 2.jpg. Depois redimensione para 256 x 256 e salve como 1.jpg.
A figura 1.jpg corresponde à Escala 1.
A figura 2.jpg corresponde à Escala 2, e deve ser cortada em quatro pedaços iguais de 256 x 256.
A figura 3.jpg corresponde à escala 3, e deve ser cortada em 16 pedaços iguais de 256 x 256.
Para fazer estes cortes, utilize o Photoshop ou Irfanview, ou outro software que permita visualizar as coordenadas para os cortes.
NOTA: A ordem de proporção das figuras deve ser esta, ou seja, na proporção de 1, 4, 16, 64, porque senão os marcadores não vão evoluir, em escala, nas posições corretas.
Exemplo:
Pedaços do mapa no diretório:
Iniciaremos com a forma de cortar um Mapa/Figura. Recomendamos começar com uma figura com os detalhes necessários em resolução correspondente a um quadrado de 1024 px x 1024 px. Cada quadrante do mapa, em qualquer escala deverá ter 256 px. Usaremos as escalas 1, 2 e 3, pois daí em diante o trabalho é muito grande e não compensador.
O diagrama a seguir mostra os cortes e as proporções, além dos nomes dos quadrantes (acrescentar a extensão "jpg"):
Procedimento
Comece com a figura em 1024 x 1024 e salve como 3.jpg. Faça o redimensionamento desta figura para 512 x 512 e salve como 2.jpg. Depois redimensione para 256 x 256 e salve como 1.jpg.
A figura 1.jpg corresponde à Escala 1.
A figura 2.jpg corresponde à Escala 2, e deve ser cortada em quatro pedaços iguais de 256 x 256.
A figura 3.jpg corresponde à escala 3, e deve ser cortada em 16 pedaços iguais de 256 x 256.
Para fazer estes cortes, utilize o Photoshop ou Irfanview, ou outro software que permita visualizar as coordenadas para os cortes.
NOTA: A ordem de proporção das figuras deve ser esta, ou seja, na proporção de 1, 4, 16, 64, porque senão os marcadores não vão evoluir, em escala, nas posições corretas.
Exemplo:
 |
| Fonte: http://upload.wikimedia.org/wikipedia/commons/9/95/Brasil_NovosEstados.png |
terça-feira, 29 de maio de 2012
A espetacular conquista da Lua
Vejam só este site comemorativo da subida da Apolo 11. Comentários são dispensáveis, devido à qualidade da produção:
http://wechoosethemoon.org/
http://wechoosethemoon.org/
sexta-feira, 16 de dezembro de 2011
O programa irfanview
O programa Irfanview é uma ferramenta simples e objetiva para retoque de fotos, ajuste de tamanho e alterações para marcação das fotos e figuras antes de serem inseridas em textos ou apresentações.
O site para baixar o Irfanview é:
www.irfanview.com
O programa é bem pequeno e muito bom. Acompanhamos a evolução do mesmo desde 1998 e ele só vem melhorando. Nestes 14 anos já modificamos mais de 49000 fotos e figuras para textos, apresentações, sites e outros.
Baixe e experimente. Pegue também os plugins para aumentar o leque de formatos que poderão ser abertos.
O site para baixar o Irfanview é:
www.irfanview.com
O programa é bem pequeno e muito bom. Acompanhamos a evolução do mesmo desde 1998 e ele só vem melhorando. Nestes 14 anos já modificamos mais de 49000 fotos e figuras para textos, apresentações, sites e outros.
Baixe e experimente. Pegue também os plugins para aumentar o leque de formatos que poderão ser abertos.
segunda-feira, 12 de dezembro de 2011
Assinar:
Postagens (Atom)