I am having an issue with native google maps. I have followed this tutorial to integrate native maps into my app. My app has a side menu with maps page that can be selected. When I choose this page in the side menu the map will load properly. However, when I open the side menu to navigate the a different pager, I am unable to choose a different page. Let it also be noted that I can move the map around with the side menu is open. It seems that the side menu is not on top of the map which would be why the side menu is working properly even though it is. All other pages work just fine. Can anyone help me. I also want to note that JavaScript maps work just fine, but I would really like to use native.
One more this, If anyone can help me fix my problem; could you also provide me with an example to add multiple markers. The plugin docs do not give an example using Typescript. Thanks
import { Component } from ‘@angular/core’;
import { NavController, NavParams, Platform } from ‘ionic-angular’;
import { GoogleMap, GoogleMapsEvent, GoogleMapsLatLng } from ‘ionic-native’;
I’ve been using this plugin for a bit and its excellent but very hard to find good documentation on it.
With regards to your issues as for adding markers heres some code that will add a marker to the clicked position on the map.
You will need a few things imported first too so don’t forget them.
import { GoogleMap, GoogleMapsLatLng, GoogleMapsEvent, GoogleMapsMarker, GoogleMapsMarkerOptions } from 'ionic-native';
// when the map is ready
this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() => {
// attach a click event
this.map.on(GoogleMapsEvent.MAP_CLICK).subscribe((ev) => {
// create new marker with current position
let markerOptions: GoogleMapsMarkerOptions = {
position: new GoogleMapsLatLng(ev.lat, ev.lng),
title: 'This is my new marker'
};
// add the marker to the map
this.map.addMarker(markerOptions)
.then((marker: GoogleMapsMarker) => {
marker.showInfoWindow();
});
});
});
For your issue regarding the side menu, I have not used the side menu in my maps application but if you have the project, or a demo application on git, I can take a look.
This is something we have seen when building the conference app out.
It’s because the native maps plugin renders on a different native layer than the webview.
We actually removed the native maps plugin for this very reason. Since there’s nothing that can be really done about this.
Thank you for all of the help. I am going to your suggestion aaronksaunders.
However, if for some reson I am not able to get it to work can someone help me work out the small kink I am having with my JavaScript map. I have a footer that will appear at the bottom with the name of the location and a button that will push to a details page when the marker is clicked. This footer will be hidden when anywhere else on the map that is not a marker is clicked. The problem is that there is a delay from click on the map to footer. Can anyone help. Here is the code: