Develop Reference

Google Maps Polyline Arrow not clickable if poiting to itself

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.

Google Maps GeoComplete with GeoJson

I am struggling to get Google Maps to show me the data stored in a GeoJSON object. If I use a click event on the polygon it works first time. Code below:
// Get the GeoJSON file from the server
HTTP.get(Meteor.absoluteUrl("/geo.json"), function(err,result) {
GoogleMaps.maps.fibreMap.instance.data.loadGeoJson("/geo.json");
});
// Add style and colouring to the map
GoogleMaps.maps.fibreMap.instance.data.setStyle(function(feature) {
// Get the Fibrehood Status
var status = feature.getProperty('status');
// Add colour accoring to status
if (status == "live") {
opacity = 0.65;
} else if (status == "build") {
opacity = 0.4;
} else if (status == "register_i") {
opacity = 0.2;
}
// Return the correct styling
return ({
fillColor: '#ec008c',
strokeColor: '#ec008c',
strokeOpacity: 0.35,
strokeWeight: 0,
fillOpacity: opacity
});
});
GoogleMaps.maps.fibreMap.instance.data.addListener('click', function(event) {
var hood = event.feature.getProperty('name');
var status = event.feature.getProperty('status');
console.log(hood + " : " + status);
});
However, when trying to use GeoComplete to drop a pin on an address, it does not run. I know that this should be triggered with some sort of event, like a marker dropping on the map or a Dom Element changing, but I cannot figure it out.
Does anyone have any insight into how to trigger events from the DOM or dropping a marker onto the map? I am a bit of a noob and would really appreciate any help.
Thanks
Mike

Does anyone have any insight into how to trigger events from the DOM or dropping a marker onto the map?
Sure, there is. Google Maps JS API has a well-documented example of working with map events and map markers.
In this example a marker will drop on the map where you clicked using the 'click event'.
// This event listener calls addMarker() when the map is clicked.
google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng, map);
});
// Add a marker at the center of the map.
addMarker(bangalore, map);
}
// Adds a marker to the map.
function addMarker(location, map) {
// Add the marker at the clicked location, and add the next-available label
// from the array of alphabetical characters.
var marker = new google.maps.Marker({
position: location,
label: labels[labelIndex++ % labels.length],
map: map
});
}
Full demo is here.
Here's a link to a sample for Listening to DOM Events:
https://developers.google.com/maps/documentation/javascript/examples/event-domListener

Why have I click twice on a marker on FireFox? [duplicate]

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).

removing default mouseover tooltip from marker in google-maps

