Saving an input into InfoWindow entered by a user on a marker/pin

I am trying to implement a program where a user enter a description in the info window which pop ups when you click on a marker/pin(previously inserted by user upon clicking). Now code works fine and a textfield appears on an infowindow and takes text as an input but the problem is when i close that text field and click on the same marker again it looses it content which was last entered. Below is the code i wrote with the help of an expert on this forum. P.S: I am trying to learn javascript an i am new so if this question is below belt i apologize.

<!DOCTYPE html>
<html>
  <head>
    <title>Accessing arguments in UI events</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
function initialize() {
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(65.0126304,25.4703071)
  };
  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  google.maps.event.addListener(map, 'click', function(e) {
    placeMarker(e.latLng, map);
  });
}

function placeMarker(position, map) {
  var marker = new google.maps.Marker({
    position: position,
    map: map
  });
var infowindow = new google.maps.InfoWindow({
   content : "<input type='text'>"
});

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

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

Answers


Here is the way:

  1. Define a global counter which increases after each marker was added,
  2. Give current value of that counter to infowindow so that, we can use it to give an id to inputs and make sure they are unique,
  3. Add an event closeclick to infowindows that updates the input content with the filled information when infowindows are being closed.
  4. Increment index after these.

Solution

1- Place index = 0; before function initialize() {

2- Update your infowindow creator with this:

var infowindow = new google.maps.InfoWindow({ content : "<input id='myText" + index + "' type='text'>", id : index });

3- Add another event after marker click event:

google.maps.event.addListener( infowindow, "closeclick", function(e) { infowindow.setContent("<input id='myText" + infowindow.id + "' type='text' value='" + document.getElementById("myText" + infowindow.id).value + "'>"); });

4- Add index++; after closeclick event.

This may not be the best practice but it should work.


Need Your Help

Extension Generic methods in .NET (VB.NET)

.net vb.net generics extension-methods

I want to implement an extension method in VB.NET that will clone an object of type T.

textbox onchange call php function

php forms function onchange

How can i call a php function from onchange on an html form textbox? I have tried

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.