Change pin position of Google Maps

Question

Change pin position of Google Maps

Navigation

#1 by (2 votes)

3

I need to change the pin position of a map embedded in a page.

Next, by default it leaves the pin in the center, I want to choose a position within my main div.

I was looking at Google documentation about styling Google Maps embedded. However, it does not say where to position the pin, only when there is more than one and even then it tries to center the two.

What happens is that I have a div over the map, and I wanted to put the pin higher.

Iwantthepintostickup,sameimagebelow.Fromwhatyouhavepassedmehechangestheplacepin,butthentheaddressisnotcorrect.

google-maps

asked by anonymous 29.04.2014 / 16:56

1 answer

Component placement using GridBagLayout How to assign the value of a variable that is in a JavaScript function to an SQL query.

score 2 · Answer 1

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);

Now just have a div with id="map-canvas"