Cómo configuro una imagen personalizada para el cursor del mouse en un mapa de google api v3

Quiero tener un cursor personalizado mientras se desplaza sobre el componente del mapa de google en la página. Me gustaría poder cambiar programáticamente el cursor a la imagen personalizada, luego volver a cambiarlo al cursor predeterminado.Cómo configuro una imagen personalizada para el cursor del mouse en un mapa de google api v3

Creo que esta es la forma de configurar el cursor por defecto en su 'mapa' objeto

map.setOptions({ draggableCursor: 'default' });

Después de algunas investigaciones y experimentación, he encontrado la mejor manera de hacer esto es el siguiente:

map.setOptions({ draggableCursor: 'url(path/to/your/image.png), crosshair' });

en css, solo webkit admite un valor de URL para el atributo de cursor, por lo que otros navegadores obtienen el valor de 'cruz' en este caso que resolvió mi problema de informar a los usuarios que deben hacer clic en el mapa.

para más información sobre el atributo draggableCursor, por favor ver la documentación versión 3 del API de Google Maps aquí: http://code.google.com/apis/maps/documentation/javascript/reference.html#MapOptions

Esperamos que esto ayude a alguien que está teniendo problemas para configurar un cursor personalizado en un mapa Google.

Fuente

2011-12-28 nomis

En Mac funciona perfectamente en Chrome, Safari y Firefox.

simplemente uso esto:

map.setOptions({ draggableCursor : "url(http://s3.amazonaws.com/besport.com_images/status-pin.png), auto" })

PS: He leído en alguna parte que usted necesita su imagen para estar bajo 64x64 en cierta navegador. Nunca tienes que intentarlo, pero tal vez tu problema provenga de eso.

Fuente

2012-01-12 18:51:51

Sí, esta es la misma solución que publiqué. Mi problema fue volver a configurar el cursor predeterminado después. Después de una investigación adicional, descubrí que para cambiar el cursor al valor predeterminado, debe usar la misma imagen de cursor personalizada que usa google: 'map.setOptions ({draggableCursor: 'url (http://maps.google.com/mapfiles) /openhand.cur), mover '}) ' – nomis

Cuando llamo esto, aparece un error' Error de tipo no capturado: no se puede llamar al método 'setOptions' de null. –

hacia atrás para que el cursor por defecto se puede Assing undefinded a la variable draggableCursor:

map.setOptions({draggableCursor: undefined})

Fuente

2013-07-10 08:01:09 ezain

Para aquellos que están buscando para establecer SVG como su draggableCursor. La solución nosotros a continuación.

map.setOptions({ draggableCursor : "url(PATH_TO_YOUR_SVG.svg), pointer" });

Confíe en mí es posible.

Fuente

2016-02-26 12:31:36

Cómo configuro una imagen personalizada para el cursor del mouse en un mapa de google api v3

Respuesta

Cuestiones relacionadas