I instanciate a MarkerClusterer like this :
markerClusterer = new MarkerClusterer(map, markers, {
maxZoom: zoom,
gridSize: size,
styles: styles
});
After loading, I add some marker to the map.
How can I refresh my clusterer so what it takes the new marker into consideration ?
Now, if I zoom out, the new marker is not clustered.
In advance, thank you !
Note : I don't use MasterClusterer Plus
Hmm, I didn't use the markerClusterer.addMarker function...
It works fine now !
-> http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/reference.html
Related
I am using a theme that had only came with js.minifiy. I am able been able to get a marker to show however that it. No description of place nor is the label clickable. I have tried quite a few things but I cannot fix this. Since the theme is using js.minify do i need to make changes in that file? Not sure I need an API but I did set up a Google Maps Javascript API. Should I include that in js.minify? I uploaded the default theme files for testing and help would be appreciated.
http://vineblock.trade
google.maps.event.addDomListener(window, 'load', googleMapsInit);
function googleMapsInit() {
// Basic options for a simple Google Map
// For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
var mapOptions = {
// How zoomed in you want the map to start at (always required)
zoom: 17,
scrollwheel: false,
// The latitude and longitude to center the map (always required)
center: new google.maps.LatLng(-34.8679988, 138.5118251),
// How you would like to style the map.
// This is where you would paste any style found on Snazzy Maps.
styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}]
};
// Get the HTML DOM element that will contain your map
// We are using a div with id="map" seen below in the <body>
var mapElement = document.getElementById('map');
// Create the Google Map using our element and options defined above
var map = new google.maps.Map(mapElement, mapOptions);
// Let's also add a marker while we're at it
var marker = new google.maps.Marker({
icon: 'images/label.png',
position: new google.maps.LatLng(-34.8679988, 138.5118251),
map: map,
title: 'Carros'
});
}
i'm trying to remove all the markers from a google map using ExtJS. I'm performing a setCenter() operation (i need to remove the old center from the map) and also i want to add a new marker in the new center.
As i know, to get the google map instance i need to perform a getMap() over the map container, i.e map.getMap()
I tried with clearMarkers();, deleteMarkers(); and markers = []; but neither works. The google map object looks really weird on the Chrome Developer tools utility, at least for me.
With the addition, same problem. I'm doing that:
new google.maps.Marker({
map : map.getMap(),
position : new google.maps.LatLng(location.lat, location.lng),
title : 'Drag Marker To New Position',
animation : google.maps.Animation.DROP,
draggable : true
});
Any help is appreciated!
Thanks.
It's very simple. To remove a marker from the map, call the setMap() method passing null as the argument.
marker.setMap(null);
Note that the above method does not delete the marker. It simply removes the marker from the map. If instead you wish to delete the marker, you should remove it from the map, and then set the marker itself to null.
If you wish to manage a set of markers, you should create an array to hold the markers. Using this array, you can then call setMap() on each marker in the array in turn when you need to remove the markers. You can delete the markers by removing them from the map and then setting the array's length to 0, which removes all references to the markers.
Find an example here View example (marker-remove.html)
Read more about Google Maps Tutorial - Remove a marker
Finally i get a solution for that (maybe it's not the better way, but it works)
I decided to have a global variable that references the marker that i have to put over the map.
To define a global variable in sencha i use this approach:
Ext.application({
name: 'SIGCC',
marker: null,
....
....
});
I'm using a custom class to get an AutocompleteTextField, and when the user taps a suggested location the previous marker has to be removed and a new one is placed over the google map. Also i have to recenter the map in the new location
recenterMap: function(location){
//addressMap is the id of the xtype map component
var map = Ext.getCmp('addressMap');
map.setMapCenter({ latitude: location.lat, longitude: location.lng });
if (SIGCC.app.marker){
SIGCC.app.marker.setMap(null);
}
SIGCC.app.marker = new google.maps.Marker({
map : map.getMap(),
position : new google.maps.LatLng(location.lat, location.lng),
title : 'Drag Marker To New Position',
animation : google.maps.Animation.DROP,
draggable : true
});
//My map is hidden before de users tap action, so i have to unhide them
map.setHidden(false);
},
As you can see, this portion of code references the global variable defined previously.
Hope this helps someone.
I am using Javascript Google Maps API V3.
There is a special marker in one cluster, but I want it always to be shown outside the cluster. Does anyone know how to do this?
You can do that in the following way:
// create your marker
var marker = ....
// mark your special marker
var markerToRemove = marker;
// create marker clusterer
markerClusterer = new MarkerClusterer(map, markers, {
maxZoom: zoom,
gridSize: size,
styles: styles[style]
});
// remove your special marker from cluster
markerClusterer.removeMarker(markerToRemove);
// put it back on map
markerToRemove.setMap(map);
The last step is necessary because MarkerClusterer removeMarker() function set map to null so marker is not visible any more.
I am using Google Maps API V3. I am trying to animate a marker on the Polyline smoothly.
I have Tried this http://jsfiddle.net/bmSbU/154/
Here I have made fixed points as (30,-110) and (30,-100) so I can able to make based on the fixed points.
Now my question is how to do the same when I have multiple points (PolyLine) and the marker should move smoothly without any flicking on map.
var map;
var path;
var marker;
function initialize() {
var myLatlng = new google.maps.LatLng(35, -105);
var myOptions = {
zoom: 5,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
route = new google.maps.Polyline({
path: [
new google.maps.LatLng(30, -110),
new google.maps.LatLng(30, -100)],
map: map
});
marker = new google.maps.Marker({
position: new google.maps.LatLng(30, -110),
map: map
});
counter = 0;
interval = window.setInterval(function () {
counter++;
var pos = new google.maps.LatLng(30, -110 + counter / 100);
marker.setPosition(pos);
if (counter >= 1000) {
window.clearInterval(interval);
}
}, 10);
}
google.maps.event.addDomListener(window, 'load', initialize);
Can anybody help me out?
Your jsfiddle plays smoothly for me on the latest version of Safari on a newer macbook pro. YMMV with different hardware/platforms.
Fundamentally, CSS animations generally outperform similar animations implemented in Javascript. I think the Google Maps API is going to cause animation artifacts when you call Marker#setPosition() via timeout internals. See this answer for How to add custom animation on Google Map V3 Marker when I drop each marker one by one? for a deep dive into hacking how Google internally implements the google.maps.Marker#setAnimation method using CSS animations.
Another option is to stop using Google's Marker type, and implement a custom marker type that supports custom CSS animation. This is not as hard as it sounds. Check out a blog post by Mike Bostock on using D3 for custom markers on Google Maps.
i'm using google map API and i would like to move the makers.
I use the following code:
marker.setPosition( new google.maps.LatLng(driver.location_latitude, driver.location_longitude ) );
the problem is that it duplicate the maker instead of just moving it.
try this code
marker.setMap(null);
marker.setPosition( new google.maps.LatLng(driver.location_latitude, driver.location_longitude ) );
marker.setMap(map);
note that map is your map object.