google maps polyline highlighting

Question

I am currently plotting real time gps locations and drawing polyline in below sequence with google maps v3.

     var markers[];
        socket.on(foo, function(msg){
        markers.push({
        "title": 'Location: ('+ address+ '), Time:'+time+',
        "lat": msg.lat,
        "lng": msg.lng,
        "description":'<b>Location: '+ address+'<br>Time: time,
       });
var marker = new google.maps.Marker({  // put marker
            position: {lat:msg.lat, lng:msg.lng},
            map: map,
            icon: iconURL,
            time:d, 
            title: 'Location: ('+ address+ '), Time:'+time+'
        });

         //draw polyline between current and previous marker
        });

I need to identify which markers are plot between time say 9.40 AM to 10.00 AM and need to highlight that segment of polyline. I attached time in marker's infoWindow. But I unable to identify the marker based on time it has put. Actually I need to track a flit and wants to highlight polyline depending on time range selected by user. Can anybody help me regarding this scenario?

Answer 1

I found the solution, did in following steps.

1. I added custom field as time for marker and assigned time to it which i am getting on socket message.

2. Maintained array of all markers plotted on graph.

3. filtered markers array with underscore.js for requested time period to get markers plotted between that time period.

4. Drawn polyline(with different color for highlighting) among those filtered markers.

Answer 2

I have used gmapsjs for displaying markers on the map.

map = undefined
infoWindows = []

loadResults = (data) ->
  data = data.companies
  map.removeMarkers()
  markers_data = []
  if data.length > 0
    i = 0
    while i < data.length
      item = data[i]
      if item.latitude != undefined and item.longitude != undefined
        markers_data.push
          lat: item.latitude
          lng: item.longitude
          title: item.name
          comp_id: item.id
          icon: window.location + item.marker_file
          infoWindow: content: ''
          mouseover: (e) ->
            #close all infowindows and open current marker's infowindow
            infoWindows.push @infoWindow
            closeAllInfoWindows()
            @infoWindow.open @map, this
            return
      i++
  map.addMarkers markers_data
  return


getData = (ids, url) ->
  #send ajax and get the json data.
  $.ajax(
    url: url
    type: 'GET'
    dataType: 'json'
    data: 'id': 'somevalue').done (data) ->
    closeAllInfoWindows()
    loadResults data
    return
  return

closeAllInfoWindows = ->
  infoWindows.forEach (entry) ->
    entry.close()
    return
  return

$(document).ready ->
  map = new GMaps(
    div: '#map'
    lat: 42342
    lng: 42342)
  map.on 'marker_added', (marker) ->
    index = map.markers.indexOf(marker)
    $('#results').append '<li><a href="#" class="pan-to-marker" 'data-marker-index="' + index + '">' + marker.title + '</a></li>'
    if index == map.markers.length - 1
      map.fitZoom()
    return
  #Load all data when page is loaded for first time or refreshed.
  return

#script to bring the marker to the screen center
$(document).on 'click', '.pan-to-marker', (e) ->
  e.preventDefault()
  position = undefined
  lat = undefined
  lng = undefined
  $index = undefined
  $index = $(this).data('marker-index')
  position = map.markers[$index].getPosition()
  lat = position.lat()
  lng = position.lng()
  map.setCenter lat, lng
  return