I'm writing web app that uses google maps. I've got some points placed to the map as markers. When I drag the marker - it raises - and when I drop it - it falls back down. I want to avoid raising marker. Is there any way to drag it without raising?
This feature has probably been added since the question was asked but stopping the marker from raising is quite straight forward now.
When creating Marker set its 'raiseOnDrag' property to false. Like so...
marker = new google.maps.Marker ({draggable : true, raiseOnDrag : false});
Since there is no option while creating the marker I guess there is no way.
The only thing, I could imagine would be using the icons (in the reference there is an example).
But you have to try, I don't know if selfmade icons are raised or not.
You can use marker.setAnimation() method:
var marker = new google.maps.Marker({...});
google.maps.event.trigger(marker, 'dragstart'); // trigger dragstart to keep marker in the "raised" state"
marker.setAnimation(3); // raise
// later
marker.setAnimation(4); // fall
In Google Maps API there are only two types of animations documented (BOUNCE and DROP), but I have discovered two more:
1: BOUNCE,
2: DROP,
3: raise,
4: fall
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 load data for my Google Maps v3 with GeoJSON:
that.map = new google.maps.Map($('#map')[0], mapOptions);
that.map.data.loadGeoJson('http://localhost/geoserver/...');
Now, at some point on some user event I need to get one marker and paint it blue.
I can set different color with setIcon.
My idea is to get all features, then iterate through them, find the right feature (based on UNIQUE feature data field) and find marker behind that feature and change icon. I found some approaches that store all markers in array, but don't know why I need another array. Computer resources are important and I don't want to duplicate things.
I need help with, how to get features and how to get Marker object associated with selected feature. If there is a better way to do it, please...
UPDATE
I found this:
var feature = this.map.data.getFeatureById(ID);
I just need to get feature Marker. How? Doesn't look that Feature class has method for that?
There is no method/property that gives you access to the shape(marker,polygon,etc.) that has been created by the API.
To set a new icon-property for a particular feature use overrideStyle:
map.data.overrideStyle(feature, {icon: newIconSettings});
Another option is:
that.map.data.setStyle(function(feature)
{
var color = 'red';
if (feature.getProperty('color'))
{
color = feature.getProperty('color');
}
return ({ // #type {google.maps.Data.StyleOptions}
icon: 'http://maps.google.com/mapfiles/ms/icons/' + color + '-dot.png',
});
});
But it is not as good as Dr. Molle solution, because it needs to iterate through entire features set. I found it on google api documentation (look for title Change Appearance Dynamically).
I've got a tile layer that I want to remove and replace with another one in Google Maps. My tile layer is defined in MapOptions using GetTileUrl to call a function.
For instance, I want to be able to remove a county layer and replace it with a census tract one.
When I try to do this it only loads the new layer when I pan the map. I think I need to remove the old tiles from Google's cache (as if I turn browser caching turned off this still happens).
I've tried the map "resize" event, but it doesn't work.
Do I need to set the map to null and reinitialize everything? Or can I just reload my map tile layer?
When I change the layer, the URL for the tile loading changes - so I'm guessing that adding a fake parameter won't help me.
The code is pretty long (and has extra stuff in it), but if you want to see this in action you can go to JusticeMap.org
var jmapMapType = new google.maps.ImageMapType(jmapTypeOptions);
map.overlayMapTypes.push(jmapMapType);
I needed to store the jmapMapType in a global variable.
Then I can remove it, and add it back. This reloads the tiles:
map.overlayMapTypes.removeAt(0);
map.overlayMapTypes.push(jmapMapType);
I have multiple addresses on the same street with the same house number, but with different apartment numbers. Google Maps Geocoding Service (v2) doesn't go down to apartment level accuracy for many addresses and just returned me the exact same geocode coordinates for them.
So the problem is that when I go to display them, only one pushpin shows up no matter how much you zoom in. And my question is; what is a good way to render multiple pushpins at the exact same house address? I've seen how craigslist.org creates a spiral out of the pushpins on their new map feature, but was wondering what my other options are as that seems like a workaround at best.
Ideas?
I solved this using Google's dynamic chart icons which allow you to put a number in the pin identifying that there are multiple markers on this exact some point. Basically, you call their "chart" url with some query params and they give you back your numbered icon which you can then place/set in the existing marker you have on that spot.
var markerImage = createMarkerImage(numDuplicates + 1);
existingMarker.setIcon(markerImage);
function createMarkerImage(text)
{
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=" + text + "|FF8985|000000",
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
return pinImage;
}
NOTE: This solution uses a deprecated google API with no end date posted.
"Important: The Image Charts portion of Google Chart Tools has been
officially deprecated as of April 20, 2012. It will continue to work
as per our deprecation policy."
UPDATE:
I have moved away from the above solution since it's deprecated (and has performance impact for many markers) in leiu of the same end effect of a numbered marker, but using a path of coordinates defining polygon in the shape of a marker along with a .png for the marker shadow. Only reason I used my own custom marker is because I needed to create individual markers, each with a unique color (and possibly an embedded number), which the vanilla markers don't support.
I am new to the Google Maps API... so I apologize in advance if the answer to this question is somewhat basic... I have spent several hours trying to find a solution.
Explanation:
I would like to show an infowindow at the point the cursor was at when a click was detected while in a polygon.
I am able to open the infowindow - but am unable to determine the location to use.
It appears that the PolyMouseEvent object does not allow for getting the latLng like the MouseEvent does.
Is there a way to the the current mouse position (in latLng) in this case?
Set clickable:false in the PolygonOptions and listen for the click event on the map itself.