Assigning entered times to marks that are colour coded for time frame

I am trying to find out if at all possible how I would go about being able to assign a date and time to a marker placed on google maps through a form function. This will then display that on the marker but also with a color coded time frame. So when this info is added to the marker, when it is moused over say 1hr later it would state the number of mins or hrs ago it was entered and also be the colour assigned to the time, for example if the color yellow was for less than 2hrs ago then the marker will be yellow if it becomes 6hrs later then it will be a different color and so on. Does this make sense, and is it possible? Just need some help and ideas. I am guessing will need to use some sort of looping, and variable coding?? Any input would be appreciated. Thanks

You seem to love loops, but unless you are processing more than one thing at a time, the usually aren't needed.

Code:

---

marker.time = new Date();

---

That (above code) (assuming you're still using the same or similar code we discussed before, where the variable marker stands for the specific marker being created at any given moment) would assign it a javascript date object from which one could later extract any information you might want to know about how old it is.

As for color coding and displaying the result. You would need rules for that in a 'if, if else, if else . . .' chain or via using the javascript switch construct to determine at any given moment what color that info should be displayed in. The mouseover event could be the trigger for that (the figuring and the displaying) action.

If you want more help, please supply or link to the exact current code you're using so we can work from there.

Its seems that way lol. Learning steps at a time. Plenty I want to do but taking it slow as its all learning for me.
Thanks for your input. It is to inbed in what we were previously doing.
I will have a go with it and have some attempts and will then come back to you with etc support if that is ok?

Sure, that's fine. Let me know if you have any questions. I just ask that if you want specific help that you let me see the version of the code you are most interested in applying this to at that time as it could make a considerable difference in how exactly to go about things.

what would i be looking at in ways of assigning colour to a marker where the information is added. So where i have the geo marked with a inputted reference, and mouse overed to view that in a seperate window (which we have already accomplised) but i then want an 'assigned' button in that window that pops up when mouse overed so when selected the marker is assigned a colour (just one colour). Dose that make sense lol

I'm not sure why, but at the moment it looks like one can only find out the time elapsed from marker creation until first mouseover into the infowindow popup. After that, the continuing increment of time is available to the supplemental window I had created for some versions of this, but not for the infowindow itself. Now, it's possible that we could replace the info window with the supplement window, I'm just not sure of that at the moment. It would not have the auto map movement if the content of the popup doesn't fit in the current map area if the infowindow needed that though, at least I don't think it would/could, maybe. And there might be a way around recalibrating the time for the native infowindow, to make that work.

What I would recommend though, given what I'm currently seeing, is to keep the popup on the map static. Include in it only the static reference and/or place name/post code, and possibly time first created. Then, in the supplemental window you could have whatever effects and information as regards elapsed time you might want.

I'll play around with it some more to see if there's a way around the apparent limitation I'm seeing. In the meantime, consider whether or not what I'm currently proposing would be sufficient.

Oh, and since this is looking tricky, as I thought it might. What code are you using? Remember - I asked for that if you wanted more specific help.

Looks like this will work (let me know if you have questions):

Code:

---

<!DOCTYPE html>
<html>

  <head>
 
<style type="text/css">
#supplementwindow {
        display: none;
        position: absolute;
        right: 150px;
        top: 350px;
        border: 1px solid #bbb;
        padding: 5px;
        border-radius: 12px;
}
</style>

    <!-- 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 colorConvertTime(millis){
        var mins = Math.round(millis/60/60/60);
        switch(mins) {
            case 0:
                return '<span style="color: red;">about ' + mins + ' mins elapsed</span>';
                break;
            case 1:
                return '<span style="color: blue;">about ' + mins + ' mins elapsed</span>';
                break;
            default:
                return '<span style="color: green;">about ' + mins + ' mins elapsed</span>';
        }
}

