Jump to content

Assigning elapsed date and time to a placed marker


kwood30

Recommended Posts

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. Here is my coding, If anyone can guide me in where I have gone wrong i would appreciate it thanks.

<!DOCTYPE html>
<html>

  <head>
  
    <!-- 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>   
  </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="Or Reset if None" value="Show All"><br>
                           <input type="button" id="removemarker" value="Remove Marker"></div>
                           
    

</body>  
</html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...