Jump to content
Sign in to follow this  
kwood30

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

Recommended Posts

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>

 

 

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...