function createMarker(latlng, html, map, refnum) {
  var latlngtxt = (latlng.lat() + ',' + latlng.lng()).split(',');
  $.each(latlngtxt, function(i, v){
        v = Math.round(v);
        v += v > 0? (i? 'E' : 'N') : (i? 'W' : 'S');
        latlngtxt[i] = v.replace(/^-/, '');
  });
  latlngtxt = latlngtxt.join(', ');
  var ref = $.trim($('#reference').val());
  //ref = ref? ref + '<br>' : '';
  var infowindow = new google.maps.InfoWindow({
    content: ref || html //+ '#' + (markers.length + 1) + '<br>' + html + '<br>' + latlngtxt
  });
  var marker = new google.maps.Marker({
    map: map,
    time : new Date(),
    position: latlng,
    html: html,
    infowindow: infowindow
  });
  marker.addListener('mouseover', function() {
    var content = infowindow.content + '<br>' + colorConvertTime(new Date().getTime() - this.time.getTime());
    infowindow.open(map, marker);
    $('#supplementwindow').html(content).fadeIn();
    $('.gm-style-iw div div').html(content);
  });
  marker.addListener('mouseout', function() {
    infowindow.close();
    $('#supplementwindow').fadeOut();
  });
  markers.push(marker);
}

//declare namespace
var up206b = {};

//declare map
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);
  up206b.geocode();
}

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

up206b.geocode = function() {
  /* for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
  }
  markers = []; */
  var addresses = [$('#address').val(), $('#address2').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);
        }
      });
    }
  });
}

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

    <div style="top: 0; right: 0; width:380px; height: 500px; float:right; padding-left:10px; padding-right:10px;">
      <h1 align="center">Map Search</h1> 

      <div style="border:1px solid #ccc; background:#e5e5e5; padding:10px;" >
     
      <form >
        <br>
            Location 1 <input type="text" id="address">
            <br>
        <br>
        <!-- Reference&nbsp;
            <input type="text" class="reference">
        <br>
        <br> -->
            Location 2
            <input type="text" id="address2">
        <br>
        <br>
        Reference&nbsp;
            <input type="text" id="reference">
        <br>
        <br>
        <input type="button" value="Submit" onClick="up206b.geocode()">
      </form>
      </div>

    </div>

    <div id="map_canvas" style="height: 500px; width: 500px; float:right"></div>
<div id="supplementwindow"></div>
  </body> 
</html>

---

Thanks for your input but its slightly different to what I am asking for.
I have been working on my design today and I just can get the java side of it. As you can see below what I have done. HTML party is easy for me. I have created basically what I need but just can't get the programming for it, and now I have lost the map, through the coding that I have added for the drop down menu for counties.
What I am trying to great a drop down menu for the counties that i have entered so that when they are selected to zooms to that countie. I would preferably like couty border lines shown too, but not sure if thats possible.
With the assign button i have created in the supplement window, is what I want showing when a mouse over is done and if they assaign that selected marker it changes the colour of the marker to say yellow.
I am still wanting the time and date stated in the info window as to when the reference was assigned to the marker. Does this make sense? I hope you can see what I have done and that you feel i am progressing with my Java lol. Many thanks again for your help.

Code:

---

<!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 createMarker(latlng, html, map, refnum) {
  var latlngtxt = (latlng.lat() + ',' + latlng.lng()).split(',');
  $.each(latlngtxt, function(i, v){
        v = Math.round(v);
        v += v > 0? (i? 'E' : 'N') : (i? 'W' : 'S');
        latlngtxt[i] = v.replace(/^-/, '');
  });
  latlngtxt = latlngtxt.join(', ');
  var ref = $.trim($('#reference').val());
  //ref = ref? ref + '<br>' : '';
  var infowindow = new google.maps.InfoWindow({
    content: ref || html //+ '#' + (markers.length + 1) + '<br>' + html + '<br>' + latlngtxt
  });
  var marker = new google.maps.Marker({
    map: map,
    position: latlng,
    html: html,
    infowindow: infowindow
  });
  marker.addListener('mouseover', function() {
    infowindow.open(map, this);
    $('#supplementwindow').html(infowindow.content).fadeIn();
  });
  marker.addListener('mouseout', function() {
    infowindow.close();
    $('#supplementwindow').fadeOut();
  });
  markers.push(marker);
}



