Having a Drop down menu with google maps api

**jadwal** · 06-22-2016, 02:47 AM

I'm trying to have users be able to search for a location from the search field and as a second option to have some locations in a dropdown menu, so visitors can choose from that as well.
now the second part is where im having trouble with this is my html code: and code pen link http://codepen.io/anon/pen/xOEEGj

Code:

<html>

<head>

    <meta name="keywords" http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="description" http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">

	<link href="https://www.googledrive.com/host/0B6erKxlMnhFDb0JXaVVzU1FWV0U?stylo.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://www.googledrive.com/host/0B6erKxlMnhFDdF9UNFJZeElCS1U?font-awesome.min.css">
	
    <script type="text/javascript" src="https://www.googledrive.com/host/0B6erKxlMnhFDeXdNNVBIaS1tQTA?PrayTimes.js"></script> 
	<script type="text/javascript" src="https://www.googledrive.com/host/0B6erKxlMnhFDa2pYaldtLUhUa2s?hijricalendar-kuwaiti.js"></script> 
	
</head>

<body onload="startTime();">
    <script type="text/javascript">
       /*Daily Prayer Timing Code Starts*/
	   
	   function getPrayerTimings(latitude, longitude) {
		prayTimes.setMethod('MWL');
		prayTimes.adjust( {asr: 'Standard', isha: '90 min'} );
		prayTimes.tune( {fajr: -90, shoroeq: 0, dhuhr: 0, asr: 0, maghrib: 0, isha: 0} );
		
           	var todayDate = new Date(); // today
            function prayerTimings(offset) {
                todayDate.setDate(todayDate.getDate() + offset);
                var times = prayTimes.getTimes(todayDate, [latitude, longitude]);
                var list = ['Fajr', 'Sunrise', 'Dhuhr', 'Asr', 'Maghrib', 'Isha'];
                var html = '<table id="dailyTimeTable">';
                html += '<tr class="qibla_map_bg_h"><td><span class="fajri"></span><br />الفجر<br />Fajr</td><td><span class="shoroeqi"></span><br />الشروق<br />Shoroeq</td><td><span class="dhuhri"></span><br />الظهر<br />Dhuhr</td><td><span class="asri"></span><br />العصر<br />Asr</td><td><span class="maghribi"></span><br />المغرب<br />Maghrib</td><td><span class="ishai"></span><br />العشاء<br />Isha</td></tr>';
                for (var i in list) {
                    html += '<td class="qibla_map_bg_tr">' + times[list[i].toLowerCase()] + '</td>';
                }
                html += '</tr></table>';
                document.getElementById('dailyTimeTable-Container').innerHTML = html;

                function $(id) {
                    return document.getElementById(id);
                }
            }

            function highlight() {
                var date = new Date();
                var thisminutes = date.getHours() * 60 + date.getMinutes();
                //thisminutes = 1119;
                var tbl = document.getElementById("dailyTimeTable")
                var cells0 = tbl.rows[0].cells;
                var cells1 = tbl.rows[1].cells;
                var help = [];
                for (var i = 0; i < cells1.length; i++) {
                    var currenttime = cells1[i].innerHTML.match(/([0-9][0-9]):([0-9][0-9])/);
                    if (currenttime) currentminutes = parseInt(currenttime[1]) * 60 + parseInt(currenttime[2]);
                    entry = {
                        currentminutes: currentminutes,
                        currentidx: i
                    };
                    help.push(entry);
                }
                help.sort(function (a, b) {
                    return a.currentminutes - b.currentminutes;
                });
                var foundnext = foundcurrent = false;
                var inext = icurrent = -1;
                for (var i = 0; i < help.length; i++) {
                    currentminutes = help[i].currentminutes;
                    currentidx = help[i].currentidx;
                    if (!foundnext && currentminutes > thisminutes) {
                        foundnext = true;
                        inext = currentidx;
                    }
                    if (currentminutes <= thisminutes) {
                        foundcurrent = true;
                        icurrent = currentidx;
                    }
                }
                if (!foundnext) inext = help[0].currentidx;
                if (!foundcurrent) icurrent = help[help.length - 1].currentidx;
                for (var i = 0; i < cells1.length; i++) {
                    if (i == inext) {
                        cells0[i].className = "next";
                        cells1[i].className = "next";
                    } else if (i == icurrent) {
                        cells0[i].className = "current";
                        cells1[i].className = "current";
                    } else {
                        cells0[i].className = "";
                        cells1[i].className = "";
                    }
                }
                window.setTimeout(highlight, 0)
            }
            prayerTimings(0);
            highlight();
        }
		/*Daily Prayer Timing Code Ends*/
	</script>
	
