Multiples markers ionic google maps

58-markers-maps-ionic.md

1 Add SDK Google Maps

<script src="https://maps.googleapis.com/maps/api/js?key=KEY"></script>

2 Create div in html and declare

declare var google;

<div id="map"></div>

3 Load Map

loadMap() {
  // create a new map by passing HTMLElement
  const mapEle: HTMLElement = document.getElementById('map');
  // create LatLng object
  const myLatLng = {lat: 4.658383846282959, lng: -74.09394073486328};
  // create map
  this.map = new google.maps.Map(mapEle, {
    center: myLatLng,
    zoom: 12
  });

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

4 add css

ion-content {
  #map {
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 150ms ease-in;
    display: block;
    &.show-map{
      opacity: 1;
    }
  }
}

5 interface marker

interface Marker {
  position: {
    lat: number,
    lng: number,
  };
  title: string;
}

6 create marker

addMarker(marker: Marker) {
  return new google.maps.Marker({
    position: marker.position,
    map: this.map,
    title: marker.title
  });
}

7 render markers

markers: Marker[] = [
  {
    position: {
      lat: 4.658383846282959,
      lng: -74.09394073486328,
    },
    title: 'Parque Simón Bolivar'
  },
  {
    position: {
      lat: 4.667945861816406,
      lng: -74.09964752197266,
    },
    title: 'Jardín Botánico'
  },
  {
    position: {
      lat: 4.676802158355713,
      lng: -74.04825592041016,
    },
    title: 'Parque la 93'
  },
  {
    position: {
      lat: 4.6554284,
      lng: -74.1094989,
    },
    title: 'Maloka'
  },
];

renderMarkers() {
  this.markers.forEach(marker => {
    this.addMarker(marker);
  });
}

8 complete

import { Component, OnInit } from '@angular/core';

declare var google;

interface Marker {
  position: {
    lat: number,
    lng: number,
  };
  title: string;
}

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {

  map = null;
  markers: Marker[] = [
    {
      position: {
        lat: 4.658383846282959,
        lng: -74.09394073486328,
      },
      title: 'Parque Simón Bolivar'
    },
    {
      position: {
        lat: 4.667945861816406,
        lng: -74.09964752197266,
      },
      title: 'Jardín Botánico'
    },
    {
      position: {
        lat: 4.676802158355713,
        lng: -74.04825592041016,
      },
      title: 'Parque la 93'
    },
    {
      position: {
        lat: 4.6554284,
        lng: -74.1094989,
      },
      title: 'Maloka'
    },
  ];

  constructor() {}

  ngOnInit() {
    this.loadMap();
  }

  loadMap() {
    // create a new map by passing HTMLElement
    const mapEle: HTMLElement = document.getElementById('map');
    // create LatLng object
    const myLatLng = {lat: 4.658383846282959, lng: -74.09394073486328};
    // create map
    this.map = new google.maps.Map(mapEle, {
      center: myLatLng,
      zoom: 12
    });

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

  renderMarkers() {
    this.markers.forEach(marker => {
      this.addMarker(marker);
    });
  }

  addMarker(marker: Marker) {
    return new google.maps.Marker({
      position: marker.position,
      map: this.map,
      title: marker.title
    });
  }

}