Marker off-set en Google Map API v3

Question

He creado un mapa simple con marcadores PNG personalizados. ¿Es posible compensar la imagen PNG adjunta? No parece haber ninguna mención de una "compensación" en la documentación de Google Map API v3.

Answer 1

La opción anclaje en la clase MarkerImage deja a compensar la imagen del marcador de la posición central del medio en el marcador LAT/LNG:

'ancla' anula la posición del punto de ancla de su valor predeterminado posición media inferior

Answer 2

que estaba buscando simplemente esta opción y se encontró una muestra aquí:
http://econym.org.uk/gmap/custom.htm

Ícono de configuraciónAnchor (en los datos del marcador en realidad) funcionó para mí.

var Icon = new GIcon(); 
     Icon.image = "mymarker.png"; 
     Icon.iconSize = new GSize(20, 34); 
     Icon.shadow = "myshadow.png"; 
     Icon.shadowSize = new GSize(36, 34); 
     Icon.iconAnchor = new GPoint(5, 34); 
     Icon.infoWindowAnchor = new GPoint(5, 2); 
     Icon.transparent = "mytran.png"; 

Answer 3

Para v3, esta es la forma en que he logrado es:

var image = new google.maps.MarkerImage("images/car1.png", 
    new google.maps.Size(60, 60), 
    new google.maps.Point(0,0), 
    new google.maps.Point(30, 30) 
); 

//ADD MARKER AT EACH POINT 
var marker = new google.maps.Marker(); 
marker.setPosition(new_point); 
marker.setIcon(image); 
marker.setZIndex(0); 
marker.setMap(map); 

Answer 4

A partir de v3.10, la clase MarkerImage ya no se utiliza, el objeto anónimo Icon se debe utilizar en su lugar. De the documentation

Hasta la versión 3.10 de la API de JavaScript de Google Maps, iconos complejos se definen como objetos MarkerImage. El literal del objeto Icon se agregó en la versión 3.10 y reemplaza a MarkerImage de la versión 3.11 en adelante.

Por ejemplo:

var marker = new google.maps.Marker({ 
    map:map, 
    position: map.getCenter(), 
    icon: { 
    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) 
    } 
}); 

example fiddle

fragmento de código"

function initialize() { 
 
    var mapCanvas = document.getElementById('map'); 
 
    var mapOptions = { 
 
    center: new google.maps.LatLng(44.5403, -78.5463), 
 
    zoom: 8, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    } 
 
    var map = new google.maps.Map(mapCanvas, mapOptions) 
 
    var marker = new google.maps.Marker({ 
 
    map: map, 
 
    position: map.getCenter(), 
 
    icon: { 
 
     url: "http://i.stack.imgur.com/PYAIJ.png", 
 
     size: new google.maps.Size(36, 36), 
 
     origin: new google.maps.Point(0, 0), 
 
     anchor: new google.maps.Point(18, 18), 
 
     scaledSize: new google.maps.Size(25, 25) 
 
    } 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#map { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map"></div>