Cómo alinear el icono de un marcador en el mapa de Google

Question

En el mapa de Google, generalmente, el centro de la parte inferior de la imagen del marcador es el latitud de un punto que debe marcar.

imaginar mi icono de marcador es un círculo, me gustaría que el centro de la misma para estar en la latitud y la longitud del punto dado ...

Código:

var image_hotspot = 'img/icons/bank_euro.png'; 
var marker = new google.maps.Marker({ 
     map: map, 
     position: placeLoc, 
     icon: image_hotspot 
    }); 

Answer 1

Lo que usted necesidad es crear un objeto MarkerImage, por ejemplo:

var markerImage = new google.maps.MarkerImage('img/icons/bank_euro.png', 
       new google.maps.Size(30, 30), 
       new google.maps.Point(0, 0), 
       new google.maps.Point(15, 15)); 

Dónde primer parámetro es un URL de la imagen, la segunda es tamaño de la imagen, tercero es o un punto de imagen igin, y el cuarto es la posición en la imagen donde el marcador debe apuntar. Si su marcador es un círculo, establezca el cuarto parámetro en el centro de la imagen. Y crear su marcador pasando markerImage al icono de propiedad:

var marker = new google.maps.Marker({ 
    map: map, 
    position: placeLoc, 
    icon: markerImage 
}); 

Answer 2

A partir de los documentos:

convertir objetos MarkerImage al tipo de icono

var image = new google.maps.MarkerImage(
    place.icon, 
    new google.maps.Size(71, 71), 
    new google.maps.Point(0, 0), 
    new google.maps.Point(17, 34), 
    new google.maps.Size(25, 25)); 

convierte

var image = { 
    url: place.icon, 
    size: new google.maps.Size(71, 71), 
    origin: new google.maps.Point(0, 0), 
    anchor: new google.maps.Point(17, 34), 
    scaledSize: new google.maps.Size(25, 25) 
}; 

https://developers.google.com/maps/documentation/javascript/markers

Answer 3

Con v3 de Google Maps que podría/debería usar:

new maps.Marker({ 
      ... 
      icon: { 
       url: '.../myimage.png', 
       scaledSize: new maps.Size(60, 30), 
       anchor: new maps.Point(30, 30), 
      }, 
     }); 

https://developers.google.com/maps/documentation/javascript/reference#Icon