Click here to Skip to main content
15,066,066 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I want to display the updating count of vehicles on a particular road in my google maps w.r.t to a marker I have placed.I am using the MongoDB database from which I retrieve the count value and want to display this real time count in my map. Is there any solution to display this continuously changing data in the map?
Thank you.

What I have tried:

{{!-- This is my live_traffic.hbs file --}}

<link rel="stylesheet" href="/stylesheets/live_traffic_background.css">
<section>
  <div style="margin-top:50px; margin-right:10px; margin-left:10px">
    <head>
<script src="jquery-2.1.4.js"></script>
<style>
      #map {
        height: 500px;
      }
</style>
</head>
<body>
<div id="navbar"><span>Google Maps - Javascript API</span></div>
<div id="wrapper">
<div id="map"></div>
   
    <script>
      
      var map;
      function initMap() {
        
        map = new google.maps.Map(document.getElementById('map'), {
			center: {lat: 9.385751738316223, lng: 76.57526832439837},
	
          zoom: 13
        });
		
		var trafficLayer = new google.maps.TrafficLayer();
		var transitLayer = new google.maps.TransitLayer();
		var bikeLayer = new google.maps.BicyclingLayer();
		
		$('#traffic-b').click(function(){
			trafficLayer.setMap(map);
			transitLayer.setMap(null);
			bikeLayer.setMap(null);
		});
		$('#transit-b').click(function(){
			trafficLayer.setMap(null);
			transitLayer.setMap(map);
			bikeLayer.setMap(null);
		});
		$('#bike-b').click(function(){
			trafficLayer.setMap(null);
			transitLayer.setMap(null);
			bikeLayer.setMap(map);
		});


   function addMarker(property){
      var marker = new google.maps.Marker({
           position:property.location,
           map:map,
            icon: property.imageIcon
          });
           {{#each data}} // I get this data from index.js
              contentString =  {{this.Count}}                              
            {{/each}}
            var detailWindow = new google.maps.InfoWindow({
               content:contentString});
           
            marker.addListener("click", ()=>{
                   detailWindow.open(map, marker);
                   
             })
       
 } 
    addMarker({location:{lat: 9.379354015965525, lng: 76.57047517043526}})
    addMarker({location:{lat:9.38078985658993, lng: 76.57478706858036}})
	addMarker({location:{lat:9.38681169681476, lng: 76.5746661252479}})
    addMarker({location:{lat:9.384772998061294, lng: 76.57712632895766}})
 

}
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCYZ1LKQ6k5jmqEERWADCKR31Tot3fu4Ns&callback=initMap"
    async defer></script>
	
	<button id="traffic-b">Traffic</button>
	<button id="transit-b">Transit</button>
	<button id="bike-b">Bike</button>
</div>
</body>
    </div>
   
</section>
Posted
Updated 22-May-21 21:49pm
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900