jQuery + google maps + Elevation
playing with google maps v3 events, jQuery, icons from http://google-maps-icons.googlecode.com
HTML
<script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=true&libraries=places&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);
});
var address = $("#dropdown :selected")[0].text;
$("#dropdown option").each(function ()
{
setTimeout(function () {
geocodeAddress($(this).text() + ' ,Montenegro', geocoder, map);
}, 1000);
});
geocodeAddress(address, geocoder, map);
}
google.maps.event.addDomListener(window, "load", initialize);
function geocodeAddress(address, geocoder, resultsMap) {
document.getElementById('info').innerHTML = address;
geocoder.geocode({
'address': address
}, function (results, status) {
console.log(results);
if (status === google.maps.GeocoderStatus.OK) {
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);
}
});
}