using a regular counter loop for user to input own info to a placed marker

**kwood30** · 02-21-2016, 05:53 PM

I am trying to allow a user to input their own info in to their place make, say a reference number for example, but am struggling to do so. I believe the way for this is a regular counter loop, but i am not sure how and where to put it and even if that is the right thing to do. Can anyone help me with this please. The code below is what I have managed to do so far.

Code:

<!DOCTYPE html>
<html>

  <head>
  
 

    <!-- Google Maps and Places API -->
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>

    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    <script type="text/javascript">    
      
var markers = [];

function createMarker(latlng, html, map) {
  var infowindow = new google.maps.InfoWindow({
    content: html
  });
  var marker = new google.maps.Marker({
    map: map,
    position: latlng
  });
  marker.addListener('mouseover', function() {
    infowindow.open(map, this);
  });
  marker.addListener('mouseout', function() {
    infowindow.close();
  });
  markers.push(marker);
}

//declare namespace
var up206b = {};

//declare map
var map;

function trace(message) {
  if (typeof console != 'undefined') {
    console.log(message);
  }
}

up206b.initialize = function() {
  var latlng = new google.maps.LatLng(52.136436, -0.460739);
  var myOptions = {
    zoom: 13,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  up206b.geocode();
}

var geocoder = new google.maps.Geocoder();

up206b.geocode = function() {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
  }
  markers = [];
  var bounds = new google.maps.LatLngBounds();
  var addresses = [$('#address').val(), $('#address2').val()];

  addresses.forEach(function(address) {
    if (address) {
      geocoder.geocode({
        'address': address
      }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          map.setCenter(results[0].geometry.location);
          createMarker(results[0].geometry.location, address, map);
          bounds.extend(results[0].geometry.location);
          map.fitBounds(bounds);
        } else {
          alert("Geocode was not successful for the following reason: " + status);
        }
      });
    }
  });
}


    </script> 
  </head>
  <body onload="up206b.initialize()"> 

    <div style="top: 0; right: 0; width:380px; height: 500px; float:right; padding-left:10px; padding-right:10px;"> 
      <h1 align="center">Map Search</h1>   

      <div style="border:1px solid #ccc; background:#e5e5e5; padding:10px;" >
       
       <form >
        <br>
     	Location 1 <input type="text" id="address">
     	<br>
        <br>
     	Location 2 
     	<input type="text" id="address2">
        <br>
        <br>
        <input type="button" value="Submit" onClick="up206b.geocode()">
      </form>
      </div>

    </div> 

    <div id="map_canvas" style="height: 500px; width: 500px; float:right"></div> 

  </body>  
</html>

**jscheuer1** · 02-21-2016, 08:35 PM

Not sure what you're getting at. The code you have appears to work. What exactly is the problem? One thing, sensor is deprecated, so it's best to remove it (highlighted):

Code:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>

But since this is only a deprecation, it's not currently hurting anything. And, as I say, the code seems to work quite well. I hear that you want to create a reference number, and - yes, that's not happening. But to what end would this reference number be? Is it so that in the future the same and/or other users could retrieve the same results from that number without having to re-enter the place name(s)? Something else?

In any case, that sort of thing implies either some sort of storage or some intrinsic extant numbering system that can be co-opted for that purpose. Storage can be achieved client side with cookies and/or local storage. But at that rate, why not just store the search itself? And regardless, client side storage can easily be lost and is not available across devices (possible exception if one uses a cloud based/accessible browser) or even on the same device if a different browser is used. If some other sort of storage (server side) is desired, something other than javascript will be needed (like PHP, or asp, etc.).

If you are storing locally with cookies or whatever, no loops would be needed, you could just use the next available number for that person. If you want a universal reference number, that would depend upon the api (if it even provides for that), or upon a server side system that could be devised.

If you have thought about and/or know about some of these things, could you clarify what you want to do. If not, could you please be more specific about what you envision the user experience being? Say, would they get a number and then later be able to enter that number for the same result as the initial more verbose search? Is that the idea, or do you have something else in mind?

**kwood30** · 02-22-2016, 10:04 AM

Thank you for your reply and I appreciate your time and in depth response. I am not really needing any data stored, it will be just to work whilst the user is on at that time, if they re enter the page again at a later time for example they would just start again.
What my general goal is, is for the user to be able to submit two separate locations that then are simultaneously marked with a mouse over 'info box' which i have currently achieved myself. What my end goal is, is to be able to then allow that user to submit a reference number to each marker so when the markers are moused over the markers will display the reference number entered by the user, but then also following this when the user selects(clicks on) one of the two placed markers the 'information box' is also displayed in a separate <div></div> at the left side of the map.
I hope this makes more sense and that you can help and guide me?
Many thanks

**jscheuer1** · 02-22-2016, 04:07 PM

OK, still not clear to me, but is this something like you are looking for? Additions highlighted, when using this updated page, look in the upper left corner for the supplemental info div when hovering a marker:

Code:

<!DOCTYPE html>
<html>

  <head>
  
<style type="text/css">
#supplementwindow {
	display: none;
	position: absolute;
	left: 10px;
	top: 10px;
}
</style> 

    <!-- Google Maps and Places API -->
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>

    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    <script type="text/javascript">    
      
var markers = [];

function createMarker(latlng, html, map) {
  var infowindow = new google.maps.InfoWindow({
    content: html
  });
  var marker = new google.maps.Marker({
    map: map,
    position: latlng
  });
  marker.addListener('mouseover', function() {
    infowindow.open(map, this);
    $('#supplementwindow').html(latlng + '<br>' + html).fadeIn();
  });
  marker.addListener('mouseout', function() {
    infowindow.close();
    $('#supplementwindow').fadeOut();
  });
  markers.push(marker);
}

