Problems trying to code for user to input own info/reference to their placed markers

Please see below in the attached document my coding so far. I have managed to code so a user is
able to place two makers simultaneously on a map. What I am now trying
to do is be able to allow the user to add a reference number of their
own input to the markers they have just placed that will then show when
they mouse over the markers. I am struggling to do this as when i add
types of coding to try it, it knocks out the coding that all ready works well.
Any suggestions would be appreciated.

                <!DOCTYPE html>

           <!-- 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 up206b = {};

 var map;

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

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

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

up206b.geocode = function() 
{

  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);
      var marker = new google.maps.Marker({
        map: map, 
        position: results[0].geometry.location
      });
    } 
    else 
    {
      alert("Geocode was not successful for the following reason: " + status);
    }
   });
    }
  });
 }

   </script> 

 <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>

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.