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.
Related
Many other solutions like Google Maps API v3: How to remove all markers? All involve having some kind of maps array to store the map objects for later usage.
I have a situation where there is no such array to access. I can't edit the original js that makes the maps, but I can add my own script to the page.
Is it possible to retrieve all the markers after the page loads to then remove one?
Example of how markers are currently being added by framework I have to use:
map = new google.maps.Map(document.getElementById("map_canvas"), options);
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
icon: '/pin.png',
title: data['store_title']
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
Directly via the API it doesn't seem to be a way to do that.
If you don't have access to the array with the markers there isn't much to be done.
first of all I was initiate marker from geojson, and how I can get the marker if i want use marker for listener/action?
this is my script
var map;
function initMap() {
//makes map
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -6.9034482, lng: 107.6081381},
zoom: 9,
styles: [{"featureType":"water","stylers":[{"saturation":43},{"lightness":-11},{"hue":"#0088ff"}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"hue":"#ff0000"},{"saturation":-100},{"lightness":99}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"color":"#808080"},{"lightness":54}]},{"featureType":"landscape.man_made","elementType":"geometry.fill","stylers":[{"color":"#ece2d9"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"color":"#ccdca1"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#767676"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"color":"#ffffff"}]},{"featureType":"poi","stylers":[{"visibility":"off"}]},{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#b8cb93"}]},{"featureType":"poi.park","stylers":[{"visibility":"on"}]},{"featureType":"poi.sports_complex","stylers":[{"visibility":"on"}]},{"featureType":"poi.medical","stylers":[{"visibility":"on"}]},{"featureType":"poi.business","stylers":[{"visibility":"simplified"}]}]
});
//load marker from geojson
map.data.loadGeoJson('<?php echo base_url().'index.php/json_site/geojsongetmap'?>');
// set style marker
map.data.setStyle(function(feature){
var tit = feature.getProperty('nm_site');
return{
title: tit,
icon: '<?php echo base_url()?>assets/images/mark3.png'
};
});
//marker event
map.data.addListener(marker, 'click', function(event) {
map.setZoom(11);
map.setCenter(marker.getPosition()); // I need to get the position of the marker who i clicked
});
}
how I can make action listener if I initiate marker from geojson?
and how I can get the marker who existing in my map?
please help me, any suggest would be appreciated
thanks
Instances of the google.maps.Data.Point class are not exactly a drop-in replacement for traditional google.maps.Marker objects. For starters, they are abstract data, not tied to a particular representation. It's up to the parent google.maps.Data layer to decide how to draw them.
However, you can still capture events, with the caveat that the click happens on the Data layer, which receives a mouseEvent as argument. This argument contains the feature over which you just clicked.
This means you need to declare:
google.maps.event.addListener(map.data,'click',function(mouseEvent) {
var clickedFeature = mouseEvent.feature,
featureGeometry = clickedFeature.getGeometry(),
featurePosition = featureGeometry.get();
map.setCenter(featurePosition);
});
Please take into consideration that ingesting geoJson with the Data layer can result not just in Point geometries. If you get a mix of points, polygons and linestrings, anything different from a point won't return a latLng object when you call its get method.
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 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
I am currently stuck with google maps v3.
I try to add bounds manually in this way, but it doesn't work!?
map.fitBounds((53.399999, 9.73215099999993), (53.717145, 10.123491999999942));
fitBounds expects an object of the type LatLngBounds, which in turn is initialized with two LatLng objects.
This should work:
sw = new LatLng(53.399999, 9.73215099999993);
ne = new LatLng(53.717145, 10.123491999999942);
bounds = new LatLngBounds(sw, ne)
map.fitBounds(bounds);
Reference:
V3 API Reference on LatLng
V3 API Reference on LatLngBounds
V3 API Reference on fitBounds()