<div class="qibla_map_bg">
    

		<form class="form-signin">
		 <div class="flexContainer">
			<input type="search" id="search" name="search" placeholder="New York" autofocus="" required="">
			<button type="submit"><i class="icon-search"></i></button>
		<button type="submit" id="geo"> <i class="icon-screenshot"></i></button>
		</div>
		</form>
						<div class="wrapper">
						<div id="dailyTimeTable-Container"></div>
						</div>
							          <div id="map-html">
		  </div>
  
          <script id="map-tmpl" type="text/x-jquery-tmpl">
             <h4>{{city}}</h4>

              <iframe width="100%" height="200" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
                      src="http://maps.google.fr/maps?hl=fr&amp;q={{city}}&amp;ie=UTF8&amp;hq=&amp;hnear={{lat}},{{lng}}&amp;gl=fr&amp;t=m&amp;z=12&amp;ll={{lat}},{{lng}}&amp;output=embed&amp;iwloc=near">

                  <img src="http://cdn1.iconfinder.com/data/icons/Android-R2-png/512/Maps-Android-R.png"  width="256"
                       height="256"
                       alt="Google Maps/>

                      </iframe>


              <a href="http://maps.google.fr/maps?hl=fr&amp;q={{city}}&amp;ie=UTF8&amp;hq=&amp;hnear={{lat}},{{lng}}&amp;gl=fr&amp;t=m&amp;z=12&amp;ll={{lat}},{{lng}}&amp;iwloc=near" target="_blank">  <i class="icon-map-marker"></i> {{lat}},{{lng}} </a>
          </script>
			 
    </div> 
	<!-- /container -->

    <div>
        <ul id="multiCityList" class="nav nav-list well well-small"></ul>

        <script id="multiCityTmpl" type="text/x-jquery-tmpl">
            {{#cityItem}}
            <li class="city-item">
                <a href="#{{lat}}|{{lng}}|{{address}}" lat="{{lat}}" lng="{{lng}}" class="multiCity">
                    <i class="icon-map-marker"></i>{{address}}
                </a>
            </li>
            {{/cityItem}}
            <li class="removeCityList">
                <button class="btn" type="button">&times;</button>
            </li>
        </script>
    </div>

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://www.googledrive.com/host/0B6erKxlMnhFDUHlRTWlJYjFxZ2M?jquery.js"></script>

    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false&key=AIzaSyDx6yESNHPjUqcO3Xyw4dkWGbr7zLHN72E"></script>


     <script src="https://www.googledrive.com/host/0B6erKxlMnhFDeHBWb285QndaNHM?utils.js"></script>
    <script src="https://www.googledrive.com/host/0B6erKxlMnhFDR1VJU0c2LXNkZk0?utils-geo.js"></script>
    <script src="https://www.googledrive.com/host/0B6erKxlMnhFDb2MyUkpIMzhncEU?mustache.js"></script>
    <script src="https://www.googledrive.com/host/0B6erKxlMnhFDTHIya1pIcnp5eUU?main.js"></script>
    <script>
        var city = localStorage.getItem("city");
        var lat = localStorage.getItem("latitude");
        var lng = localStorage.getItem("longitude");
        if (!city) {
            city = "New York";
            lat = 40.7127837;
            lng = -74.00594130000002;
        }
        updateMap(city, lat, lng);
    </script>


  
</body>

</html>

</body>

</html>

tried adding this piece of code to my main js but it seems i'm missing out something

HTML:

Code:

<select id="location">
  <option>New York</option>
  <option>Washington DC</option>
</select>
<div id="map_canvas"></div>

js:

Code:

var geocoder;
var map;
var geoMarker;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(40.7128, 74.0059),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  geoMarker = new google.maps.Marker();
  geoMarker.setPosition(map.getCenter());
  geoMarker.setMap(map);

  $("#location").change(function() {
    var addr = ($('#location').val());

    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({
      'address': addr
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        geoMarker.setOptions({
          position: results[0].geometry.location,
        });
      } else {
        alert("Something got wrong " + status);
      }
    });
  });

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

and my main js which i think the above code should be placed in but having a hard time to figure out how to inter grade the two codes.
main js:

Code:

/**
 * Created with JetBrains WebStorm.
 * User: bilelz
 * Date: 17/04/13
 * Time: 22:24
 * To change this template use File | Settings | File Templates.
 */

var isAutocompleted = false;

$(document).ready(function() {
    autocompleteInit();
                       log("init");
    /* search */
    $('form').submit(function() {
        if(!isAutocompleted){
            $("#search").blur();
            getLatlngFromCity($("#search").val());
            log("typed from input search");
        }

        isAutocompleted = false; /* reset boolean value */
        return false;
    });


	/* geo localisation */
	
	// script for print geo link when focus in searchbox
	// $("#search").focus(function() {
		// $("#geo").addClass("show");
	// });	
	// $("#search").blur(function() {
		// $("#geo").removeClass("show");
	// });

	$("#geo").click(function(e) {
		$("#geo").removeClass("show");
		$("#container").removeClass("blur");

		infoGeo("");
		if(navigator.geolocation) {
			navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
		} else {
			infoGeo("Votre navigateur ne prend pas en compte la gÃ©olocalisation HTML5");
		}

		function successCallback(position) {
			
			getCityFromCoord(position.coords.latitude, position.coords.longitude);
			
			infoGeo("GÃ©olocalisation rÃ©ussie :-)");
			infoHide();
		};

		function errorCallback(error) {
			// if(getStorage("lastId") != undefined){
				// id = getStorage("lastId");
			// }else{		
				// id = "2988507" // Paris;
			// }			
			// getWeatherById(id);
			
			switch(error.code) {
				case error.PERMISSION_DENIED:
					infoGeo("L'utilisateur n'a pas autorisÃ© l'accÃ¨s Ã  sa position");
					break;
				case error.POSITION_UNAVAILABLE:
					infoGeo("L'emplacement de l'utilisateur n'a pas pu Ãªtre dÃ©terminÃ©");
					break;
				case error.TIMEOUT:
					infoGeo("Le service n'a pas rÃ©pondu Ã  temps");
					break;
			}			
		};
		
		return false;
	});
	
	/* geo localisation */

    /* print on not  #cityClearSearch button */
    $("#search").keyup(function() {
        if ($.trim($(this).val()) != "") {
            $("#cityClearSearch").removeClass("hide");
        } else {
            $("#cityClearSearch").addClass("hide");
            $(this).val(""); // trim space
        }
    });

    $("#search").on("blur", function (){
        $("#search").keyup();
    });

    $("#search").on("focus", function (){
        $("#search").keyup();
    });

    /* end : print on not #cityClearSearch button */



    $("#multiCityList").on("click", "a", function (){
        $('#multiCityList').html("").hide();
        updateMap($.trim($(this).text()), $(this).attr("lat"), $(this).attr("lng"));
        return false;
    });

    $("#multiCityList").on("click",".removeCityList", function (){
        $('#multiCityList').html("").hide();
    });

    $("*[type=reset]").on("click",function (){
        $('#multiCityList').html("").hide();
    });
});
function autocompleteInit() {


    var map;
    var geocoder;
    var input = document.getElementById('search');
    var options = {
        types : ['(cities)']
    };

    var autocomplete = new google.maps.places.Autocomplete(input, options);

    google.maps.event.addListener(autocomplete, 'place_changed', function() {
        try {

            var placeLat = getLatFromStr(autocomplete.getPlace().geometry.location.toString());
            var placeLng = getLngFromStr(autocomplete.getPlace().geometry.location.toString());
            updateMap($("#search").val(), placeLat, placeLng)
            $("#search").val("").blur();
            $('#multiCityList').html("").hide();
            log("autocomplete");
            isAutocompleted = true;
        } catch(e) {
            isAutocompleted = false;
            $('form').submit();
            log("catch maps autocomplete");
            log(e);
        }
    });

    google.maps.event.addDomListener(input, 'keydown', function(e) {
        if (e.keyCode == 13) {
            if (e.preventDefault) {
                e.preventDefault();
            } else {
                /* nothing */
            }
        }
    });
}

function updateMap(city, lat, lng){
    
    getPrayerTimings(lat, lng);

    localStorage.setItem("city", city);
    localStorage.setItem("latitude", lat);
    localStorage.setItem("longitude", lng);

    var tmpl = $("#map-tmpl").html();
    var html = Mustache.render(tmpl, {city:city, lat:lat, lng:lng});
    $("#map-html").html("").append(html);
}

any idea what i could do to make this work