Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Thiago Duarte

Personalizar Mapa Do Google

Recommended Posts

Oi, to com uma duvida, gostaria de personalizar o google maps

 

- trocando a setinha que fica apontando a localização

- dar zoom no mapa (Obs: que se passar o mouse em cima não fica dando zoom.)

- deixar preto e branco

 

Igual esse exemplo: http://livedemo00.template-help.com/landing_53788/index.html

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Você tem que utilizar a API do google maps para essas alterações.

Dá uma pesquisada sobre ela e como implementar no seu site.

 

Dai você terá que utilizar código javascript para setar as configurações desejas, algo como:

 

<script>
function googlemaps() {
   var mapOptions = {
       center: new google.maps.LatLng(COORDENADAS),
       zoom: 15,
       zoomControl: true,
       zoomControlOptions: {
           style: google.maps.ZoomControlStyle.DEFAULT,
       },
       disableDoubleClickZoom: true,
       mapTypeControl: true,
       mapTypeControlOptions: {
           style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
       },
       scaleControl: true,
       scrollwheel: false,
       streetViewControl: true,
       draggable : true,
       overviewMapControl: true,
       overviewMapControlOptions: {
           opened: true,
       },
   };
       var mapElement = document.getElementById("ID DA DIV DO MAPA");
       var map = new google.maps.Map(mapElement, mapOptions);
       var image = 'CAMINHO DA IMAGEM DO PIN';
var myLatLng = new google.maps.LatLng(COORDENADAS AQUI);
var beachMarker = new google.maps.Marker({
     position: myLatLng,
     map: map,
     icon: image
});
    }
    google.maps.event.addDomListener(window, 'load', googlemaps);
</script>

Compartilhar este post


Link para o post
Compartilhar em outros sites

o que eu uso é esse aqui

 

var map;
$(document).ready(function(){


    map = new GMaps({
        div: '#map',
        lat: -22.9106853,
        lng: -43.1764704,
    });
    map.addMarker({
        lat: -22.9106853,
        lng: -43.1764704,
        title: 'Address',      
        infoWindow: {
            content: '<h5 class="title">Company name</h5><p><span class="region">Address line goes here</span><br><span class="postal-code">Postcode</span><br><span class="country-name">Country</span></p>'
        }
        
    });


});

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.