title: How to create different route for different users on google map javascript
body: <p>I would like to draw different routes for different users in Google map, but In my case, It is showing only last one. The code goes below:
  I'm new to the google map.  So sorry for the mistake.</p>
  
  <p><code>function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 8,
          center: {lat: 48.8566, lng: 2.3522},
          scrollwheel: true
      });
  }</code></p>
  
  <pre><code>function getUserData() {        
      var obj = [{"email_id":"user1","latlong":[{"lat":48.834159,"lng":2.333102}, {"lat":48.834611,"lng":2.337048},{"lat": 48.836306,"lng": 2.337820}]},{"email_id": "user2",latlong: [{"lat": 48.833538,"lng": 2.331625},{"lat": 48.828848,"lng": 2.327507},{"lat": 48.831899,"lng": 2.325191}]}]        
  
      for (i in obj) {
          var temp1 = JSON.stringify(obj[i]);
          var obj1 = JSON.parse(temp1); 
  
          var temp2 = JSON.stringify(obj1.latlong);
          var path = JSON.parse(temp2);
          rederGoogleMap(obj1, path);
  
      }
  
      function rederGoogleMap(obj1, path){    
          var marker;         
          var map = new google.maps.Map(document.getElementById('map'), {
              zoom : 16,
              center : path[path.length - 1],
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              scrollwheel: true
          });
  
          var infowindow = new google.maps.InfoWindow();
  
          /***** create marker for starting position *****/
          marker = new google.maps.Marker({
              position: path[0],
              map: map,
              title: 'Start'
          });
  
          google.maps.event.addListener(marker, 'click', (function (marker, k) {
              return function () {
                  infowindow.setContent(obj1.email_id);
                  infowindow.open(map, marker);
              }
          })(marker));
  
          /***** create marker for ending position *****/
          marker = new google.maps.Marker({
              position: path[path.length - 1],
              map: map,
              title: 'End'
          });
  
          google.maps.event.addListener(marker, 'click', (function (marker, k) {
              return function () {
                  infowindow.setContent(obj1.email_id);
                  infowindow.open(map, marker);
              }
          })(marker));
  
          var elevator = new google.maps.ElevationService;
          displayPathElevation(path, elevator, map);
      }
  
      function displayPathElevation(path, elevator, map) {
          new google.maps.Polyline({
              path : path,
              strokeColor : '#0000CC',
              strokeOpacity : 0.4,
              map : map
          });
      }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/GHzwK.png" rel="nofollow noreferrer">see google map here</a></p>
  
  <p>It shows only last route i.e. of user2. and it removes 1st route. But want to show both the route for different user. How should I do that. Please help anyone.</p>