I have scoured stackoverflow and other forums including the google maps v3 api docs for an answer but I cannot find how to change the event that fires the marker info window from click to mouseover in the files I am working with.
I am working with a demo from the google library that includes a fusion table layer.
You zoom into the clusters and see the small red circle markers for locations.
You have to click to reveal an info window. I wish to rollover to reveal the info window.
My demo is here:
http://www.pretravelvideo.com/gmap2/
The functions.js file does most of the work here:
http://www.pretravelvideo.com/gmap2/functions.js
Here's an example:
http://duncan99.wordpress.com/2011/10/08/google-maps-api-infowindows/
marker.addListener('mouseover', function() {
infowindow.open(map, this);
});
// assuming you also want to hide the infowindow when user mouses-out
marker.addListener('mouseout', function() {
infowindow.close();
});
var icon1 = "imageA.png";
var icon2 = "imageB.png";
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: icon1,
title: "some marker"
});
google.maps.event.addListener(marker, 'mouseover', function() {
marker.setIcon(icon2);
});
google.maps.event.addListener(marker, 'mouseout', function() {
marker.setIcon(icon1);
});
Thanks to duncan answer, I end up with this:
marker.addListener('mouseover', () => infoWindow.open(map, marker))
marker.addListener('mouseout', () => infoWindow.close())
Related
I am trying to find how to autoclose or/and to close a infowindow of a marker (google map).
I worked on that code but I do not understand why the close function does not close de infowindow. I have no errors on my Firefox console
Here is the code and your help will be appreciated
//Infowindow
google.maps.event.addListener(markers[i], 'click', function() {
/* the marker's content gets attached to the info-window: */
var info = new google.maps.InfoWindow({
content: this.content
});
info.close(); // IT DOES NOT CLOSE the open infowindow or all open
/* trigger the infobox's open function */
info.open(map,this); //This works
/* keep the handle, in order to close it on next click event */
//infos[0]=info;
});
Thank a lot
I have similar code that seems to work when I add infowindow.close(), perhaps you can find the answer in mine:
google.maps.event.addListener(marker, 'click', (function(marker, content) {
return function() {
map.panTo(marker.position);
infowindow.setContent(content);
infowindow.open(map, marker);
map.circle.setCenter(marker.position);
infowindow.close();
}
})(marker, content));
you need to pass two parameters when closing the infowindow. You can try the functions listed below. The close method is called on the click event to close the existing infowindow before opening the new infowindow on the marker.
This code will remove the infowindow as soon as you move your mouse away from the marker and it will open the infowindow when you click on the marker.
Try this out and let me know.
var info = new google.maps.InfoWindow({
content: this.content
});
google.maps.event.addListener(marker, 'click', function() {
info.close(map,marker);
info.open(map,marker);
});
google.maps.event.addListener(marker, 'mouseout', function() {
info.close(map,marker);
});
I created a map using Google Fusion Tables, and have uploaded the map into an HTML document, which I am tweaking to make subtle changes in the appearance of the map. I figured out how to insert a draggable pin/marker that displays a street view of its current location on click, but I can't figure out how to change the appearance of the marker. Here is the code I have for the interactive streetview marker.
//street view pin
var contentString = '<div id="content" style="width:500px;height:400px;"></div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: 'Click Here for Street View',
draggable: true
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
var pano = null;
google.maps.event.addListener(infowindow, 'domready', function() {
if (pano != null) {
pano.unbind("position");
pano.setVisible(false); }
pano = new google.maps.StreetViewPanorama(document.getElementById("content"), {
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.ANDROID},
nableCloseButton: false,
addressControl: false,
linksControl: false
});
pano.bindTo("position", marker);
pano.setVisible(true);
});
google.maps.event.addListener(infowindow, 'closeclick', function() {
pano.unbind("position");
pano.setVisible(false);
pano = null;
});
I tried to tweak the lines 7-14, adding in a
icon: 'cross_hairs_highlight'
which is the style i want, but the icon disappears when I try to open the HTML document in a browser. There is still something there that I can still drag around and click on for StreetView, but it's invisible.
Any suggestions?
Your help is appreciated!!!
JH
The value of icon is expected to be a URL, not the name of a fusionTable-icon (these icon-names may only be used for markers rendered within a fusionTableLayer).
You'll find a list of these icons (inspect the image-properties to retrieve the URL) at http://kml4earth.appspot.com/icons.html , so you may use e.g.:
icon:'http://maps.google.com/mapfiles/kml/pal3/icon52.png'
When you want the marker to be centered at the given position, you must also specify the anchor:
icon:{
url: 'http://maps.google.com/mapfiles/kml/pal3/icon52.png',
anchor: new google.maps.Point(16,16)
}
Can somebody please explain why my Google Maps info windows are only opening at the bottom left marker?
See here for the fiddle http://jsfiddle.net/Vj3nw/7/
When I click on any of the markers, only the bottom-left one is opened. I would like the marker that is clicked to open.
I believe the problem is due to the loop below, and this question seems to have the same problem Setting onclick to use current value of variable in loop
"The problem you were hitting is that javascript doesn't use block scope. Instead all variables have a lifetime of their containing function. So there was only ever one a captured in all of the onclick functions and they all see it's final value."
I just can't quite translate that solution to mine.
Many thanks.
for (var i = 0; i < 4; i++) {
var marker = new google.maps.Marker({
position: flightPlanCoordinates[i],
icon: Symbol,
map: map
});
infowindow = new google.maps.InfoWindow();
infowindow.setContent("hello");
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
}
Generating your markers and adding the listeners in their own function, called from the loop like the updated fiddle works.
function create_marker(i,flightPlanCoordinates,Symbol,map){
var marker = new google.maps.Marker({
position: flightPlanCoordinates[i],
icon: Symbol,
map: map
});
infowindow = new google.maps.InfoWindow();
infowindow.setContent("hello" + i);
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
I'm moving from infoWindow to infoBox for better looking info windows.
I have a number of markers on the map. What I want to do is when one infoBox is already opened, if the user clicks on other markers, the current infoBox will close automatically and new infoBox will open so that the user does not need to close the current infoBox, and there will always be only one infoBox displayed at a time.
Here's the demo and code of my current solution
http://jsfiddle.net/neo3000ultra/9jhAy/
Thanks in advance!
Change this part:
google.maps.event.addListener(marker, "click", function (e) {
ib.open(map, this);
});
var ib = new InfoBox(myOptions);
google.maps.event.addListener(marker2, "click", function (e) {
ib2.open(map, this);
});
var ib2 = new InfoBox(myOptions2);
to the following:
var ib = new InfoBox();
google.maps.event.addListener(marker, "click", function (e) {
ib.close();
ib.setOptions(myOptions)
ib.open(map, this);
});
google.maps.event.addListener(marker2, "click", function (e) {
ib.close();
ib.setOptions(myOptions2)
ib.open(map, this);
});
Works for me, also in IE9: http://jsfiddle.net/doktormolle/9jhAy/1/
Note the use of ib.close() before opening the infoBox, seems to be the trick.
The usual suggestion for a single infowindow is to only create one, then reuse it for all the markers (changing its content).
Here is an example that does that with the v3 API (I think of it as "v2 infowindow behavior" because the v2 API only allowed a single infowindow)
http://www.geocodezip.com/v3_markers_normal_colored_infowindows.html
Here is another example based off of Mike Williams' v2 tutorial:
http://www.geocodezip.com/v3_MW_example_map1.html
and your example modified:
http://jsfiddle.net/uGnQb/6/
The "drag", "dragstart" and "dragend" events in the Google Maps V3 API each pass a mouseEvent to the registered callback function.
However - this event does not contain any information as to which marker is being dragged. How can I determine that?
This is even more complicated if you are just looking at the "dragend" event - which would only have the new coordinates, making it impossible to even infer from the coordinates.
I'd assume there's got to be an easy way to just determine which marker is being dragged...
I would attach add the drag event to the marker using a listener when it is created.
google.maps.event.addListener(marker, 'dragend', function() {
//do something with the event.
});
here is an example fiddle: http://jsfiddle.net/2YQg6/10/
(Dont mind the other stuff I just edited a fiddle I have used before to handle draggable markers.)
The relavant code is in the marker creation loop:
//geo code and build markers for each list item.
for (var i = 0; i < $listItems.length; i++) {
geocoder.geocode({
'address': $($listItems[i]).text()
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
draggable: true,
originalPos: results[0].geometry.location
});
google.maps.event.addListener(marker, 'dragend', function() {
infoWindow.setContent("marker originally at this position: " + this.originalPos + " was dragged to: " + this.position);
infoWindow.open(map, this);
});
markers.push(marker);
}
});
}