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

marcar puntos en google maps api

Question

En el mapa de google, por lo general, el centro de la imagen del marcador es el latitud de un punto que debe marcar.

Imagina que mi ícono marcador es un círculo, me gustaría que el centro esté en la latitud 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

Con v3 de Google Maps, podrías / deberías 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

Answer 2

De los documentos:

Conversión de objetos MarkerImage a tipo 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));

se 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

Lo que necesita 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));

Donde el primer parámetro es una url de la imagen, el segundo es el tamaño de la imagen, el tercero es el punto de origen de la imagen, 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 crea tu marcador pasando markerImage a la propiedad icon:

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