This one has me stumped, and I'm hoping a second set of eyes will be able to point out the problem. I realize that my abstraction library adds a lot of additional complexity, but I was thinking that someone else may have seen something similar in their implementation. I've also tried to boil this down to as simple and targeted a case as possible.
The problem is that markers created and added to the map via the Google Maps API and set as draggable cannot be dragged. This used to work just fine, but a change I made somewhere in the library broke this functionality. To reproduce, go to http://www.nps.gov/npmap/support/library/examples/map-defaults.html?api=google and then paste the following code in the browser web development console:
var marker = new google.maps.Marker({
position: NPMap.Map.Google.map.getCenter(),
draggable: true,
map: NPMap.Map.Google.map
});
The marker should be draggable, but it is not.
A few notes:
Markers are still clickable, and it seems like all marker events (mouseover, etc.) are working properly
Lines and polygons added to the map as editable work fine
I have played around with the z-index of the map div and some of the other elements, but this doesn't seem to be causing the problem
I am loading the current release version of the Google Maps API, v3.11. I have tested with the frozen version, 3.10, and the experimental version, v3.12, but the problem persists no matter which version is loaded.
Any help is greatly appreciated!
UPDATE: Strange. Markers added with draggable: true don't appear to be clickable. But if a marker is added without specifying draggable: true, it does seem to be clickable. It seems like this is probably related.
UPDATE 2: A follow up to my first update: Events are not working on markers that are created with draggable: true and added to the map. You can run the following code after creating the marker to test this out:
google.maps.event.addListener(marker, 'click', function(e) {
console.log(e);
});
Figured it out. I was doing something like this to hack around some of the default Google Map controls:
var els = document.getElementsByClassName('gmnoprint');
for (var i = 0; i < els.length; i++) {
els[i].style.display = 'none';
}
This hasn't affected draggable markers in the past, but Google must have made a change in the Maps API and started adding the gmnoprint class to draggable markers. Oh well, that's what I get for going outside of the documented API.
As of Google Maps API v3.6, maps now include "points of interest", which are gray markers embedded into a map. When the user clicks on this icon, an InfoWindow appears with information about that business (or park, hospital, etc.)
These can be turned off by setting the Styling. (See "Style Array Example")
https://code.google.com/apis/maps/documentation/javascript/styling.html
Once they are turned off, the icons, names, and shaded regions (for parks and hospitals) go away.
Before Google Maps API v3.6, there were no icons; only the names and regions.
The question: is there a way to remove the "click icon to open info window" behavior of these points of interest? I still want to keep the icons, names, and regions; only want to remove the click behavior.
Alternate question: is there a way to download/save the JavaScript of the v3.5 of Google Maps API to store on my server? At present, v3.5 is working fine for what I need. In February, Google will no longer provide v3.5 of the code and will instead provide only v3.6, v3.7, v3.8.
Retiring of minor versions of Google Maps API v3, and using the "frozen" version of an API:
https://code.google.com/apis/maps/documentation/javascript/basics.html#Versioning
Things I've tried and considered: Adding an event listener when the map is clicked does not work, because the embedded markers are clicked instead of the map. Adding "clickable: false" as a property was a shot in the dark, with no result. Setting "visiblility: off" removes it all, leaving the map with less content. Setting "visibility: simplified" removes the name of the location, though the onclick behavior is still present. Putting an invisible DIV overlaying the map might work, though it would remove the ability to pan/zoom/drag the map without increasing complexity.
Setting a style so that featureType: poi, elementType: labels, visibility: off will result in showing the pink/gray/green regions for hospitals/cemeteries/parks, without the marker or name. It returns more color to the map.
I'm not sure if this is still relevant to you, but Google did, indeed, solve the issue on April, 2016, all you need to do is clickableIcons to false in MapOptions
This issue has been logged with google at:
http://code.google.com/p/gmaps-api-issues/issues/detail?id=3866
Please star and comment your needs on this issue there.
I'm not sure this is not a violation of the Google Maps TOS, it's a bit hacky, and doesn't work on IE < 9, but you can listen on dom event,
to detect the creation of the window, using Mutation Observer
Here is a plunkr to demonstrate : http://plnkr.co/edit/pGep9OZFligLhRtHlhgk
You can check in the console, an event is fired (actually twice) when you click on a POI, and the window is hidden
By referencing this URL (https://stackoverflow.com/a/24234818/6160436), I somehow managed to hide the Info windows of POI and call the click event listener of map when the user clicks on the POI.
But I'm not sure whether this violates TOS or not, so use at your own risk.
//keep a reference to the original setPosition-function
var fx = google.maps.InfoWindow.prototype.setPosition;
//override the built-in setPosition-method
google.maps.InfoWindow.prototype.setPosition = function () {
//this property isn't documented, but as it seems
//it's only defined for InfoWindows opened on POI's
if (this.logAsInternal) {
if (this.getPosition()) {
console.log(this.getPosition());
google.maps.event.trigger(map, 'click', {latLng: this.getPosition()});
}
else{
google.maps.event.addListenerOnce(this, 'map_changed',function () {
console.log(this.getPosition());
google.maps.event.trigger(map, 'click', {latLng: this.getPosition()});
// var map = this.getMap();
// //the infoWindow will be opened, usually after a click on a POI
// if (map) {
//trigger the click
var removeInfoWindow = null;
removeInfoWindow = setInterval(function(){
if ($('.gm-style-iw').parent().length) {
$('.gm-style-iw').parent().hide();
clearInterval(removeInfoWindow);
};
},1);
// }
});
};
}
//call the original setPosition-method
fx.apply(this, arguments);
};
google.maps.event.addListener(map,'click',function(e){
alert('clicked #'+e.latLng.toString())
console.log('ok');
});
A couple of things to be aware of:
1)
If your map is high traffic, you may find yourself in violation of the Google Maps TOS. You're supposed to use an official version. If it's your own blog or something else low traffic, nobody will notice or care.
2)
This is only conjecture on my part, but I noticed these POI's myself and got annoyed by them. I am pretty sure these are paid-for "inline ads", so to speak. Some gas stations and diner chains have them, so you will soon see Google maps being spammed with these POI markers. If they allow those to be turned off in the API, it kind of goes against the business interests of those who paid for the POI icon... so I highly doubt that you will be able to remove them.
If you do find a way,please please DO POST the solution! Thanks.
I am attempting to create our college campus map for our mobile website that will be launching shortly.
I have followed google's map api v3 example for creating a simple image overlay (found here: http://code.google.com/apis/maps/documentation/javascript/examples/overlay-simple.html) which I have successfully created.
However, my question is and what I am struggling greatly with is, how to place markers that show on top of this image overlay?
I understand how to make a marker on google maps, and attempted to implement it with the simple code of:
var myLatLng = new google.maps.LatLng(xx.xxxxx,-xx.xxxxx);
var marker = new google.maps.Marker({
position: myLatLng,
map:map,
title:"testing"
});
however placing that in the initialize section, causes the marker to fall under my custom image overlay... I read that I need to place it in one of the map panes that is greater then the 3rd pane, but this is where I would need some help, where to place this and how?
Markers always render in the overlayImage pane, so rather than trying to move the marker, move the overlay you added so that it appears in a lower pane (beneath the markers).
Replace:
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
with:
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
That is, replace overlayImage with overlayLayer. The Maps API V3 Reference tells me is the pane that contains ground overlays, polygons and polylines (all of which appear below markers).
In google maps api v3, I think you can no longer get all the markers on the map object. I need to hide the very last marker from the DirectionsService result. I used to be able to do this in v2:
_gdir.getMarker(_gdir.getNumRoutes()).hide();
I have routes that start and end in the same place, and I need to hide the very last marker so that it does not overlay my original origin maker.
thanks.
If you can settle with hiding all of them then the DirectionsRendererOptions has an option to suppress markers.
https://developers.google.com/maps/documentation/javascript/reference#DirectionsRendererOptions
You hide/remove a marker using the setMap() method with null as the argument:
marker.setMap(null);
Check google docs Remove Marker. Note that the above method does not delete the marker. It simply hide/removes the marker from the map. If you want to show it again just use:
marker.setMap(map);
i built a custom map using google api v3, and I allow my users to use the streetview feature, but i would be able to close it and go back to the regular map by clicking a button (not he X within th emap but my own button)...what's the command to do that? i cant find it in the docs
Try putting this under the pageLoad()
$("#streetview_click").appendTo("#map_canvas");
// google streetmap [top bar (north) ]
$("#streetview_click").click(function(){
var panorama = map.getStreetView();
if(panorama){panorama.setVisible(false);}
});
for more information about streetview script functions check this topic on Google groups:
http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/d87b18de3a096b8d/b56a04a0440f5016?lnk=gst&q=streetview+close+button#b56a04a0440f5016