vonlugar

Geoding Help and understand with map

Discussion created by vonlugar on Apr 21, 2014
Hey all, I'm fairly new to java script code let alone geo-coding. i have worked with python, c++ and HTML; but this style seems different from most of the things i call. Either way, I'm trying to code up a complex map for my company and i have no clue how to go about the next step my boss would like the map to do. I have a map with an array of tower locations, and a search box for the user to find there house in correspondence to that location. Now here's the part that's tricky; i want to set up a distance measure from the user's entry to any 1 tower they click on, and draw a line.
From what i could try to understand is that i could place an if statement under the search box command looking for a click event to anything in the array, but i get lost on where to fire the command and the event.

behold my self taught master piece of junk. can anyone help me out?


<html>
  <head>
    <meta name="Airlogic Towers" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>AirLogic Internet Services</title>
 
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -150px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
    </style>

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>

var geocoder;
var map;

//sets up map and center's at the given coords of LatLng with zoom
function initialize() {
  geocoder = new google.maps.Geocoder();
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(41.587837, -88.552369)
  }
  map = new google.maps.Map(document.getElementById('map-canvas'),
                                mapOptions);
        
  setMarkers(map, towers);
  
}

//location of all the towers to post on map
var towers = [
 ['Farnsworth', 41.800567, -88.236149, 1],
 ['River', 41.769271, -88.267275, 2],
 ['Bilter', 41.807507, -88.268381, 3],
 ['Wherli', 41.776106, -88.195084, 4],
 ['White Eagle', 41.723760, -88.227033, 5],
 ['Noggle', 41.892529, -88.474431, 6],
 ['Elburn', 41.858424, -88.486228, 7],
 ['Meredith', 41.899956, -88.539404, 8],
 ['Lilly Lake', 41.942502, -88.480883, 9],
 ['Monarch', 41.810804, -88.202030, 10],
 ['Newark', 41.551431, -88.529052, 11],
 ['Sandwich Airport', 41.638030, -88.649781, 12],
 ['West Streator', 41.164145, -88.850458, 13],
 ['Garfield', 41.085443, -88.956653, 14],
 ['Hawthorn Woods', 42.238181, -88.061728, 15],
 ['Lincolnshire', 42.179484, -87.927384, 16],
 ['West Chicago', 41.898558, -88.238109, 17],
 ['Ancona', 41.041675, -88.871266, 18],
 ['Blackstone', 41.085848, -88.691570, 19],
 ['Missal', 41.098638, -88.742878, 20],
 ['Ottawa', 41.309645, -88.812293, 21],
 ['Bristol', 41.704444, -88.433823, 22],
 ['Sandy Ford', 41.186347, -88.898994, 23],
 ['Budd', 41.099195, -88.620137, 24],
 ['Yorkville', 41.613766, -88.478104, 25],
 ['Manville', 41.055012, -88.789459, 26],
 ['Crystal Acres', 41.704474, -88.652227, 27],
 ['Mendota', 41.497617, -89.155302, 28],
 ['Lee', 41.844844, -88.923308, 29],
 ['Troy Grove', 41.458097, -89.085924, 30],
 ['Dimmick', 41.441074, -89.080560, 31],
 ['Triumph', 41.501387, -89.021032, 32],
 ['Sublette', 41.658940, -89.275703, 33],
 ['Lasalle 2', 41.368227, -89.098631, 34],
 ['Lasalle 1', 41.363623, -89.015177, 35],
 ['Ladd', 41.413006, -89.276323, 36],
 ['Sandwich South', 41.571261, -88.612381, 37],
 ['Verona', 41.185164, -88.490466, 38],
 ['Glendale', 41.906110, -88.096921, 39],
 ['Gurnee', 42.365999, -87.952262, 40],
 ['Millington', 41.566089, -88.608858, 41],
 ['Long Point', 40.977235, -88.892231, 42],
 ['Benson', 40.881944, -89.123333, 43],
 ['Vernon Hills', 42.224824, -87.942070, 44],
 ['Yorkville South', 41.563020, -88.369550, 45],
 ['Sandwich West', 41.675188, -88.699591, 46],
 ['Lostant', 41.163763, -89.008492, 47],
 ['Ransom', 41.156533, -88.652915, 48],
 ['TomahawkCreek', 41.380934, -89.083054, 49],
 ['North Ottawa', 41.389652, -88.835346, 50],
 ['The Clare', 41.897276, -87.626247, 51],
 ['Maier Silo', 41.789674, -88.475503, 52],
 ['Millbrook', 41.598182, -88.555093, 53],
 ['Rockford', 42.221944, -89.017386, 54],
 ['JOA', 41.540861, -88.034540, 55],
 ['M1W', 41.455251, -87.912483, 56],
 ['MAN', 41.253682, -87.833322, 57],
 ['BOU', 41.189544, -87.853652, 58],
 ['AND', 41.370934, -87.881654, 59],
 ['MokenaWT', 41.546742, -87.842067, 60],
 ['CHE', 41.001723, -87.910970, 61],
 ['JAK', 41.233411, -88.012137, 62],
 ['IRW', 41.052259, -87.983036, 63],
 ['ELW', 41.465461, -88.124407, 64],
 ['SKY', 41.381836, -87.925212, 65],
 ['Lehigh', 41.111691, -88.010145, 66],
 ['Plano', 41.665322, -88.576500, 67],
 ['Hampshire Seegers', 42.105038, -88.544057, 68],
 ['Plainfield', 41.637361, -88.209487, 69],
 ['Antioch', 42.480342, -88.195106, 70],
 ['ElPaso', 40.761475, -89.030424, 71],
 ['Minonk', 40.911847, -89.050233, 72],
 ['Prairie Center', 41.469902, -88.927184, 73]
];


function setMarkers(map, locations) {
//image for the tower markers
  var image = {
    url: 'http://weatherarc.com/img/green_balloon_google.png',

    size: new google.maps.Size(20, 20),

    origin: new google.maps.Point(0,0),

    anchor: new google.maps.Point(0, 0)
 
  };
  
  var infowindow = new google.maps.InfoWindow({maxWidth: 160});
  var maker;
  var markers = new Array();
 
//loop to set up each tower marker and infowindow from the list of 'tower'
  for (var i = 0; i < locations.length; i++) {
    var tower = locations[i];
    var myLatLng = new google.maps.LatLng(tower[1], tower[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: image,
        title: tower[0],
        zIndex: tower[3]
    });
 markers.push(marker);
 
 google.maps.event.addListener(marker, 'click', (function(marker, i) {
  return function() {
  infowindow.setContent(locations[i][0]);
  infowindow.open(map, marker);
  }
 })(marker, i));
  }
}


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

//search function, user input to find location
function codeAddress() {
  var address = document.getElementById('address').value;
  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('Search was not successful because: ' + status);
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
   <div id="panel">
    <input id="address" type="textbox">
    <input type="button" value="Find Location" onclick="codeAddress()">
 </div>
    <div id="map-canvas"></div>
  </body>
</html>

Outcomes