function countiesDropdown(container){
 var counties = {
        "bedfordshire",
        "hertfordshire",
        "cambridgeshire",
        "northamptonshire"
 
 }
 var out = "<select><option value=""></option>";</select>
<select> for (var key in counties) {</select>
<select> out += "<option value="&quot; + key + &quot;">" + counties[key] + "</option>";</select>
<select> }</select>
<select> out += "</select>";
 console.log(out);
 document.getElementById(container).innerHTML = out;
}



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);
  up206b.geocode();
}

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

up206b.geocode = function() {
  /* for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
  }
  markers = []; */
  var addresses = [$('#address').val(), $('#address2').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);
        }
      });
    }
  });
}
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 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&nbsp;
            <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></select> </div>

    </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>

---

It's javascript, not java - two entirely different things. Also where is this HTML party you're talking about?

Kidding about the question, I think you meant "part", not "party".

About this drop down list of counties, is the map supposed to come pre-populated with these as markers? Otherwise, how would clicking on one of them focus on it? Or do you mean clicking on one would both create it as a marker if it wasn't already and then focus on it, then later just focus on it if it was previously created? I think we can do that.

I'm still not clear where the color comes in. What decides which color something is? Or is it arbitrary with each marker simply having a different color? Or is it somehow tied to the elapsed time since the marker was created? If so, how?

Not sure about an outline, I will Google that to see if it's an available feature. I don't remember ever seeing anything like that on a Google map though. If it is available, I think you would have to define the coordinates for each corner (point on the outline where the line makes some kind of angle to itself) and there may be a limit to how many corners it can have. Yes, just found it. There might be an easier way, but you can draw your own borders with the api using the polygon method:

https://developers.google.com/maps/d...hapes#polygons

Not all that complicated IF you can find data on the coordinates for the outline of each county. See also:

https://youtu.be/jlJmiFUxv6c

Yes sorry, there is so many different programming codes i am getting carried away, I ment Javascript, also Yes i ment part.
I will mess around with abit more html as I think i can edit the drop down abit better. I will aslo look at your links and see what I can also do, so thank you very much.
The counties part is not marker related it is just to focus that particular county when selected.
With regards to colour, It is not to difine different colours at this moment in time, it is juat a colour which I have chosen yellow. What is currently happening with the info window pop up on the placed marker(s) and the supplement window is what I want to this moment, having the date and elapsing time would be great in these windows too, if that can be acheived.
The asign button I have created, I want as part of the supplement window, but once moused over the suppliment window is then displayed with the submited info (in this case the reference number) and if that is then correct on the part of the user, they then click on the assign button that has poped up in the supplement window to change the marker colour to yellow, this then shows that that Marker is now assigned the currect info and the user is happy with that. Does that make more sense?

i Have managed to sort some bits out on the county selection side (see my coding below) but it doesn't work, I have incorporated in with the coding in my last but one comment above. If you need the whole lot together just let me know.
I have created kml files for each county i want in my selction on my drop down menu but i can seem to work out how to assing the multipule kml files in my javascript and to get them to work. Can you help with this?

Code:

---

var kmlUrl = 'maps/central bedfordshire' ;
var kmlOptions = {
suppressInfoWindows: true,
preserveViewport: false,
map: map
};
var kmlLayer = new google.maps.KmlLayer(kmlUrl, kmlOptions);

function countiesDropdown(container){
var counties = {
 "bedfordshire",
 "hertfordshire",
 "cambridgeshire",
 "northamptonshire",
 "buckinghamshire"

 }
 var out = "<select><option value=""></option>";</select>
 <select> for (var key in counties) {</select>
 <select> out += "<option value="&quot; + key + &quot;">" + counties[key] + "</option>";</select>
 <select> }</select>
  <select> out += "</select>";
  console.log(out);
 document.getElementById(container).innerHTML = out;
}

Here is the HTML part.

  <div id="menu" style=" position: absolute; margin: 45px 80px;" >
 <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>

---

Also if you could help m=with my last comment too, I would really appreciate it.