Google Maps Native Markers not working

Ionic Framework ionic-v3
1

Hello! I’m trying to work with native google maps and the maps shows but when I add a marker it shows in the position {0,0}. Thanks for the help.

loadMap(){
    let location: GoogleMapsLatLng = new GoogleMapsLatLng(43.0741904,-89.3809802);

    this.map = new GoogleMap('map', {
      'backgroundColor': 'white',
      'controls': {
        'compass': true,
        'myLocationButton': true,
        'indoorPicker': true,
        'zoom': true
      },
      'gestures': {
        'scroll': true,
        'tilt': true,
        'rotate': true,
        'zoom': true
      },
      'camera': {
        'latLng': location,
        'tilt': 30,
        'zoom': 15,
        'bearing': 50
      }
    });

    this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() => {
        // create CameraPosition
        let position: CameraPosition = {
          target: location,
          zoom: 18,
          tilt: 30
        };

        // move the map's camera to position
        this.map.moveCamera(position);

        // create new marker
        let markerOptions: GoogleMapsMarkerOptions = {
          position: location,
          title: 'Ionic'
        };

        this.map.addMarker(markerOptions)
          .then((marker: GoogleMapsMarker) => {
            marker.showInfoWindow();
          });
    });
}

image
Captura de pantalla 2016-10-06 a las 4.44.35 p.m..png754×1382 320 KB

1 Like
2

Can show me the entire code please, the marker does not even appear in my map with that code.

3

Thanks for the reply…This is the entire page

import {Component} from '@angular/core';
import {NavController, Platform} from 'ionic-angular';
import {GoogleMap, GoogleMapsAnimation, GoogleMapsEvent, GoogleMapsLatLng, Geolocation, GoogleMapsMarkerOptions, GoogleMapsMarker, CameraPosition} from 'ionic-native';
import {Http} from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
  })

export class HomePage {

map: GoogleMap;
url: any;

constructor(public navCtrl: NavController, private platform: Platform, public http:Http) {
    platform.ready().then(() => {
        this.loadMap();
    });
    }



loadMap(){
    let location: GoogleMapsLatLng = new GoogleMapsLatLng(43.0741904,-89.3809802);

    this.map = new GoogleMap('map', {
      'backgroundColor': 'white',
      'controls': {
        'compass': true,
        'myLocationButton': true,
        'indoorPicker': true,
        'zoom': true
      },
      'gestures': {
        'scroll': true,
        'tilt': true,
        'rotate': true,
        'zoom': true
      },
      'camera': {
        'latLng': location,
        'tilt': 30,
        'zoom': 15,
        'bearing': 50
      }
    });

    this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() => {
        // create CameraPosition
        let position: CameraPosition = {
          target: location,
          zoom: 18,
          tilt: 30
        };

        // move the map's camera to position
        this.map.moveCamera(position);

        // create new marker
        let markerOptions: GoogleMapsMarkerOptions = {
          position: location,
          title: 'Ionic'
        };

        this.map.addMarker(markerOptions)
          .then((marker: GoogleMapsMarker) => {
            marker.showInfoWindow();
          });
    });
  }

}
4

What is the value of location when you pass it to the CameraPosition?

5

I cut/paste exactly that code and this is where the marker shows

image
Screenshot_2016-10-07-13-47-14[1].png1440×2560 924 KB

but I’m using android not ios, sorry I can’t help more