3

Preciso mudar a posição do pino de um mapa incorporado em uma página.

Seguinte, por padrão ele deixa no centro o pino, eu quero escolher uma posição dentro da minha div principal.

Estava olhando a documentação do Google sobre a estilização do Google Maps incorporado. Porém, lá não diz onde posicionar o pino, somente quando há mais de um e mesmo assim ele tenta centralizar os dois.

O que acontece é que tenho uma div em cima do mapa, e queria colocar o pino mais para cima. inserir a descrição da imagem aqui

Eu quero que o pino fique mais para cima, igual imagem abaixo. Pelo que vocês me passaram ele muda o pino de lugar, mas aí o endereço não fica correto. inserir a descrição da imagem aqui

7
  • 2
    Tens o parâmetro na URL que é o "center", já experimentou usa-lo? Você escolhe onde o mapa será centrado, pode alterar isso até o pino ficar onde você quer. Esse parâmetro não vai mudar a posição do pino e sim o centro do mapa. Commented 29/04/2014 às 15:03
  • Olá @Filipe editei a pergunta, o center funciona para o que preciso também? Commented 29/04/2014 às 16:23
  • 1
    Sim, serve! Você terá que informar as coordenadas de modo que o centro do mapa fique um pouco mais a baixo do seu pino. Commented 29/04/2014 às 17:00
  • Oi @Filipe, editei novamente meu post, surgiu mais uma dúvida. Commented 30/04/2014 às 12:43
  • Você está inserindo o mapa via iframe? Posta o código para ficar mais fácil. Uma solução seria utilizar o código do @RonnyAmarante abaixo. Commented 30/04/2014 às 13:42

1 Resposta 1

2
function initialize() {
  var mapOptions = {
    zoom: 16, //você pode controlar o Zoom que o mapa iniciará...
    disableDefaultUI: true, //true = nao mostra os controles padroes(street viewer, botoes: mapa, terreno e satelite) e false para ativar tudo isso.
    zoomControl: true, //true = permite controlar zoom e false o contrario. (sempre deixo ativado para que o cliente se localize melhor...)
    panControl: false, //controle panoramico
    mapTypeControl: false, //escolher tipo de mapa
    scaleControl: false,
    streetViewControl: false, 
    overviewMapControl: false, 
    center: new google.maps.LatLng(35.28497,-86.36890) //coordenada que o mapa ficara centralizado
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); //map-canvas é a div que irá receber o mapa

  var image = './images/marker.png'; //Aqui você passa o caminho para a imagem do marcador.
  var myLatLng = new google.maps.LatLng(35.285100,-86.3681); //Coordenadas onde vai ficar o marcador.
  var beachMarker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: image
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

Agora basta ter uma div com id="map-canvas"

2
  • Penso que ele não está a usar a API e sim incorporando o mapa via iframe. Commented 29/04/2014 às 17:02
  • Os parâmetros e atributos continuam o mesmo... Commented 30/04/2014 às 12:26

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .