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.
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'
});
}
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 not sure the correct lingo for this, so feel free to edit the title of this post if necessary.
Basically, I'm creating a Google map object and adding a bunch of overlays, markers, etc. This is how I create the map:
map = new google.maps.Map(document.getElementById("map"), mapOptions)
But then, navigating through the side, I may land on a url where the map DOM element is destroyed, but the map object still exists in my web app. When I go back to the url that displays the map, I'd like to reattach the map to the DOM element as opposed to recreating the map.
Any ideas how to do this?
EDIT:
To be more specific, I have a bunch of markers and overlays on the map
Map =
map: null
markers:[]
icons: {}
init: ->
mapOptions =
center: new google.maps.LatLng(34.0500, -118.2500)
zoom: 9
#map = new google.maps.Map(document.getElementById("map"), mapOptions)
#icons.default =
path: google.maps.SymbolPath.CIRCLE
strokeColor: '#DD0000'
fillColor: '#DD0000'
fillOpacity: 0.6
scale:8
strokeWeight: 2
addMarker: (post) ->
gLatLng = new google.maps.LatLng post.location.lat, post.location.lng
gMarker = new google.maps.Marker
position: gLatLng
map: #map
icon: #icons.default
animation: google.maps.Animation.DROP
marker =
post: post
gMarker: gMarker
#markers.push marker
I suppose I could create a new map and attach all the markers to the new map, but this seems unnecessary because I may have many other overlays on the map
It is not possible to attach the Map object to another DOM element after the Map object has been created. As you can see in the Google Maps Javascript API v3 Reference there is only a getDiv() method available on the Map, not a setDiv().
I think you could hold on to the other objects like Marker and MapOptions to recreate the Map, but the Map object itself is useless without the corresponding DOM element.
You can create a global variable, mapOptions, where you can store the options of the map. Whenever some interaction is done with the map, you can update the mapOptions objects, and save it to localstorage.
var mapOptions = {
...
};
localStorage.setItem("mapOptions", JSON.stringify(mapOptions));
map = new google.maps.Map(document.getElementById("map"), localStorage.getItem("mapOptions"));
Hope this helps!
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.