This question extends an answer here that uses domready. The extension is an attempt to include a second infowindow with a slightly different name: inwindow vs infowindow. The first question is, given the answerer's first "rule" -- "Create only one instance of the infowindow object and use setContent() method to modify its content." -- can there be a second infowindow object?
If so, then what is wrong with my attempt at creating inwindow as shown below? inwindow appears when the map is clicked, but clicking its "Submit" button does not seem to do anything.
A working JSFiddle.com version is here (at least it shows a map).
Some global vars and objects are next.
var map
var infowindow = new google.maps.InfoWindow();
var inwindow = new google.maps.InfoWindow();
var markers = [];
var counter = 0;
initialize() is excerpted next.
google.maps.event.addListener(map, 'click', function (event) {
addMarker(event.latLng);
});
google.maps.event.addListener(inwindow, 'domready', function () {
var button = document.getElementById('inputButton');
var input = document.getElementById('nameinput').value;
button.onsubmit = function() {
marker.title = input;
inwindow.close();
};
});
google.maps.event.addListener(infowindow, 'domready', function () {
var button = document.getElementById('deleteButton');
var id = parseInt(button.getAttribute('data-id'));
button.onclick = function() {
deleteMarker(id);
};
});
}
function addMarker(location) {
counter++;
var inputForm = 'Name: <input type="text" id="nameinput" size="31" maxlength="31" tabindex="1"/>' + '<input type="button" id="inputButton" value="Submit">';
var marker = new google.maps.Marker({
position: location,
map: map,
id: counter
});
inwindow.setContent(inputForm);
inwindow.open(map, marker);
markers.push(marker);
var deleteButton = '<button id="deleteButton" data-id="' + counter + '">Delete</button>';
google.maps.event.addListener(marker, 'rightclick', function () {
infowindow.setContent(deleteButton);
infowindow.open(map, marker);
});
}
function deleteMarker(markerId) {
for (var i=0; i<markers.length; i++) {
if (markers[i].id === markerId) {
markers[i].setMap(null);
}
}
}
You can have as many infowindows as you want. The rules I gave you there were more like hints (hence the italic font). You can always adapt it to your needs.
Now you have a few issues in your code:
onsubmit event is triggered when the submit button in a form is clicked. The action should be on the form, not on the button. But you don't have a form here. You can use onclick event instead (like for the delete button).
You get the input value when the infowindow is ready (domready) not after the user has filled the field. Therefore it will always be empty.
You set marker.title = xxx but marker is not available here, plus, you should use the setTitle() method to change a marker title.
Why didn't you use the same technique that I (and you) used for the delete button action? (using the Id, etc.) I suggest that you try to understand what happens there and adapt it to the part where you set the marker title.
If you are still stuck, let me know and I will explain further!
Edit:
JSFiddle demo
Note that there is no tabindex defined on the inputs and buttons, and that I used .focus() to set the focus on the input or button when the infowindow opens.
Hope this helps.
Related
I'm trying to make a click work in infowindow in google maps. I'm unable to achieve with the following code. Can somebody tell me where I'm doing wrong?
loadmap(){
var locations = [];var map;
for(var i=0;i<this.data.length; i++){
locations.push({
'location_name':this.data[i].location_name,
});
}
var marker; var icon;
map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: new google.maps.LatLng(40.4637, 3.7492),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
map.markers = [];
var infowindow = new google.maps.InfoWindow({
enableEventPropagation: true
});
for (var i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng('lat', 'lng'),
map: map,
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(
'<span>'+locations[i].location_name+'</span><br/>'+
'<input type="button" id="infowindow_submit" name="submit" value ="submit"/>'
);
infowindow.open(map, marker);
};
})(marker, i));
google.maps.event.addListener(infowindow, 'domready', function() {
$("#infowindow_submit").submit(function() {
console.log("hi!");
});
});
}
}
I think your issue is you are using a button but trying to add a form event listener.
$("#infowindow_submit").submit(() => console.log("hi!")) works for forms but not for single buttons.
Are you looking for $("#infowindow_submit").click(() => console.log("hi!"))?
I believe your comment may be contradictory which is what led me to notice the above issue.
nothing is happening when I click the button in infoWindow. click
handler for marker is being executed but not the infowindow domready
part
If you are clicking a button in the Info Window, the domready event should have fired already. I thought you couldn't get the Info Window opened at all. Guess I didn't read that right the first time... You don't have a console.log there and didn't say you tried to put a breakpoint there. The console.log you do have is inside the submit event but you don't have one inside the domready event function. Hopefully that domready is actually getting fired.
In this page I use the following script:
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {center:new google.maps.LatLng(latitudeMid,longitudeMid),zoom:15,mapTypeId:google.maps.MapTypeId.ROADMAP,streetViewControl:false,mapTypeControl:true,scaleControl:true,scaleControlOptions:{position:google.maps.ControlPosition.TOP_RIGHT}};
var map = new google.maps.Map(mapCanvas, mapOptions);
var markers=[]; //<=========================================== inside function initialize()
var i;
var insertion;
var previousMarker;
for (i = 0; i < fotoCount; i++) {
var myLatLng=new google.maps.LatLng(Latituden[i], Longituden[i]);
var marker = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:'00ff00',text:Letters[i]}),position:myLatLng,map:map});
marker.set('zIndex', -i);
marker.myIndex = i;
markers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
var insertion="";
insertion='<img src=\"http://www.pdavis.nl/Ams/'.concat(Bestanden[this.myIndex],'.jpg\"></img>');
insertion=insertion.concat('<table class=width100><tr><td>Bestand: ',Bestanden[this.myIndex],'</td><td class=pright>Lokatie: ',Latituden[this.myIndex],' °N., ',Longituden[this.myIndex],' °E. (',Letters[this.myIndex],')</td>');
insertion=insertion.concat('<td class=pright>Genomen: ',Datums[this.myIndex],'</td></tr><td colspan=3>Object: ',Objecten[this.myIndex],'</td></table>');
$('#photo').html(insertion);
if(previousMarker!=null){previousMarker.styleIcon.set('color', '00ff00')};
this.styleIcon.set('color', 'ff0000');
thisMarker=this.myIndex;
previousMarker=this;
});
}
google.maps.event.trigger(markers[0], 'click');
}
google.maps.event.addDomListener(window, 'load', initialize);
Clicking on a marker highlights the selected marker (turns red) and shows the relevant photo. The two buttons Vorige and Volgende (Previous and Next, to select previous or next photo) obviously don't work because the array markers[] is local to function initialize():
function Next() {
thisMarker++;
if (thisMarker>=fotoCount) {thisMarker=0};
// following line not working
google.maps.event.trigger(markers[thisMarker], 'click');
}
function Previous() {
thisMarker--;
if (thisMarker==0) {thisMarker=fotoCount-1};
// following line not working
google.maps.event.trigger(markers[thisMarker], 'click');
}
The obvious fix is to move "var markers=[]" outside function initialize() (this page) to make this array global, but now the button highlighting (button "A" red upon start; clicked button goes red) does not work. What am I doing wrong here?
The only weird thing is not that when you pass the index 0 to the maximum the click event explodes because he is sending a negative value, then change that and wonder if it is -1, if true passes the greater index - 1 (Excepcion: Cannot read property '__e3ae_' of undefined)
function Previous() {
thisMarker--;
if (thisMarker==-1) {thisMarker=fotoCount-1};
// following line not working
google.maps.event.trigger(markers[thisMarker], 'click');
}
Fiddle example
sorry for my English
I have a function that loops an array of markers and assigns click events to all of them.
for(var key in markers){
clickEvent(markers[key], sekolah[j].show, sekolah[j].hide, key);
}
function clickEvent(mark, showArr, hideArr, key){
var listener = google.maps.event.addListener(mark, 'click', function() {
//does a lot of stuff
});
}
What I would like to do is to remove/disable all click events when any marker has been clicked (so that no two markers can be clicked sequentially without resetting the map first). The click events would be enabled again when the user resets the map.
This is the function to reset the map:
google.maps.event.addListener(map, "click", function(){
setAllMap(map); //Shows all markers
//and a lot of stuff
});
I have tried using addListenerOnce, but that didn't work. I have also tried this suggestion from another post, but the result was the same as using addListenerOnce.
Is there a way to achieve this?
Thank you.
PS this is how I created markers:
var newMark = new google.maps.Marker({
map: map,
position: pos,
id: ids,
title: name,
icon: "res/schoolf.png"
});;
markers[ids] = newMark;
I have a weird problem and maybe I am just not seeing it clearly. It definitely always helps to have others look at my code. Anyways, I have a drop down menu with options in it, needless to say, onchange it calls a function to open an infowindow. The listener for the click works perfectly fine when displaying the info window, but the handleSelected() function does not display anything.:
<select size='37' id='dpMenu' onchange='handleSelected(this)'>
Now I have an array for my markers outside of my function that creates the markers.
var gmarkers = [];
var oldInfoWin;
var map;
function createEpiMarker(map,point,epi_icon,html,name,detail,iqrid) {
var epimarker = new google.maps.Marker({
position: point,
map: map,
icon: epi_icon
});
epimarker.infowindow = new google.maps.InfoWindow({content: html });
google.maps.event.addListener(epimarker, "click", function() {
epimarker.infowindow.open(map, epimarker);
oldInfoWin = epimarker.infowindow;
infoWindowOpen = true;
});
gmarkers.push(epimarker);
}
This code here handles the dropdown menu selection:
function handleSelected(opt){
var i = opt[opt.selectedIndex].index - 1;
if(i != -1){
gmarkers[i].infowindow.open(map, gmarkers[i]);
oldInfoWin = gmarkers[i].infowindow;
infoWindowOpen = true;
}
}
I have problem with script, can someone help me?
//Add event to google maps click => open marker.infobox
for(var marker in markersWithArray){
var lastInfoWindow; //Get lastInfoWindow for close google maps infowindow
var markerI = markersWithArray[marker]; //Get marker from loop
var infoWindow = markerI.infoWindow; //get infoWindow from marker, work prefectly
console.log(infoWindow) // => all time good, object with
// info box. All time unique id and content.
google.maps.event.addListener(markerI, 'click', function() {
console.log(infoWindow); //Problem here, object too, but id and content have
//a last value what recorded on top (console.log)
//last value of cycle
if(lastInfoWindow)
lastInfoWindow.close();
infoWindow.open(map, this);
lastInfoWindow = infoWindow;
});
}
Can anyone tell me how to get value in cycle to event "google.maps.event.addListener" ??
Thx :).
If your marker has an infowindow as a property (I don't think it is a documented property, but your question implies it exists), this should work:
google.maps.event.addListener(markerI, 'click', function() {
console.log(this.infoWindow);
if(lastInfoWindow)
lastInfoWindow.close();
this.infoWindow.open(map, this);
lastInfoWindow = this.infoWindow;
});