google maps polyline highlighting

0
votes

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?

2
jquerygoogle-mapsgoogle-maps-api-3
Can you add some more details about the data format and the actual data being stored? – prasad.surase
Also, checkout hpneo.github.io/gmaps/examples/polylines.html – prasad.surase
you cant get references to the markers on the map. hence, if u want to have the reference for the map, you will have to store the reference in an array. checkout stackoverflow.com/questions/2577417/… – prasad.surase
Can you post a demo fiddle link... – Eugen Sunic
@eugensunic sorry I can't as there is too much data dependency so will not be able to get separate snippet from code..still will try... thanks for initiative – sunil

2 Answers

1
votes

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.

0
votes

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