nicobytes/59-ionic-route-google-maps.md

## 59-ionic-route-google-maps.md

      
    Raw
  

              59-ionic-route-google-maps.md
            
          
    1 Load Map

View: https://www.youtube.com/watch?v=t-hZa1mPPN0
2 Declare global services

map: any;
directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer();
// parque simon bolivar
origin = { lat: 4.658383846282959, lng: -74.09394073486328 };
// Parque la 93
destination = { lat: 4.676802158355713, lng: -74.04825592041016 };
3 set loadMap

loadMap() {
  // create a new map by passing HTMLElement
  const mapEle: HTMLElement = document.getElementById('map');
  // create map
  this.map = new google.maps.Map(mapEle, {
    center: this.origin,
    zoom: 12
  });

  this.directionsDisplay.setMap(this.map);

  google.maps.event.addListenerOnce(this.map, 'idle', () => {
    mapEle.classList.add('show-map');
    this.calculateRoute();
  });
}
4 Calc

private calculateRoute() {
  this.directionsService.route({
    origin: this.origin,
    destination: this.destination,
    travelMode: google.maps.TravelMode.DRIVING,
  }, (response, status)  => {
    if (status === google.maps.DirectionsStatus.OK) {
      this.directionsDisplay.setDirections(response);
    } else {
      alert('Could not display directions due to: ' + status);
    }
  });
  }
5 show indicators

<div id="map"></div>
<div id="indicators"></div>
#indicators {
  padding: 16px;
  height: 40%;
  width: 100%;
  overflow-y: auto;
  display: block;
}
loadMap() {
  // create a new map by passing HTMLElement
  const mapEle: HTMLElement = document.getElementById('map');
  const indicatorsEle: HTMLElement = document.getElementById('indicators');
  // create map
  this.map = new google.maps.Map(mapEle, {
    center: this.origin,
    zoom: 12
  });

  this.directionsDisplay.setMap(this.map);
  this.directionsDisplay.setPanel(indicatorsEle);

  google.maps.event.addListenerOnce(this.map, 'idle', () => {
    mapEle.classList.add('show-map');
    this.calculateRoute();
  });
}
6 wayPoints

interface WayPoint {
  location: {
    lat: number,
    lng: number,
  };
  stopover: boolean;
}

wayPoints: WayPoint[] = [
  {
    location: { lat: 4.667945861816406, lng: -74.09964752197266 }, // Jardín Botánico
    stopover: true,
  },
  {
    location: { lat: 4.676802158355713, lng: -74.04825592041016 }, // Parque la 93
    stopover: true,
  },
  {
    location: { lat: 4.6554284, lng: -74.1094989}, // Maloka
    stopover: true,
  },
];

this.directionsService.route({
  origin: this.origin,
  destination: this.origin,
  waypoints: this.wayPoints,
  optimizeWaypoints: true,
  travelMode: google.maps.TravelMode.DRIVING,
}, (response, status)  => {
  if (status === google.maps.DirectionsStatus.OK) {
    this.directionsDisplay.setDirections(response);
  } else {
    alert('Could not display directions due to: ' + status);
  }
});