Assigning elapsed date and time to a placed marker

I have done some research into adding date and time elpsing. There
seem to be a few different ways it can be done, but I am having trouble
fitting it in to work for me.
I have managed it so the the map is still displayed and my county
selction function works fine, but where I have tried to incorporate the
time and date with the marker placement it hasn’t worked not does the
placement of the marker now either.
The error in my browser console states no element found which I google
searched with no luck of a resolution exxept for a firefox debug.
I also looked through here too, again with no luck.
Here is my coding, If anyone can guide me in where I have gone wrong i
would appreciate it thanks.

[code]

<!-- Google Maps and Places API -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></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>   
<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>
    <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>


[/code]

There are actually quite a few problems with this code that’ll prevent it from running:

  • Some of the code runs before the page has finished loading, so the form submit handler never gets attached
  • Your submit button doesn’'t actually submit the form (change the type to ‘submit’)
  • Your form inputs don’t have the .address class, so they don’t get selected inside the submit handler:

Regarding the first point, it’s good practice to move all your <script> tags to the bottom of the page, just before the closing </body> tag. This way, you don’t even need to wrap any code in jQuery’s document ready function (jQuery(function($){})), as the script won’t be run until the page is loaded. I’d personally also move your code into a separate .js file for easier maintenance.

All you need to do to get the current time is to create a Date with new Date().
To find the time elapsed from two dates you can subtract them

var date1 = new Date()
// some time passes
var date2 = new Date()
var millisecondsPassed = date2 - date1

Then you can go from milliseconds to minutes and seconds with simple math.

If you’re doing a lot of date manipulation you should use moment which can do things like diffs and formatting.

Here is my coding, If anyone can guide me in where I have gone wrong i
would appreciate it thanks.

It’s frustrating to watch you keep throwing out the work you’ve done on earlier threads, having a single object for your bounds is a better approach than a case statement.

Thank you guys for your inputs. I will use them to try and rectify my problems and see what I can do. I am really new to this and am trying to do harder projects than I should i guess but its how I learn better.

It’s frustrating to watch you keep throwing out the work you’ve done on
earlier threads, having a single object for your bounds is a better
approach than a case statement.

What do you actually mean? I should post the complete porject for help and not do it insection like i have?

No, don’t worry. Keep going and post questions whenever you’re stuck.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.