allowing a user to input own info, into an 'info box' to a placed marker

kwood30 · February 23, 2016

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 done so far.

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

justsomeguy · February 23, 2016

Did you give up on the other forum?

addresses.forEach(function(address) {

That's the line you need to replace. Don't loop through addresses, use a counter to loop and get the address and other information inside the loop.

kwood30 · February 24, 2016

ok thank you, so with doing that, how do I link it to work with a <form> action for the user to input their own info to attach to the marker?

justsomeguy · February 24, 2016

First you need to change your form to add the other fields that people are supposed to fill out. You already have a submit button that calls the function, but you need to have it also cancel the form submission. Or, you could just remove the form and have the fields and button by themselves if you don't need to submit anything.

Sign In

allowing a user to input own info, into an 'info box' to a placed marker

Recommended Posts

kwood30

Link to comment

Share on other sites

justsomeguy

Link to comment

Share on other sites

kwood30

Link to comment

Share on other sites

justsomeguy

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity