Custom Controls

[wf9a5m75]

Custom Controls

[wf9a5m75]

https://github.com/wf9a5m75/ionic-googlemaps-demo/blob/master/src/pages/map/get-map/get-map.html#L121-L124

[wf9a5m75]

Yes, possible. That's why JS developers use this plugin.
Just put any HTML elements on the map.

[wf9a5m75]

For example,

<div class="map" id="map_canvas1">
  <button ion-button (click)="onButton1_click($event)" >Click here</button></span>
</div>

[wf9a5m75]

But you don't need to put the element inside the map div tag.
This plugin recognizes z-index also.
If you set higher z-index than the map div, it is clickable.

[ThorvaldAagaard]

So instead of

        // Create the DIV to hold the control and call the CenterControl()
        // constructor passing in this DIV.
        var centerControlDiv = document.createElement('div');
        var centerControl = new CenterControl(centerControlDiv, map);

        centerControlDiv.index = 1;
        map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);

I just add a div and reference that div in the code like this

        var centerControlDiv = document.getElementById('mapcustomdiv');
        var centerControl = new CenterControl(centerControlDiv, map);
        centerControlDiv.index = 1;

I know this could be done with styling, but just as an example of overlaying the map with custom html