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

ru_flylady

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

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

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

Ошибка в консоли моего браузера указывает на то, что не найден элемент, который я искал в 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>

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

Похожие темы	Дата
Laracasts] Learning Vue 1.0 - Step By Step	19.10.2024, 18:10
[seelentera] Никита Северинов - Javascript. Уровень 2	19.10.2024, 18:10
[Codedojo] JavaScript Паттерны проектирования (2018)	19.10.2024, 18:10
Курс По Angular.js - Javascript.ru	19.10.2024, 18:10
Реализация FCM JavaScript API	19.10.2024, 18:10
Как отобразить пустое значение как 00/00/0000?	19.10.2024, 18:10
JS-Accordion, не может (display="block") все остальные элементы панели.	19.10.2024, 18:10
Как использовать два if?	19.10.2024, 18:10
Немного задержите SVG при анимации прокрутки, а не сразу после ее появления на экране.	19.10.2024, 18:10
Остановить видео при модальном закрытии	19.10.2024, 18:10

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

ru_flylady

I AM

Интересно