Google Maps add view layer above map?

Ionic Framework ionic-v3
1

Not sure if this is the right form or not. I am trying to have an app built which is being outsourced to India. I am a native iOS developer and can probably build the type of app I need in two weeks. However, we are trying to have the app built so that it can be run on iOS and android. The company has selected to use ionic to develop this app. Not sure if this is the right form or not. I am trying to have an app built which is being outsourced to India. I am a native iOS developer and can probably build the type of app I need in two weeks. However, we are trying to have the app built so that it can be run on iOS and android. The company has selected to use ionic to develop this app.

The company is saying they are unable to achieve what we need, but this seems like such a simple app.

The specific needs for the app or below, which I will follow up with a specific question.

The app will be an iPad app. On the left side (1/3) will be the navigation (like an email app). On the right side (2/3) will be a Google map.

The user will be able to add markers anywhere on the map they would like. The user will then be able to delete any markers that they would like.

Once markers are added, the user should be able to draw a polygon on the screen and in any shape covering the map and the markers. The user will then be able to tap a COPY button. The app will then make note of any markers that are underneath the polygon, thus the markers that need to be copied.

The copied markers will only need to copy the X,Y coordinate of th markers location on the device screen (NOT lat/long).

The user should be able to then zoom scroll the map.
The user should then be able to tap a paste button The app should then plot markers where the copied markers (really just the x,y position) were in relation to the screen.

Here is a silly example:

The user places 10 markers in the shape of a smiley face on a map over London. The user then copies those markers, by drawing a polygon over the smiley face. The user then scrolls the map over Detroit and paste the copied markers. Now there is a smiley face over London and over Detroit.

Below is apparently where this development company in India is having an issue and says it is impossible to make ionic do the below need.

Once the user clicks the copy button, and a polygon goes away, leaving green dots as placeholders for the markers, the user needs to be able to scroll the map, zoom the map, and turn the map (maybe the north end of Detroit is at the bottom the phone screen). The development company says it is impossible to add a view layer, containing the placeholder dots, above the map so you can see them, but remove touch events from that view layer in order to pan and zoom and twist the map.

My specific question is, can ionic not add a view layer that does NOT contain touch events?

2

See: Split Pane

See: Google Markers

See: Drawing Tools

The Brew App is a PWA (Progressive Web App) built using Ionic 3 that uses the Google Maps JavaScript SDK.

Android:

iOS:

3

There are three (major) ways to develop Google Maps app with ionic.

No.1 and No.2 are mostly the same. It’s just JavaScript.
Much functions, development easily, but works on browser and must be online.

    1. Use Ionic-native/googlemaps with cordova-plugin-googlemaps

No.3 is a different approach. This plugin wraps native Google Maps SDK for Android/iOS and Google Maps JavaScript v3.
Less functions than No.1 and No.2 because this plugin focuses on create common functions of all three APIs.
However it works faster on native views, and works even if it is offline.

Answer will be little changed depends on which API you will choose, but here is the basic strategy.

If I create your app with no.1, you can do like this:

var mapDiv = document.getElementById("map_canvas");
var map = new google.maps.Map(mapDiv);
map.addListener('click', function(e) {
  var latLng = e.latLng;
  var point = map.getProjection().fromLatLngToPoint(latLng); // point indicates the position in world size.
  // you need to convert to div x/y (search on Google)

  console.log(point);
});

Or more simply, you can also do like this:

var mapDiv = document.getElementById("map_canvas");

var map = new google.maps.Map(mapDiv);

mapDiv.addListener("click", function(e){
  console.log(e); // e.clientX and e.clientY are indicates of X/Y from left-top.

   e.stopPropagation();
});

Well, I’m not familiar with no.2, please ask to someone.

If you choose no3, you can do like this:

let map : GoogleMap = GoogleMaps.create('map_canvas');

map.on(GoogleMapsEvents.MAP_CLICK).subscribe((params) => {
  let latLng = params[0];

  map.fromLatLngToPoint([latLng.lat, latLng.lng]).then((points: any) => {
    console.log(points);
  });
});

Inserting transparent layer is able to No.1 (or No.2), but handling touch events are tough road.
Instead of that, you should consider the way to use map click event.

Inserting transparent layer is not able to No.3, because No.3 API does not expose native view to JS side.
(Well, you might be able to do that if you fork the repository).
But using map_click event, you can create your app more simple.

Here is example. Open the polygon page. There is an editable polygon, and check the source code.

https://mapsplugin.github.io/ionic-googlemaps-quickdemo-v4/
19%20AM