I am working on an application which plots several polylines across a map, normally from A to B, but sometimes also "from A to A", so to itself. In that case, only an Arrow to is shown, like this:
The problem now is that I am binding infoWindows to these polylines, so you when clicked a window popups up, which works well for the regular polylines, however for the arrow shown in the image, it doesn't work. It is simply not clickable.
I am creating the polylines like this:
var directionArrow = {
path: google.maps.SymbolPath.FORWARD_OPEN_ARROW
};
// In this example, it's a line to itself
var pathCoordinates = [
{lat: 40.76590936, lng: -73.97634151},
{lat: 40.76590936, lng: -73.97634151}
];
var path = new google.maps.Polyline({
path: pathCoordinates,
clickable: true,
geodesic: true,
strokeColor: '#000000',
strokeOpacity: 0.8,
strokeWeight: strokeWeightValue,
icons: [{
icon: directionArrow,
offset: '100%'
}]
});
Furthermore, every line gets a 'click' event with an infowindow bound to it:
google.maps.event.addListener(element, 'click', function(event) {
infowindow.setContent(content);
infowindow.setPosition(event.latLng);
infowindow.open(map);
})
Question: Is there a way around this? It seems like only the line is clickable but not the arrow.
Related
I'm creating a project for my internship, and I have some planes moving on a polyline in google maps as shown here.
First I tried to research for a click event when clicking the path symbol but I couldn't find anything because I need a marker. So then I tough when clicking on the polyline, but I can't find anything that works properly and I have almost no experience and that's why I am asking for help.
I have 4 of these and I need an event for each one because the infowindows will be different, I guess...
var GRU = new google.maps.Polyline({
path: [{lat: 38.771183, lng: -9.131135}, {lat: -23.6276104, lng: -46.6568016}], //Lis - GRU
strokeOpacity: 0.1,
icons: [{
icon: planeSymbol,
offset: '0'
}],
map: map
});
I will appreciate a lot any help you can give to me.
You can add event listener with addListener:
var handlePolyClick = function(eventArgs, polyLine) {
// here you can handle the poly
alert('clicked on ' + polyLine.sometitle);
};
google.maps.event.addListener(GRU, 'click', function(e) {
handlePolyClick(e, this);
});
Working fiddle is here.
P.S. you can find click's coordinates in e.latLng property of an event. Example with infowindow here.
I am currently trying to implement semantic zooming similar to the way shown in Mike Bostock demonstrates in this d3 example with the circle markers in the javascript google maps api. I cannot figure out how to change styles (radius, opacity) of these markers after they have already been created on the zoom action. Is there a way to do this without removing them and then recreating them with a different size?
// Overlay for eruptions
for (var eruption in eruptions) {
var coordinates = new google.maps.LatLng(eruptions[eruption].Latitude, eruptions[eruption].Longitude);
var eruptionCircle = new google.maps.Circle({
class: 'marker eruption',
strokeColor: ERUPTION_COLOR,
strokeOpacity: marker_border_opacity(),
strokeWeight: 2,
fillColor: ERUPTION_COLOR,
fillOpacity: marker_opacity(),
map: map,
center: coordinates,
radius: eruption_size(eruptions[eruption].VEI),
});
ERUPTIONS.push(eruptionCircle);
}
map.addListener('zoom_changed', function() {
var zoomLevel = map.getZoom();
// TODO - need to find a way of semantically zooming on these markers
});
You can use setOption
eruptionCircle.setOptions({radius: eruption_size(yourNewRadius)});
You have a mistake too (remove the last , form option this way
var eruptionCircle = new google.maps.Circle({
class: 'marker eruption',
strokeColor: ERUPTION_COLOR,
strokeOpacity: marker_border_opacity(),
strokeWeight: 2,
fillColor: ERUPTION_COLOR,
fillOpacity: marker_opacity(),
map: map,
center: coordinates,
radius: eruption_size(eruptions[eruption].VEI)
});
I have a map, and I draw a rectangle on it. Here is what I want: whenever my mouse enter that rectangle, open an infowindow, when my mouse leave, close the infowindow.
I have successfully created a map and drawn a rectangle. Here is my code:
var map;
function initialize() {
// Init map
var mapOptions = {
center: { lat: ***, lng: *** },
zoom: 13,
draggable: false,
scrollwheel: false,
zoomControl: false,
streetViewControl: false,
mapTypeControl: false,
disableDoubleClickZoom: true
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
google.maps.event.addListenerOnce(map, 'bounds_changed', function () {
drawGrid();
});
} // end initialize
function drawGrid() {
var rectangle = new google.maps.Rectangle({
strokeColor: '#000',
strokeWeight: 2,
fillOpacity: 0,
map: map,
bounds: new google.maps.LatLngBounds(sw1, ne1) //sw1 and ne1 is my variable
});
var infowindow = new google.maps.InfoWindow({
content: "Hello",
position: rectangle.getBounds().getCenter()
});
google.maps.event.addListener(rectangle, 'mouseover', function () {
infowindow.open(map);
});
google.maps.event.addListener(rectangle, 'mouseout', function () {
infowindow.close();
});
}
google.maps.event.addDomListener(window, 'load', initialize);
You can see the result below. The rectangle is the black one.
Now, the problems are:
Mouseover event is fired only when I let my mouse follow the green arrows.
Mouseout event is fired only when my mouse follow the green arrows (yes, from out to in, not in to out as expected), and it's fired twice.
Why do I encounter those problems? What did I do wrong? How to solve this problem? Thank you so much for your help.
There was a change to the way Firefox 39.0 handles mouse events. See issue 8278 in the issue tracker
Project Member #4 enoch...#google.com
Thanks for reporting this issue. Indeed, it appears that Firefox 39 has made changes to its mouse event, which is causing the API to behave incorrectly.
Status: Accepted
Owner: enoch...#google.com
Labels: Internal-20820906
Note that users have reported that v=3 (the release version) is working correctly and this issue only appears in v=3.exp (the "experimental" version).
I am using the Google Maps JavaScript API to create a heatmap layer. I would like to add mouseover events to 100+ locations on the map that will display an infowindow. This would get pretty cluttered if I used markers for every event, so I was hoping to find a way to eliminate markers altogether (although I did throw together an ugly mess of a solution in which a button will show/hide those markers). My first thought was to use the LatLngBounds. As a simple example:
var infowindow = new google.maps.InfoWindow(
{ content: "some info",
size: new google.maps.Size(50,50)
});
var southWest = new google.maps.LatLng(-31.203405,125.244141);
var northEast = new google.maps.LatLng(-25.363882,131.044922);
var loc = new google.maps.LatLngBounds(southWest,northEast);
google.maps.event.addListener(loc, 'mouseover', function() {
infowindow.open(map);
});
google.maps.event.addListener(loc, 'mouseout', function() {
infowindow.close();
});
For whatever reason, though, the mouseover event never seems to happen. Is there a problem with the code? Is there a better way to do this than by using LatLngBounds?
First of all, you should make a new rectangle with your bounds:
var southWest = new google.maps.LatLng(-31.203405,125.244141);
var northEast = new google.maps.LatLng(-25.363882,131.044922);
var loc = new google.maps.LatLngBounds(southWest,northEast);
var rectangle = new google.maps.Rectangle({
bounds: loc,
editable: false,
draggable: false,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
rectangle.setMap(map);
And then just use an event listener on that rectangle
google.maps.event.addListener(rectangle, 'mouseover', openInfoWindow);
function openInfoWindow(event) {
var ne = rectangle.getBounds().getNorthEast();
var sw = rectangle.getBounds().getSouthWest();
var content = 'Infowindow content';
// Set the info window's content and position.
infoWindow.setContent(contentString);
infoWindow.setPosition(ne);
infoWindow.open(map);
}
First post here, usually a reader not a poster but here goes!
Having a bit of trouble with 'click' events using the Google Maps API.
Here's the scenario:
Marker is placed on map, click event added to marker, works fine.
Another marker is added to the map directly on top of the existing marker with no click event. The click event for the original marker now no longer works! However, if I change the 'click' event to a 'mouseover' it works fine.
Code for first Marker:
var marker1 = new google.maps.Marker({
position: marker1[0],
map: map,
draggable: false,
icon: new google.maps.MarkerImage('img/' + type + '.png',
new google.maps.Size(16, 16),
new google.maps.Point(0,0),
new google.maps.Point(8, 8)
)
});
Code for Marker that gets overlayed on existing marker:
var marker2 = new google.maps.Marker({
position: position,
map: map,
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillOpacity: 0,
strokeOpacity: 1.0,
strokeColor: '#72008F',
strokeWeight: 3.0,
scale: 10
}
});
Code for Listener:
google.maps.event.addListener(marker, 'click', function(event) {
$("#IDhere").html("Some HTML here");
});
I solved my problem by way of work-around.
The issue as I see it was that defining the 'clickable' marker using "new google.maps.MarkerImage" made it part of the google maps canvas element.
Then when Markers defined using "google.maps.SymbolPath.CIRCLE" came along and were put on top of the clickable marker they are separate elements confined into Divs layered on top of the map Canvas element.
Therefor as #geocodezip rightly pointed out, the clickable marker (part of google maps canvas) was being hidden by the other marker in its Div.
My solution was to change the way i created the clickable marker. I used another Circle Symbol path and gave it a zIndex of 99999 so always on top.
Marker1 now looks like this
var marker = new google.maps.Marker({
position: marker1[0],
map: map,
draggable: false,
zIndex: 99999,
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillOpacity: 1,
fillColor: type,
strokeOpacity: 1,
strokeColor: '#000',
strokeWeight: 1 ,
scale: 5
}
});