jQuery + google maps + Elevation

playing with google maps v3 events, jQuery, icons from http://google-maps-icons.googlecode.com

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=true&amp;libraries=places&amp;geometry"></script>
<select id="dropdown">
  <option value="1" selected>Montenegro</option>
  <option value="2">Berane</option>
  <option value="3">Podgorica</option>
  <option value="4">Kolasin</option>
  <option value="5">Kotor</option>
  <option value="6">Bar</option>
  <option value="7">Ulcinj</option>
  <option value="8">Bijelo Polje</option>
  <option value="9">Rozaje</option>
  <option value="10">Mojkovac</option>
  <option value="11">Niksic</option>
  <option value="12">Danilovgrad</option>
  <option value="13">Budva</option>
  <option value="14">Sutomore</option>
  <option value="15">Plav</option>
  <option value="16">Gusinje</option>
  <option value="17">Andrijevica</option>
  <option value="18">Herceg Novi</option>
  <option value="19">Tivat</option>
  <option value="20">Zabljak</option>
</select>
<div id="info"></div>
<div class="map-container" style="width:100%;height: 500px">
  <div id="map" style="width:100%;height: 500px"></div>
  <!--the google map is loaded already-->
</div>

JavaScript

function initialize() {
  var map = new google.maps.Map(document.getElementById("map"));
  var geocoder = new google.maps.Geocoder();
  $("#dropdown").change(function() {
    address = $("#dropdown :selected")[0].text;
    geocodeAddress(address, geocoder, map, true);
  });
  var address = $("#dropdown :selected")[0].text;
  var timeout = 0;
  var count = 0;
  $("#dropdown option").each(function() {
    var address = $(this).text();
    console.log(address);
    if (count < 9) {
      geocodeAddress(address + ' ,Montenegro', geocoder, map, false);
    } else {
      timeout = timeout + 1000;
      setTimeout(function() {
        geocodeAddress(address + ' ,Montenegro', geocoder, map, false);
      }, timeout);
    }
    count++
  });
  geocodeAddress(address, geocoder, map, true);
}
google.maps.event.addDomListener(window, "load", initialize);

function geocodeAddress(address, geocoder, resultsMap, fitbounds) {
  document.getElementById('info').innerHTML = address;
  geocoder.geocode({
    'address': address
  }, function(results, status) {

    console.log(results);
    if (status === google.maps.GeocoderStatus.OK) {
      if (fitbounds) resultsMap.fitBounds(results[0].geometry.viewport);
      var marker = new google.maps.Marker({
        map: resultsMap,
        position: results[0].geometry.location
      });
      document.getElementById('info').innerHTML += "<br>" + results[0].geometry.location.toUrlValue(6);
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}