Назначение истекшей даты и времени размещенному маркеру

Tsunia

Я провел небольшое исследование по добавлению даты и времени.

Кажется, есть несколько разных способов это сделать, но мне трудно адаптировать их под себя.

Мне удалось это сделать, поэтому карта по-прежнему отображается, и моя функция выбора округа работает нормально, но там, где я пытался объединить время и дату с размещением маркера, это не сработало, и размещение маркера теперь не работает.

Ошибка в консоли моего браузера указывает на то, что не найден элемент, который я искал в Google, но безуспешно, за исключением отладки Firefox.

Вот мой код.

Если кто-нибудь может подсказать мне, где я ошибся, я был бы признателен, спасибо.

 
<!DOCTYPE html>
<html>

 <head>

 <!-- Google Maps and Places API -->
 <script type="text/javascript" src="[URL='https://lumtu.com/yti/ZwYYwZXNodHRwOi8vbWFwcy5nb29nbGVhcGlzLmNvbS9tYXBzL2FwaS9qcz9saWJyYXJpZXM9cGxhGc9']http://maps.googleapis.com/maps/api/js?libraries=places[/URL]"></script>

 <!-- jQuery -->
 <script src="[URL='https://lumtu.com/yti/agLLganNodHRwczovL2FqYXguZ29vZ2xlYXBpcy5jb20vYWpheC9saWJzL2pxdWVyeS8xLjcuMi9qcXVlcnkubWluWbu']https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js[/URL]"></script>

 <script type="text/javascript"> 

var markers = [];

function elapsed(rfd) {
 var rs = (new Date().getTime() - rfd.getTime()) / 1000,
 days = Math.floor(rs / 86400),
 hours = Math.floor((rs - (days * 86400 )) / 3600),
 minutes = Math.floor((rs - (days * 86400 ) - (hours * 3600 )) / 60),
 secs = Math.floor((rs - (days * 86400 ) - (hours * 3600 ) - (minutes * 60))),

 fet = secs + 's';
 if(minutes){fet = minutes + 'm' + ' ' + fet;}
 if(hours){fet = hours + 'h' + ' ' + fet;}
 if(days){fet = days + ' Day' + (days > 1? 's' : '') + ' ' + fet;}
 return 'Created: ' + rfd.toLocaleTimeString().toLowerCase() + ',<br>' + fet + ' ago';
}
function createMarker(latlng, html, map) {

 var ref = $.trim($('#reference').val()),
 infowindow = new google.maps.InfoWindow({
 content: ref || html
 }),
 marker = new google.maps.Marker({
 map: map,
 time : new Date(),
 position: latlng,
 html: html,
 icon: defaultPin,
 infowindow: infowindow
 }),
 $tm = $('#themarkers').append('<option value="' + html + '" title="' + infowindow.content + '">' + html + '</option>');
 $tm.get(0).selectedIndex = 0;
 marker.addListener('mouseover', function() {
 clearInterval(infowindow.timer);
 infowindow.setContent((ref || html) + '<br>' + elapsed(marker.time));
 $('#supplementwindow').html(infowindow.content).fadeIn();
 infowindow.timer = setInterval(function(){
 infowindow.setContent((ref || html) + '<br>' + elapsed(marker.time));
 $('#supplementwindow').html(infowindow.content);
 }, 300);
 infowindow.open(map, this);
 });
 marker.addListener('mouseout', function() {
 clearInterval(infowindow.timer);
 infowindow.close();
 $('#supplementwindow').fadeOut();
 });
 marker.addListener('click', function() {
 var oe = this.optel;
 $tm.get(0).selectedIndex = $('option', $tm).index(oe);
 $tm.trigger('change');
 });
 marker.optel = $('option', $tm).last();
 $tm.get(0).size = $('option', $tm).length;
 markers.push(marker);
}

var up206b = {};

var map;

function trace(message) {
 if (typeof console != 'undefined') {
 console.log(message);
 }
}

up206b.initialize = function() {
 var latlng = new google.maps.LatLng(52.136436, -0.460739);
 var myOptions = {
 zoom: 13,
 center: latlng,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 };
 map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 }

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

