I'm building a map using the google v3 api because it is way faster. Essentially, it's a map of an area with about 30 cities with polygons over the regions. When a user hovers over a city, I want the fillColor to get lighter, and then return to it's normal state on mouseout. when a user click, it redirects them to another page.
The click event works just fine. But, looking through the v3 API documentation, it seems as if Google has implemented click, doubleclick, mousemove, mousedown and mouseup as event triggers, but no hover, or mouseover, or mouseout.
Really? Geez. I'd think over and out would be higher priority than down and up.
Anyway, has anybody else come across this? Am I wrong? Or is there a workaround?
Thank you in advance for your help,
Stephanie
The following works:
google.maps.event.addListener(polygon,"mouseover",function(){
this.setOptions({fillColor: "#00FF00"});
});
google.maps.event.addListener(polygon,"mouseout",function(){
this.setOptions({fillColor: "#FF0000"});
});
In Google Maps API V3, I have a rollover for a polygon with the below code. I do not like that I have to unset and reset the map each rollover, but, at this point in time, this is how I achieved a mouseover.
I am interested in any comments on how to improve this code.
var polyShape = new google.maps.Polygon({paths:polyData,strokeColor:"#aa0",strokeOpacity:0.5,strokeWeight:1,fillColor:"#cc0",fillOpacity: 0.25});
var polyShapeOver = new google.maps.Polygon({paths:polyData,strokeColor:"#cc0",strokeOpacity:0.5,strokeWeight:1,fillColor:"#ff0",fillOpacity: 0.25});
polyShape.setMap(map);
google.maps.event.addListener(polyShape,"mouseover",function(){
this.setMap(null);
polyShapeOver.setMap(map);
});
google.maps.event.addListener(polyShapeOver,"mouseout",function(){
this.setMap(null);
polyShape.setMap(map);
});
Maps API V3 events are defined per object. Doing a search on the V3 reference page reveals that Marker is the only object with definitions for mouseover and mouseout. So yes, you appear to be correct.
By the way, there are people doing this, but it looks pretty involved:
http://groups.google.com/group/Google-Maps-API/browse_thread/thread/4ddc4f5888994563
mouseover and mouseout are now implemented in V3 Polyline.
Related
I am working with the esri javascript API to create a webmap. I want to have a button next to the map to allow me to zoom-in/out (not the standard esri button). Now, I found a lot of examples doing this using dijit (https://developers.arcgis.com/javascript/jssamples/toolbar_navigation.html) but I just want to use a simple html button like: Zoom in and then in the script part say something like:
function zoomin(){map.setZoom()}
Now my problem is that I don't know how to make that work. I guess the problem is that after the buttonclick it can't find the zoomin function since it's inside the require([...]),function(){} But I can't put it outside neither since the code depends on the require.
So, it would be great if you could tell me what to do.
For zooming in on the map, use the setZoom method incrementing the current zoom level to zoom in and decreasing to zoom out. For example:
//zoom out:
map.setZoom(map.getZoom()-1);
//zoom in:
map.setZoom(map.getZoom()+1);
As an example, using the sandbox of the Esri sample above:
http://developers.arcgis.com/javascript/sandbox/sandbox.html?sample=toolbar_navigation
...replace line 85 to 91 with this:
registry.byId("zoomin").on("click", function () {
//navToolbar.activate(Navigation.ZOOM_IN);
map.setZoom(map.getZoom()+1);
});
registry.byId("zoomout").on("click", function () {
//navToolbar.activate(Navigation.ZOOM_OUT);
map.setZoom(map.getZoom()-1);
});
This will allow the Zoom In and Zoom Out buttons to control the map.
Hope this helps.
I am working on an app that will dynamically load in markers based on a users location. The map should add events to the map if a user zooms out. For the map we are using Polymer's Google Map. I am having a hard time finding out how to react to the zoom event. We added a map to the page with:
<google-map latitude="45" longitude="-73" zoom="15" mouseEvents="true" clickEvents="true"></google-map>
I have tried several different js eventhandlers such as:
<script>
var map = document.querySelector("google-map");
console.log(map);
map.addEventListener("bounds_changed", function() {
alert(map.zoom);
});
</script>
I can't even get events such as "google-map-click" to fire. The only one that seems to work is "google-map-ready".
Please help.
Try adding event listener to map property instead of google-map element.
Something like this gives you all zoom changes
<script type="text/javascript">
var mapElement = document.querySelector("google-map");
mapElement.addEventListener('api-load', function(e) {
google.maps.event.addListener(this.map, 'zoom_changed', function() {
// handle zoom event...
});
});
</script>
Please check this screenshot to understand completely the problem:
My first question is:
How could I move the InfoWindow lower near the pin itself? I tried with css, javascript, etc and I cannot seem to find a "non hacky" way of doing it.
My second question is:
Is there any way to close an InfoWindow from my custom InfoWindow? I know I can do infoWindow.close() but I don't think I have the InfoWindow instance from a jquery event (it's a normal InfoWindow but with custom html in it).
Any help will be greatly welcome :)
Thanks and have a nice day!
From the API on pixelOffset:
The offset, in pixels, of the tip of the info window from the point on the map at whose geographical coordinates the info window is anchored
For the second question, you don't want to use jQuery events to open the infowindow, instead you can use the content property of the options to set your custom html, then do something like this:
var myInfoWindow = new google.maps.InfoWindow({ content: 'customHTML',
//some mode options
})
google.maps.event.addListener(marker, 'click', function (event) {
if (myInfoWindow) {
myInfoWindow.close()
myInfoWindow.setPosition(event.latLng);
myInfoWindow.open(map, marker);
}
})
Is there a way to have a loading icon while the map is loading markers? I am using google maps API 3 with javascript and cant find much information on this.
This event is now called "status_changed" per the API docs: https://developers.google.com/maps/documentation/javascript/reference#KmlLayer
It can be used like this:
google.maps.event.addListener(kmlLayer, 'status_changed', function () {
if (kmlLayer.getStatus() == google.maps.KmlLayerStatus.OK) {
// Success
}
else {
// Failure
}
});
If you're loading markers using a KmlLayer object, then you can attach a listener to the event metadata_changed which gets fired after the KmlLayer has loaded all the information.
So you can have your custom loading icon display as soon as you initialize your map, then make the call for the markers using new google.maps.KmlLayer(...). In the listener for metadata_changed you can remove the custom loading icon, or hide it from displaying. So when the KmlLayer finishes loading, then it'll run the code to remove your loading icon.
You can attach listeners by going:
google.maps.event.addListener(kmlLayerObject, 'metadata_changed', function () {
...
}
You could also "hide" the map canvas with a loading div and show it after initialization.
Another thing to be aware of is when the map is hidden on init, it may behave strangely that can be fixed by "resizing" the map:
http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/251f20b769d116ea/ba3ca54f5e1352a2
How do I trigger the onclick event of a marker on a Google Maps from outside the map?
I use version 3 of the API. I've seen many tutorials for version 2, but can't find this for version 3.
I have a global array (named markers) containing all the marker of the map (google.maps.Marker). Now I want do do something like:
markers[i].click(); //I know it's not working, but you get the idea...
//Next line seems to be the way in v2, but what's the equivalent in v3?
GEvent.trigger(markers[i], 'click');
Thanks for your help and if you need more info, let me know!
I've found out the solution! Thanks to Firebug ;)
//"markers" is an array that I declared which contains all the marker of the map
//"i" is the index of the marker in the array that I want to trigger the OnClick event
//V2 version is:
GEvent.trigger(markers[i], 'click');
//V3 version is:
google.maps.event.trigger(markers[i], 'click');
For future Googlers,
If you get an error similar below after you trigger click for a polygon
"Uncaught TypeError: Cannot read property 'vertex' of undefined"
then try the code below
google.maps.event.trigger(polygon, "click", {});