Jump to content

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


kwood30
 Share

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>

 

 

 

Link to comment
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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...