//declare namespace
var up206b = {};

//declare map
var map;

function trace(message) {
  if (typeof console != 'undefined') {
    console.log(message);
  }
}

up206b.initialize = function() {
  var latlng = new google.maps.LatLng(52.136436, -0.460739);
  var myOptions = {
    zoom: 13,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  up206b.geocode();
}

var geocoder = new google.maps.Geocoder();

up206b.geocode = function() {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
  }
  markers = [];
  var bounds = new google.maps.LatLngBounds();
  var addresses = [$('#address').val(), $('#address2').val()];

  addresses.forEach(function(address) {
    if (address) {
      geocoder.geocode({
        'address': address
      }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          map.setCenter(results[0].geometry.location);
          createMarker(results[0].geometry.location, address, map);
          bounds.extend(results[0].geometry.location);
          map.fitBounds(bounds);
        } else {
          alert("Geocode was not successful for the following reason: " + status);
        }
      });
    }
  });
}


    </script> 
  </head>
  <body onload="up206b.initialize()"> 

    <div style="top: 0; right: 0; width:380px; height: 500px; float:right; padding-left:10px; padding-right:10px;"> 
      <h1 align="center">Map Search</h1>   

      <div style="border:1px solid #ccc; background:#e5e5e5; padding:10px;" >
       
       <form >
        <br>
     	Location 1 <input type="text" id="address">
     	<br>
        <br>
     	Location 2 
     	<input type="text" id="address2">
        <br>
        <br>
        <input type="button" value="Submit" onClick="up206b.geocode()">
      </form>
      </div>

    </div> 

    <div id="map_canvas" style="height: 500px; width: 500px; float:right"></div> 
<div id="supplementwindow"></div>
  </body>  
</html>

**kwood30** · 02-22-2016, 08:52 PM

Thank you ever so much as that is part of what I was wanting.
The part that I still would like is the user interaction. Hopefully this will make more sense.
Currently when you mouse over the markers that have been placed by the user through submitting either a location or postcode, an information box appears with the postcode in it and now is also displayed next to the map thanks to your help. That information box I would like the user to be able to change it, by entering reference number that they can submit and it replaces the postcode in that information box with whatever they have submitted. Hopefully this is a better explanation of what I want to do lol

**jscheuer1** · 02-22-2016, 10:23 PM

I'm pretty sure we can get the information flowing in both directions. It would just be another submission, just one that doesn't use the form, which is only a convenient way to submit information in the first place. The javascript coding is what does the real work anyway. I'm still trying to fully understand the user experience you want people to have. It sounds like this supplemental info box would have to remain after mouseout of the marker and be able to be edited. And then, as a result of that, change the marker? Is that the point? If so, what exactly is meant by "change it, by entering reference number that they can submit and it replaces the postcode" Where did they get this reference number? I used the latitude and longitude, as those are readily available and shouldn't be too hard to reverse to an actual location (though the name or postal code of that location might not be available, only its coordinates on the map) but we could play around and see.

**kwood30** · 02-23-2016, 10:13 AM

Not to change the marker just the information displayed when mouse overed. Basically what I am trying to get the end result to look like and do is have three input fields, first and second input field for marker loaction and third input field for a reference number then the submit button. When the input fields are completed by a user the markers will appear and when mouse overed the inputted reference number will show.
I have managed the first two input fields just not the third. Have been research with not much luck. I have come across this, but I am not sure what to do with it and whether it would do what i need.
Having fields called "address1", "reference1", "address2", "reference2", etc. Then use a regular for loop, e.g. for (i = 1; i <= number_of_fields; i++), and use that in variable to get each pair of fields to make the marker and assign the mouse handlers. What are your thoughts. Does this help make a better understand on what I am trying to accomplish? I really to appreciate your help

**jscheuer1** · 02-23-2016, 03:57 PM

I'm getting a better idea. We can add one or two more fields. I'm laughing a little because first you say 3 fields (2 locations and a reference number), then you say 4 fields (2 locations, each with a reference number). It would help to know which. What would this reference number be? Would it be just any number the user decides to put in? If that's it, it would be easy to use it in the popup when it's moused over, either one for each marker (four total fields) or one that is shown for both of them (three total fields). As for a loop, I think there already is a loop for the markers, we can use that, simply get it to do something different with the reference numbers (if the four input scheme) or ignore it and use it for both markers (the three input scheme) so which is it? And again, is this number(s) arbitrary, just something the user dreams up? If not, where would it come from?

**kwood30** · 02-23-2016, 04:30 PM

The four fields was from the example I found online. Its the three input scheme that I would like to implement. But would be interested to know for the four scheme too, but don't worry if you don't want too, it just helps with my learning and development. It is for what ever number or text a user 'dreams up'. Also I am not sure if I can post anymore as it states I only get 5 posts as a new comer which is strange, so not sure if I would be able to reply to your next post, so if i can't post i will click the thanks on your next comment so you know lol. again I am really grateful for your help.

**jscheuer1** · 02-23-2016, 06:21 PM

You can post again, it means that after 5 posts you become the next level, also a certain amount of time is required though before that happens. Looks like you have it though, as you're a junior coder now, no longer a beginner (less than 5 posts was descriptive, not a limit). What you read was either poorly worded, or you misunderstood it.

OK, so we will start with three inputs, reference arbitrary and user defined, with the same reference number/string appearing in both marker's popup. I will keep the additional popup for now, as I've been playing with it, it's easier to get rid of than to bring back and can always be commented out or disabled in other ways. I may have time to do the coding later today. Tomorrow probably at the latest.