I need to open an infoWindow on customMarker.
The InfoWindow is not opening. "Click" doesn't work on:
$google.maps.event.addDomListener(overlay, 'click', function () {
console.log("test");
iw.open(map, this);
});
Here is my code:
$.getJSON(jsonShops, function(places) {
for (var i = 0, index = 0; i < places.shops.length; i++, index++) {
var bounds = new google.maps.LatLng(places.shops[i].lat, places.shops[i].lng);
var overlay = new MarkerSOverlay(bounds, alphabet.charAt(index), map);
var iw = new google.maps.InfoWindow({
content: "Simple",
position: bounds
});
google.maps.event.addDomListener(overlay, 'click', function () {
console.log("test");
iw.open(map, this);
});
}
Change addDomListener to addListener
google.maps.event.addListener(overlay, 'click', function () {
console.log("test");
iw.open(map, this);
});
addListener is for google.maps objects (like Markers), addDomListener is for DOM nodes.
Related
I do not know how to do in order to automatically close a InfoWindow when another opens.
function bindInfoWindow(marker, map, title, race, loc, org, web, link) {
var infoWindowVisible = (function () {
var currentlyVisible = false;
return function (visible) {
if (visible !== undefined) {
currentlyVisible = visible;
}
return currentlyVisible;
};
}());
iw = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function() {
if (infoWindowVisible()) {
iw.close();
infoWindowVisible(false);
} else {
var html= "<div style='color:#000;background-color:#fff;padding:5px;width:250px;'><h4>"+title+"</h4><p>Race</p><h4>"+race+"</h4><p>Location</p><h4>"+loc+"</h4><hr /><p>Organizzazione</p><h4>"+org+"</h4><a href='"+link+"'' >"+web+"<a></div>";
iw = new google.maps.InfoWindow({content:html});
iw.open(map,marker);
infoWindowVisible(true);
}
});
google.maps.event.addListener(iw, 'closeclick', function () {
infoWindowVisible(false);
});
}
I tried but I can not find my type cases.
If you only want one infowindow ever, only create one InfoWindow (in the global scope), reuse it and change its contents when a marker is clicked, close it if the user clicks on the map.
similar question
var iw = new google.maps.InfoWindow(); // single global infowindow
google.maps.event.addListener(map, 'click', function() {
iw.close();
});
function bindInfoWindow(marker, map, title, race, loc, org, web, link) {
google.maps.event.addListener(marker, 'click', function() {
iw.close();
var html= "<div style='color:#000;background-color:#fff;padding:5px;width:250px;'><h4>"+title+"</h4><p>Race</p><h4>"+race+"</h4><p>Location</p><h4>"+loc+"</h4><hr /><p>Organizzazione</p><h4>"+org+"</h4><a href='"+link+"'' >"+web+"<a></div>";
iw.setContent(html);
iw.open(map,marker);
});
}
working fiddle - different code as you didn't provide a complete example, demonstrates the concept.
I'm trying to use Shadowbox.js inside multiple InfoWindow :
function initialize() {
//create the Map
var map = new google.maps.Map(...);
//create the Markers
var marker = new google.maps.Marker(...);
var marker2 = new google.maps.Marker(...);
//create the InfoWindow
var infoWindow = new google.maps.InfoWindow();
//link the Markers to the InfoWindow
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent('Working shadowbox link');
infoWindow.open(map, marker);
});
google.maps.event.addListener(marker2, 'click', function() {
infoWindow.setContent('Broken shadowbox link');
infoWindow.open(map, marker2);
});
//enable Shadowbox
google.maps.event.addListener(infoWindow, 'domready', function() {
Shadowbox.init({
overlayOpacity: 0.8
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
As you can see, I've successfully made it work, but only for the first InfoWindow.
This seems to be caused by my event attachment, I'm using domready :
google.maps.event.addListener(infoWindow, 'domready', function() {});
I can't find another way to "reinit" Shadowbox for each InfoWindow.
Any advice ?
As usual, I find the solution I'm searching for just a few minutes after writing my question...
To get Shadowbox working on every InfoWindow : you need to call Shadowbox player manually.
Use a custom class instead of rel=shadowbox :
<a href="http://placehold.it/200x200.jpg" class="dyn-shadowbox">
Shadowbox link
</a>
Every time domready is triggered on an InfoWindow, manually attach an event listener to every .dyn-shadowbox link :
google.maps.event.addListener(infoWindow, 'domready', function() {
var dynlinks = document.getElementsByClassName('dyn-shadowbox');
var n = dynlinks.length;
for (var i = 0; i < n; i++) {
var link = dynlinks[i];
link.removeEventListener('click');
link.addEventListener('click', function(ev) {
ev.preventDefault();
Shadowbox.open({
link: link,
content: link.getAttribute('href'),
player: 'img',
title: ''
});
});
}
});
Updated JSFiddle
I am using below code to open up a infowindow in my map through ajax call
var openedInfoWindow = null;
var infoWindow = new google.maps.InfoWindow();
function profileInitialiser(marker, location) {
google.maps.event.addListener(marker, 'click', function(){
new Ajax.Request('/ajax/', {
parameters: {'action':'profileInfo', 'id':location.id},
onSuccess: function(transport){
addInfoWindow(marker, transport.responseText, location.id);
}
});
});
}
function addInfoWindow(marker, content, id) {
google.maps.event.addListener(marker, 'click', function () {
if (openedInfoWindow != null) {
openedInfoWindow.close();
}
infoWindow.setContent(content);
infoWindow.open(this.map, marker);
openedInfoWindow = infoWindow;
google.maps.event.addListener(infoWindow, 'closeclick', function() {
openedInfoWindow = null;
});
});
}
The above code, profileInitialiser function calling while loading on the marker in the google map.
At fist time, first click on the marker through ajax call, the content of the infowindow comes as response.
In the second click the infowindow will open. Next time onwards, clicking on the marker loading the infowindow comes in first click. Has any one had this bug before ? could some one help me to sort this issue please ?
Your AddInfoWindow function just adds a click listener to the marker when the data comes back from the server. You should also open the infoWindow with the content.
var openedInfoWindow = null;
var infoWindow = new google.maps.InfoWindow();
function profileInitialiser(marker, location) {
// only do this on the first click
google.maps.event.addListenerOnce(marker, 'click', function(){
new Ajax.Request('/ajax/', {
parameters: {'action':'profileInfo', 'id':location.id},
onSuccess: function(transport){
addInfoWindow(marker, transport.responseText, location.id);
}
});
});
}
function addInfoWindow(marker, content, id) {
// display the content when the marker is clicked
google.maps.event.addListener(marker, 'click', function () {
if (openedInfoWindow != null) {
openedInfoWindow.close();
}
infoWindow.setContent(content);
infoWindow.open(this.map, marker);
openedInfoWindow = infoWindow;
google.maps.event.addListener(infoWindow, 'closeclick', function() {
openedInfoWindow = null;
});
});
// click on the marker to display the newly added infowindow
google.maps.event.trigger(marker, 'click');
}
Why are you adding click event listener twice. Just remove the listener from your addInfoWindow function.
Here is the code:
function addInfoWindow(marker, content, id) {
if (openedInfoWindow != null) {
openedInfoWindow.close();
}
infoWindow.setContent(content);
infoWindow.open(this.map, marker);
openedInfoWindow = infoWindow;
google.maps.event.addListener(infoWindow, 'closeclick', function() {
openedInfoWindow = null;
});
}
I'm adding markers to my Google Map like this:
function createMarker(location, info) {
var marker = new google.maps.Marker({
map: map,
position: location
});
google.maps.event.addListener(marker, "click", function () {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({ content: info, title: 'test' });
infowindow.open(map, marker);
});
}
How can I access and open the markers without a manual click on the map?
I tried to save the marker object and do a marker.click() but it doesn't seem to work.
Any ideas?
Added:
var markers = new Array();
function getMarkerbyLocation(location) {
for (var i = 0; i < markers.length; i++) {
if (markers[i].getPosition().lat() == location.lat() && markers[i].getPosition().lng() == location.lng())
return markers[i];
}
}
Modified:
function createMarker(location, info) {
var marker = new google.maps.Marker({
map: map,
position: location
});
google.maps.event.addListener(marker, "click", function () {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({ content: info });
infowindow.open(map, marker);
});
// Modification here!
markers.push(marker);
}
Some event on the page executes the following:
google.maps.event.trigger(getMarkerbyLocation(new google.maps.LatLng(53.43306, 9.98556)), 'click');
I have a map with multiple polylines and would like to open a line-specific-infowindow when clicking the line.
So far my code only shows the content of the last iteration.
I found two very nice examples of what I want but after hours of trying I am still no further.
Example 1: http://srsz750.appspot.com/api3/polylines-multiple.html
Example 2: http://www.geocodezip.com/v3_GenericMapBrowser.asp?filename=flights090414.xml
So your are my last shot :-S
Here is my code that shows only the content of the last iteration:
for (var i = 0; i < locations.length; i++) {
var route = locations[i]; // locations is an array of route-arrays.
//route is an array with details. route[0] contains the description.
var imageStart = 'img/rijder.png';
var polyOptions = {
strokeColor: '#0000FF',
strokeOpacity: 1.0,
strokeWeight: 3
}
poly = new google.maps.Polyline(polyOptions, info);
var path = poly.getPath();
//line text
var info = route[0];
google.maps.event.addListener(poly, 'click', function(event) {
infowindow.setContent(info);
infowindow.position = event.latLng;
infowindow.open(map);
});
//startmarker
var startLatLng = new google.maps.LatLng(route[1], route[2]);
var smarker = new google.maps.Marker({
position: startLatLng,
map: map,
icon: imageStart,
title: route[7],
html: route[0]
});
path.push(startLatLng);
//starttext
google.maps.event.addListener(smarker, "click", function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
//endmarker
var endLatLng = new google.maps.LatLng(route[4], route[5]);
var emarker = new google.maps.Marker({
position: endLatLng,
map: map,
icon: imageEnd,
title: route[8],
html: route[3]
});
path.push(endLatLng);
//endtext
google.maps.event.addListener(emarker, "click", function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
//close line and put on the map
poly.setMap(map);
}
}
And here is the code I would expect to work but all lines disappeared (only the relevant code, I also added a mouseover function):
//line text
google.maps.event.addListener(poly, 'click', (function(event,index){
return function(){
var routeinfw = locations[index];
var inf = routeinfw[0];
infowindow.setContent(inf);
infowindow.position = mouselocation;
infowindow.open(map);
};
})(event,i));
//starticon
Just like in the example you posted, create a function to create the click events listeners and call it from inside the locations loop:
function createInfoWindow(poly,content) {
google.maps.event.addListener(poly, 'click', function(event) {
infowindow.content = content;
infowindow.position = event.latLng;
infowindow.open(map);
});
}
And you can call this at the end of the loop:
createInfoWindow(poly,info);