Criei uma pequena solução muito básica para aplicar o Google Maps com um Marker customizado no seu website, siga o meu código ou faça o download da solução completa.
HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>Google Maps API - First Map</title> <link rel="stylesheet" href="style.css"> <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script> <script src="http://maps.google.com/maps/api/js?sensor=false&language=pt"></script> <script src="scripts/map.js"></script> </head> <body> <div id="mapcont"></div> </body> </html>
Ficheiro CSS
Crie um novo ficheiro CSS (neste caso “style.css”) ou adicione os styles do mapa a um css já existente no seu projeto.
Basicamente deverá definir a largura (width) e a altura (height) do ID do div correspondente ao mapa (neste caso “#mapcont”).
/* Altura e largura do mapa */
#mapcont {width:600px; height:350px;}
Ficheiro Javascript
Copie o seguinte javascript e configure tendo em conta os comentários presentes no mesmo.
var map = {
theMap: 0,
pin: 'images/pin.png',
//Zoom inicial do mapa
zoom: 17,
//Latitude e Longitude do pin
latpos: new google.maps.LatLng(38.693683, -9.311943),
marker: 0,
init: function() {
//Aqui são definidas as opções do mapa (zoom, centro do mapa, tipo de mapa...)
var mapOps = {
zoom: map.zoom,
center: map.latpos,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
//O mapa é atribuído ao div com o id 'mapcont'
map.theMap = new google.maps.Map(document.getElementById("mapcont"), mapOps);
//O Pin é adicionado no mapa
map.marker = new google.maps.Marker({
position: map.latpos,
map: map.theMap,
icon: map.pin
});
}
}
$(function () {
map.init();
});
Faça o download com a solução completa
Irão sair novas versões com mais funcionalidades! Fique atento aos próximos artigos sobre Google Maps
Não está a conseguir colocar esta funcionalidade no seu website ou pretende algo mais complexo? Entre em contacto comigo.
