Change pin position of Google Maps

Asked

Viewed 1,496 times

3

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

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

I was looking the Google documentation on the stylization of Google Maps incorporated. However, it does not say where to place the pin, only when there is more than one and even so it tries to center the two.

The thing is, I got a div on top of the map, and I wanted to put the pin higher up. inserir a descrição da imagem aqui

I want the pin to be higher up, same image below. For what you have passed me it changes the pin place, but then the address is not correct. inserir a descrição da imagem aqui

google-maps
  • 2

    You have the parameter in the URL that is the "center", have you tried using it? You choose where the map will be centered, you can change that until the pin gets where you want it. This parameter will not change the position of the pin but the center of the map.

  • Hello @Filipe edited the question, the center works for what I need too?

  • 1

    Yes, it does! You will have to inform the coordinates so that the center of the map is a little lower than your pin.

  • Hi @Filipe, I edited my post again, another question came up.

  • Are you entering the map via iframe? Put the code to make it easier. A solution would be to use the @Ronnyamarante code below.

  • I am adding by the function "initialize", as answered below, even so it changes the pin place, but there is the correct address there.

  • Edit the post and add your initialize() function to see how it looks.

Show 2 more comments

1 answer

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

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

  • I think he’s not using the API but embedding the map via iframe.

  • Parameters and attributes remain the same...

Browser other questions tagged google-maps

You are not signed in. Login or sign up in order to post.