I want to add a pulse animation like this to my existing markers on a checkbox click, how can I do this?
It's not as easy as you it seems it ought to be. I've just been doing this exact same thing and have had some success.
The most straightforward way is to use an animated gif as your marker.
If you want to do a CSS animation and are a bit more comfortable with JS you can add a wrapper around all your makers using the code below (after adding all your markers. It creates a new overlay to the marker pane and gives that a class of .marker-layer.
One problem with this is that Google Maps tries to render icons using canvas if it can, which means you don't have access to them in this way. You therefore have to pass optimized: false, to the marker options to then get access to the marker.
const markerlayer = new google.maps.OverlayView();
markerlayer.draw = function () {
this.getPanes().markerLayer.classList.add('marker-layer');
};
markerlayer.setMap(map);
Related
I'm trying to find a way to create an undo button for drawing that works similarly to the undo button that is available while editing the polygon.
To be more precise, whenever a user inserts a point on the map which is for example a vertex of a polygon, he should have an option to undo his last (point/vertext) insertion.
Currently it doesn't exist as an existing functionality and I was hoping that it would be easy to implement it in the application I'm developing, but to me it seems there's no way to approach to the objects and layers created on the map before they are complete.
It's either that in v3 API there's almost everything exposured except this, or that I'm looking at the wrong place.
Apart from 'polygoncomplete' there are no other useful drawing events for shapes and it seems that the maintaned state for drawing activities is deeply rooted and scattered as I couldn't just go and replace map object and canvas elements with their previous versions.
Any hopes?
I've created script based on google manual for vertex deleting. The main function is simple, prototype is based on google.maps.OverlayView.
function DeleteMenu() {
this.div_ = document.createElement('div');
this.div_.className = 'delete-menu';
var menu = this;
google.maps.event.addDomListener(this.div_, 'click', function(e) {
menu.removeVertex();
e.stopPropagation();
});
}
DeleteMenu.prototype = new google.maps.OverlayView();
Gist with code is here. Use jsbin sandbox to play with it.
View example page, just click on the map to build your path, you can see undo button.
I am trying to add a bunch of markers to a map with show/hide buttons for each category of markers. Adding a marker from stored db data puts them on the map and makes them clickable, but they won't respond to setMap(null) unless that call is through google.event.addListener(marker, ...). Calling it from a standard js button onclick event, or via google.event.addDomListener(marker, ...) doesn't work.
Also maybe helpful to note is that when I call marker.setAnimation(BOUNCE) the marker starts bouncing but it looks like there is a duplicate marker under it. Similarly, if I drag the marker it's as if an unmovable duplicate is created right under it.
Thoughts? This is super frustrating!
Just like this taken from here ? Are you trying to avoid google maps api's google.maps.event.addDomListener? Why? You can use it to listen to your button's click event too. just as in:
var YourButton = document.getElementById('myButton');
function HideMarkers() {
// Hide us
}
google.maps.event.addDomListener(YourButton, 'click', HideMarkers);
customized for you from. For the second part, seeming like double markers I suppose we need some code..
This turned out to be purely user error. I am using firebase to store map data without a server backend and was adding duplicate markers. This explains the "inability to hide" and also the appearance of duplicate markers when dragging or animating.
The reason it was working from a click event on the marker was that both duplicate markers were receiving the click event and so both were being hidden.
setMap appears to be perfectly reliable when used in or out of google event handlers.
Does anyone know how to create a custom Google Maps infoWindow That will just open and fill over the map completely, instead of paning the map and setting the bubble over the marker? Basically, what I'd like to do is have my markers on the map, then when a user clicks on a marker, it just opens the content in a panel that fits the entire map itself. I looked at the options mentioned here: link but none of these seem to do what I'd like, they still open a "bubble" type of window. Has anyone done this or can someone point me in the right direction?
Creating your custom info window is not so difficult, but it's a little bit complicated.
If you want to find the easiest way, I recommend InfoBubble library.
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html
If you want to just prevent map panning when the infoWindow open, you can specify an option:
var infoWnd = new google.maps.InfoWindow({
disableAutoPan : true
});
In Google Map API v3, as the title, I only saw 2 types of animation in google map api, but I saw in some places the map marker animate like grow big when mouse over it? How to implement this?
Use marker's mouseover event handler and setIcon() method. You can use dynamic icons from google chart api for this purpose, and change the chld attribute to make the icon grow:
http://chart.googleapis.com/chart?chst=d_map_spin&chld=0.5|0|FF8800|15|_|
http://chart.googleapis.com/chart?chst=d_map_spin&chld=0.6|0|FF8800|15|_|
http://chart.googleapis.com/chart?chst=d_map_spin&chld=0.7|0|FF8800|15|_|
Don't forget to set proper anchor point! For example:
marker.setIcon(new google.maps.MarkerImage(
'http://chart.googleapis.com/chart?chst=d_map_spin&chld=0.65|0|FF8800|15|_|',
null,
null,
new google.maps.Point(11, 43) // this is the proper anchor point for scale 0.65
));
You could use your own image as a marker, then make use of the scaledSize property for the marker image to make it bigger when the mouseover event fires.
I don't know of a way to do this without doing some more complicated stuff like this.
I tried executing a Jquery tooltip code on marker hover, however I think that the problem lies in setting the position.
Here's my code
google.maps.event.addListener(marker, "mouseover", function () {
$('#example-1').tipsy();
});
The MOUSEOVER code itself works, but I think that I might need to set the position of the tooltip?
The plugin can be found here:
http://onehackoranother.com/projects/jquery/tipsy/
The problem here is the element needs to be on the map.
For an illustration of how to do this look at the Custom Info Window Example, Google for:
Google Maps Javascript API v3 Example Info Window Custom
Maybe someone still need a solution. This is how I solve it.
First, define a listener, for hover event on "areas" in your map layer
$(dom).on('hover', 'area', function () {
var $this = $(this), title = $this.attr('title');
if (title) {
$this.removeAttr('title');
// this is the best dom node I figured out to attach the tipsy (and trigger this very first time)
$this.parent().parent().attr('title', title).tipsy().tipsy("show");
}
});
When you add your maker, do it without optimization:
new google.maps.Marker({
map: map,
title: title,
position: location,
// make maps to create a DOM node for each marker
optimized: false
});
Thats all!
Rather than importing an extra library to get tooltips for the map, you might have better luck just using the InfoWindow object that is part of the Google Maps JavaScript API v3.
Another, even easier (but less feature-rich) option is to use the default tooltip functionality for Marker objects. Simply set the title property on your Marker and your done.
marker.setTitle('rollover text!!!');
(If you truly need some functionality in tipsy that isn't available using InfoWindow, it would probably be good to include what that functionality is in the question and/or a comment.)