Google maps doesn't show up in modal

ionic-v1
1

Hi,
I’m trying to initialize Google map in modal but I’m having the problem with that. Map is not showing and there isn’t any exception in console…

This is my code on codePen http://codepen.io/szuzul/pen/nhcfC do you have any ideas what went wrong in this example? For me google.maps.event.addDomListener(window, ‘load’, initialize); is not working property for modal.

Regards,

2

A bit late, but for anyone else having this issue…I experienced the same thing - my problem was that I was initiating my map (and it’s DOM element) before the modal was rendered.

So changing this:

plugin.google.maps.Map.getMap(document.getElementById("mapCanvas"));
$scope.modal.show();

to

$scope.modal.show();
plugin.google.maps.Map.getMap(document.getElementById("mapCanvas"));

… fixed things for me.

1 Like
3

Hey! So I am having problems with implementing a map view in my ionicModal.

Even the most basic of implementations:
does not work within my modal.

It works perfectly fine in any of my other views, just not in modals.

I’ve tried it by adding the map attribute directly to my modal template, and I have tried to initialize it dynamically using: var map = new google.maps.Map(document.getElementById(“map”), {});

But no go… no errors are thrown either.
Any thoughts on how to diagnose the problem?

4

same issue here. Any solution for this?

5

Ooh I did actually! Not sure where I found it but I added an attribute (data-tap-disabled=“true”) to the element where I was injecting the map. So this is what my template looks like now, and all the touch features work as expected.

Hope it helps!

6

I am still getting this error, is there an official solution or workaround for this situation? If so, can we have a codepen of the working code? Thx