I have created an application for showing an Information Window popup for markers, The application is working fine and the popup is showing correctly but the only solution is that along with the custom Information Window popup when under mouse-over, default popup with html tag is showing like as shown below.
JSFiddle
Can anyone please tell me some solution for this
My code is as given below
var infowindow = new google.maps.InfoWindow();
function point(name, lat, long) {
var self = this;
self.name = name;
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, long),
title: name,
map: map,
draggable: true
});
google.maps.event.addListener(marker, 'mouseover', function () {
infowindow.setContent(marker.title);
infowindow.open(map, marker);
}.bind(this));
google.maps.event.addListener(marker, 'mouseout', function () {
infowindow.close();
}.bind(this));
}
var map = new google.maps.Map(document.getElementById('googleMap'), {
zoom: 5,
center: new google.maps.LatLng(55, 11),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var viewModel = {
points: ko.observableArray([
new point('<div>Test1<br>Test5</div>', 55, 11),
new point('Test2', 56, 12),
new point('Test3', 57, 13)])
};
function addPoint() {
console.log(viewModel.points().length);
for (var i = 0; i < viewModel.points().length; i++)
{
console.log(i);
console.log(viewModel.points().marker.title);
}
viewModel.points.push(new point('a', 58, 14));
}
ko.applyBindings(viewModel);

You could manually remove the element title attribute on mouseover.
Try changing
google.maps.event.addListener(marker, 'mouseover', function () {
To
google.maps.event.addListener(marker, 'mouseover', function (e) {
e.ya.target.removeAttribute('title');
Also for Edge, you need to be change it to:
e.ya.target.parentElement.removeAttribute('title')
JSFiddle Link (Google Maps API not working)

It appears that the title of your marker is set to the html content of your pop up window.
When you create the marker object, give it a title attribute of what you would like to be displayed (i.e. name of your location...)
var marker = new google.maps.Marker({
position: whateverpositionyouset,
title: whatevertitleyouwant,
map: map
})

I have been taking advantage of this thread in working on almost the same problem. I am able to get the Google Maps API to properly display European accented glyphs in the pop-up display when a marker is clicked, but the same encoded text string is not properly rendered on mouseover.
So, after looking at the helpful code example in JSFiddle, and not being able to use that suggested technique for removing the 'title' text, it finally became clear to me what MrUpsidown was suggesting when he thought we might just change the name of the property being displayed as a title. I did not realize that the definition of the reserved property 'title' was "text to be displayed on hover." So, the simplest solution is to use a property such as 'myTitle' in the Marker options list. When there is no title property, hovering becomes a non-event.

Google maps v3 API markers dissapears when closing its InfoWindow (InfoBubble)

I am pretty new to JavaScript and the google maps API. I cannot figure out what is wrong.
The InfoWindow is actually a class I found "InfoBubble".
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html/
Here is the situation:
1. I create my map and add a 'click' event. The event creates Markers.
2. I create one global infoWindow.
3. I click the map, a Marker appears.
4. I click the map, a Marker appears.
5. I click the map, a Marker appears. Step 3-5 can be repeated lots and lots.
6. I click marker number X
6.1. An infoWindow pops up.
7. I click marker number Y
7.1. The infoWindow is closed. (.close())
7.2. Its content and position is changed
7.3. It is opened on the new position (.open(map,marker))
7.4. Also Marker number X is removed.
Try it yourself: http://dl.dropbox.com/u/6084360/test/index.html
Why is step 7.4. happening? After it has happened I can click markers however I feel like without anything disappearing. WHY?
I have tried debugging somewhat via Google Chrome but after I do step 7.3 it takes me into some minified code and I get lost.
Here is the line which removes the marker. I have no idea why it removes it or how to know where to start.
R.addDomListenerOnce=function(a,b,c,d){var e=R[yc](a,b,function(){e[wb]();return c[Cc](this,arguments)},d);return e};R.R=function(a,b,c,d){c=cf(c,d);return R[yc](a,b,c)};function cf(a,b){return function(c){return b[oc](a,c,this)}}R.bind=function(a,b,c,d){return R[G](a,b,P(c,d))};R.addListenerOnce=function(a,b,c){var d=R[G](a,b,function(){d[wb]();return c[Cc](this,arguments)});return d};R.forward=function(a,b,c){return R[G](a,b,df(b,c))};R.ua=function(a,b,c,d){return R[yc](a,b,df(b,c,!d))};
My code:
var times = 0;
var treasureLocation = new google.maps.LatLng(62.05350309096103, 15.373047874999997);
var map, infoBubble = null;
function initialize()
{
// Create the actual map.
map = new google.maps.Map(document.getElementById("map_canvas"),
{
zoom: 4,
center: new google.maps.LatLng(62.05350309096103, 15.373047874999997),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
);
infoBubble = new InfoBubble({
disableAutoPan: true
});
// Add an eventlistener to the map.
google.maps.event.addListener
(
map,
'click',
function(ev)
{
addMarker(ev);
}
);
}
function addMarker(ev)
{
// Get the distance.
var distance = getDistance( ev.latLng , treasureLocation );
// Skriv ut vart man klickade.
document.getElementById("click_info").innerHTML = "Du klickade " + distance + " ifrån skatten, försök igen!";
// Create a marker
var marker = new google.maps.Marker({
position: ev.latLng,
map: map,
clickable: true,
title: "Härifån är det bara " + distance + " till skatten!",
icon: "shovel.png"
});
// Hook the click on the created marker to show the created popup
google.maps.event.addListener
(
marker,
'click',
function(ev)
{
if( infoBubble != null ){infoBubble.close();}
infoBubble.setContent(marker.title);
infoBubble.setPosition(marker.position);
infoBubble.open(map, marker);
}
);
}

I can't really explain why but seems like infoBubble.setPosition(marker.position); is causing trouble. Just Delete it. You are using infoBubble.open(map, marker); to define bubble position, so you don't rly need it.