Unique Info boxes attached to individual markers on google maps api

Question

I am trying to code a feature for my site that will allow a user to click down on the google map, a marker will appear. When the marker has appeared the user will click said marker and be able to fill in some information. I have this working.

However when the user clicks on another marker to go and edit it, the window for the previous marker does not open anymore. How can I edit an info window, save it, then edit another info window and be able to open the info window at any time of clicking?

Here is my JS code:

function initialize() {
  var latlng = new google.maps.LatLng(54.5, -7.0);
  var options = {
    zoom: 7,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map"), options);
  var html = "<table>" +
    "<tr><td>Country:</td> <td><input type='text' id='country'/> </td> </tr>" +
    "<tr><td>City:</td> <td><input type='text' id='city'/></td> </tr>" +
    "<tr><td>Duration:</td> <td><input type='text' id='duration'/></td> </tr>" +
    "<tr><td>Category:</td> <td><select id='category'>" +
    "<option value='city' SELECTED>City Break</option>" +
    "<option value='beach'>Beach Holiday</option>" +
    "<option value='romantic'>Romantic Holiday</option>" +
    "<option value='activity'>Activity Holiday</option>" +
    "<option value='site'>Site Seeing</option>" +
    "</select> </td></tr>" +
    "<tr><td></td><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>";
  infowindow = new google.maps.InfoWindow({
    content: html
  });

  google.maps.event.addListener(map, "click", function(event) {
    marker = new google.maps.Marker({
      position: event.latLng,
      map: map
    });
    infowindow.setContent(html);
    google.maps.event.addListener(marker, "click", function() {
      infowindow.open(map, marker);
    });
  });
}

function saveData() {
  var country = escape(document.getElementById("country").value);
  var duration = escape(document.getElementById("duration").value);
  var category = document.getElementById("category").value;
  var latlng = marker.getPosition();

  var url = "phpsqlinfo_addrow.php?country=" + country + "&city" + city + "&duration=" + duration +
    "&category=" + category + "&lat=" + latlng.lat() + "&lng=" + latlng.lng();
  downloadUrl(url, function(data, responseCode) {
    if (responseCode == 200 && data.length >= 1) {
      infowindow.close();
      document.getElementById("message").innerHTML = "Location added.";
    }
  });
}

function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
    new ActiveXObject('Microsoft.XMLHTTP') :
    new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request.responseText, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}

function doNothing() {}

Try to declare the infowindow variable in the global scope which in this case would be **outside** your initialize/saveData functions. Ie: `var infowindow;` You can just place this line **above** your initialize function. Try it and let me know. — MrUpsidown, Jan 05 '16 at 14:12
I am not quite sure how I would go about writing that. Sorry, I have only started coding this language and I am unsure about how to manage that, can you help me? — Aaron Sherry, Jan 05 '16 at 14:17
If you define a variable say `var a=1;` in a function called `myFunction()` you will not be able to use it in another function (unless you pass it as an argument). Because the scope of that variable is local and not global. See http://stackoverflow.com/a/500459/1238965 — MrUpsidown, Jan 05 '16 at 14:42

score 0 · Accepted Answer · answered Jan 05 '16 at 12:45

0

You should place the initialization of the infowindow inside the addListener as well as create a local variable for marker and infowindow.

google.maps.event.addListener(map, "click", function(event) {
    var marker = new google.maps.Marker({
          position: event.latLng,
          map: map
        });

    var infowindow = new google.maps.InfoWindow({
        content: html
    });

    infowindow.setContent(html);

    google.maps.event.addListener(marker, "click", function() {
          infowindow.open(map, marker);
        });
    });
}

answered Jan 05 '16 at 12:45

goblin

1,513
13
13

Why would you need to do that? – MrUpsidown Jan 05 '16 at 13:05
so that every marker and infowindow will have it's own instance and not replace the existing ones. Try it, I already tested that code. – goblin Jan 05 '16 at 13:12
Thank you very much, that worked a treat. However now the save and close wont work? any ideas as to why – Aaron Sherry Jan 05 '16 at 13:25
Because it's defined where @gRenzFries said it should be defined and you are using it in another function. So that's not a solution. Define `var infowindow` outside of your initialize function. Doing the way he suggested would create an infowindow object for each marker which is not what you usually want to do + the infowindow object will not be available in your `saveData` function. – MrUpsidown Jan 05 '16 at 13:34
@MrUpsidown It works as per her comment. only her can validate the issue. – goblin Jan 05 '16 at 13:35
"However now the save and close wont work" - I think this is quite clear, don't you think so? + read my comment above and you should understand why your code will not work. PS: Aaron is a male name so it's *him* not *her* ;-) – MrUpsidown Jan 05 '16 at 13:36
@MrUpsidown then its a different issue. – goblin Jan 05 '16 at 13:38
Sorry it's not. I am not saying that your code doesn't work. Only that your answer is somehow half correct. It will fix part of the issue. – MrUpsidown Jan 05 '16 at 13:40
MrUpsideDown thank you for the feedback, is there a solution that maybe you could help me with? I am struggling a bit here – Aaron Sherry Jan 05 '16 at 13:50
Yes I downvoted your answer. If you correct it I will remove my down vote and maybe even upvote it. – MrUpsidown Jan 05 '16 at 13:57
@MrUpsidown No need. I'm giving you the opportunity since you already edited the question and include the save and close button. (which never worked in the first place using the original code). Happy coding anyways! – goblin Jan 05 '16 at 14:54

Unique Info boxes attached to individual markers on google maps api

1 Answers1