Having a Drop down menu with google maps api
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&q={{city}}&ie=UTF8&hq=&hnear={{lat}},{{lng}}&gl=fr&t=m&z=12&ll={{lat}},{{lng}}&output=embed&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&q={{city}}&ie=UTF8&hq=&hnear={{lat}},{{lng}}&gl=fr&t=m&z=12&ll={{lat}},{{lng}}&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">×</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