$('#formcont form').submit(function(e){
 var addresses = $('.address', this);
 addresses = [addresses.eq(0).val(), addresses.eq(1).val()];
 addresses.forEach(function(address, refnum) {
 if (address) {
 geocoder.geocode({
 'address': address
 }, function(results, status) {
 if (status == google.maps.GeocoderStatus.OK) {
 map.setCenter(results[0].geometry.location);
 createMarker(results[0].geometry.location, address, map, refnum);
 bounds.extend(results[0].geometry.location);
 map.fitBounds(bounds);
 } else {
 alert("Geocode was not successful for the following reason: " + status);
 }
 });
 }
 });
 e.preventDefault();
});
jQuery(function($){
 $('#removemarker').click(function(){
 var tm = $('#themarkers'), si = tm.get(0).options.selectedIndex, $o = $('option', tm).eq(si), i = $o.val();
 if(!i){return;}
 $.each(markers, function(idx, v){
 if(v.html === i){
 v.setMap(null);
 markers.splice(idx, 1);
 return false;
 }
 });
 $o.remove();
 bounds = new google.maps.LatLngBounds();
 if(markers.length){
 $.each(markers, function(i, v){
 bounds.extend(v.position);
 });
 map.fitBounds(bounds);
 }
 if(markers.length < 2){
 map.setZoom(markers.length? 13 : 8);
 }
 });
 $('#themarkers').change(function(){
 this.title = this.options[this.options.selectedIndex].title;
 var i = this.value;
 if(!i){return;}
 $.each(markers, function(idx, v){
 if(v.html === i){
 map.setCenter(v.position);
 map.setZoom(10);
 return false;
 }
 });
 });
 $('#showall').click(function(){
 $('#themarkers').get(0).selectedIndex = 0;
 if(!markers.length){
 map.setCenter(new google.maps.LatLng(52.136436, -0.460739));
 map.setZoom(13);
 return;
 }
 map.fitBounds(bounds);
 if(markers.length === 1){
 map.setZoom(13);
 }
 });
});

 </script> 
 </head>
 <body onload="up206b.initialize()">

 <div style="width:300px; height: 500px; float:right; padding-left:10px; padding-right:10px; margin: 50px 90px 50px 75px">
 <h1 align="center">Map Search</h1> 

 <div id="formcont" style="border:1px solid #ccc; background:#e5e5e5; padding:10px;" align="center" >

 <form >
 <br>
 Location 1 <input type="text" id="address">
 <br>
 <br>
 Location 2
 <input type="text" id="address2">
 <br>
 <br>
 Reference
 <input type="text" id="reference">
 <br>
 <br>
 <input type="button" value="Submit" onClick="up206b.geocode()">
 </form>
 </div>

<div id="menu" style=" position: absolute; margin: 45px 89px;" >

 <select id="counties" >
<option value="">Select County</option>
 <option value="bedfordshire">Bedfordshire</option>
 <option value="buckinghamshire">Buckinghamshire</option>
 <option value="cambridgeshire">Cambridgeshire</option> 
 <option value="hertfordshire">Hertfordshire</option>
 <option value="northamptonshire">Northamptonshire</option>
 </select>
 </div>

 <script type="text/javascript">
 $("#counties").on("change",function(){
var cnt=$(this).val();
var bounds = new google.maps.LatLngBounds();
switch(cnt){
case "bedfordshire":
bounds.extend(new google.maps.LatLng(
 52.22, -0.41));
bounds.extend(new google.maps.LatLng(51.8797, -0.4176));
break;
case "buckinghamshire":
bounds.extend(new google.maps.LatLng(52.18, -0.83));
bounds.extend(new google.maps.LatLng(51.9206978, -0.6529431));
break;
case "cambridgeshire":
bounds.extend(new google.maps.LatLng(52.29, -0.13));
bounds.extend(new google.maps.LatLng(52.082174, -0.029477));
break;
case "hertfordshire":
bounds.extend(new google.maps.LatLng(52.082174, -0.029477));
bounds.extend(new google.maps.LatLng(51.8031689, -0.208661));
break;
case "northamptonshire":
bounds.extend(new google.maps.LatLng(52.492298, -0.684233 ));
bounds.extend(new google.maps.LatLng(52.09, -1.03));
break;
}
map.fitBounds(bounds);

})

 </script>

 </div>

 <div id="map_canvas" style="height: 500px; width: 500px; float:right; margin:20px 75px;"></div>

<div id="supplementwindow" style="border:1px solid #ccc; background:#e5e5e5; align-content:center; float:left; position:absolute; margin:200px 0px 200px 200px; padding: 5px; border-radius: 12px;" >
<input type="button" value="Assign">

</div>

<div id="menu2" style="position: absolute; right: 200px; top: 450px; border: 1px solid #bbb; padding: 5px;
 border-radius: 12px;"><select id="themarkers"><option value="">Select Marker</option>
 </select><br>
 <input type="button" id="showall" title="Или сброс, если нет" value="Show All"><br>
 <input type="button" id="removemarker" value="Remove Marker"></div>

</body> 
</html>

Код (разметка):

Похожие темы	Дата
Angulr V2.0.1 – Шаблон Администратора Angularjs, Bootstrap	19.12.2024, 05:12
MsAgent JavaScript Editor скачать	19.12.2024, 05:12
[Степан Суворов, Игорь Непипенко] Продвинутый курс по Angular (2018)	19.12.2024, 05:12
[jQuery] Циклы For и каждый цикл при оптимизации эффективности	19.12.2024, 05:12
Выражение регулярного выражения JS	19.12.2024, 05:12
Заключите ключевые слова в двойные элементы	19.12.2024, 05:12
Как преобразовать этот код «ПРОМТ» для ввода данных из «IFRAME/POPUP»?	19.12.2024, 05:12
Проверка формы без перезагрузки с помощью javascript	19.12.2024, 05:12
Секреты JavaScript ниндзя (2015)	19.12.2024, 05:12
[CBS] Javascript Advanced	19.12.2024, 05:12

Назначение истекшей даты и времени размещенному маркеру

Tsunia

I AM

Интересно