ion-maps | conditionally runs Native maps or JS maps | Map library

new Vue({
  el: '#app',
  template: `
        
            
            
        
    `,
  data() {
    return {
      geocoder: null,
      map: null,
      marker: null,
      infowindow: null
    }
  },
  mounted() {
    this.infowindow = new google.maps.InfoWindow({
      size: new google.maps.Size(150, 50)
    })

    google.maps.event.addDomListener(window, "load", this.initialize)
  },
  methods: {
    initialize() {
      this.geocoder = new google.maps.Geocoder();
      let latlng = new google.maps.LatLng(-34.397, 150.644)
      let mapOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      this.map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions)
      google.maps.event.addListener(this.map, 'click', () => {
        this.infowindow.close()
      });
    },
    geocodePosition(pos) {
      this.geocoder.geocode({
        latLng: pos
      }, responses => {
        if (responses && responses.length > 0) {
          this.marker.formatted_address = responses[0].formatted_address
        } else {
          this.marker.formatted_address = 'Cannot determine address at this location.'
        }
        this.infowindow.setContent(this.marker.formatted_address + "
coordinates: " + this.marker.getPosition().toUrlValue(6))
        this.infowindow.open(this.map, this.marker)
      });
    },
    codeAddress() {
      let address = document.getElementById('address').value;
      this.geocoder.geocode({
        'address': address
      }, (results, status) => {
        if (status == google.maps.GeocoderStatus.OK) {
          this.map.setCenter(results[0].geometry.location);
          if (this.marker) {
            this.marker.setMap(null);
            if (this.infowindow) this.infowindow.close();
          }
          this.marker = new google.maps.Marker({
            map: this.map,
            draggable: true,
            position: results[0].geometry.location
          });
          google.maps.event.addListener(this.marker, 'dragend', () => {
            this.geocodePosition(this.marker.getPosition());
          });
          google.maps.event.addListener(this.marker, 'click', () => {
            if (this.marker.formatted_address) {
              this.infowindow.setContent(this.marker.formatted_address + "
coordinates: " + this.marker.getPosition().toUrlValue(6));
            } else {
              this.infowindow.setContent(address + "
coordinates: " + this.marker.getPosition().toUrlValue(6));
            }
            this.infowindow.open(this.map, this.marker);
          });
          google.maps.event.trigger(this.marker, 'click');
        } else {
          alert('Geocode was not successful for the following reason: ' + status);
        }
      });
    }
  }
})