Multiple google map

Ionic Framework ionic-v3
1

when navigate from map page to another one contain map it not worked and be blank

2

This might not be the best solution but it might work for you for now.
Try wrapping your map setup in a timeout.

setTimeout(() => {
      setupMap();
    }, 500);

This helped with my OpenLayers maps.

3

@shepard
where should i put that ?
that my code
calculateAndDisplayRoute() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(document.getElementById(‘map’), {
zoom: 7,
center: {lat: 41.85, lng: -87.65}
});
directionsDisplay.setMap(map);
directionsService.route({

  origin: "cairo",
  destination: "alexandria",
  travelMode: 'DRIVING'
}, function(response, status) {
  if (status === 'OK') {
    directionsDisplay.setDirections(response);
  } else {
    window.alert('Directions request failed due to ' + status);
  }
});

}

4

I don’t work with Google Maps but you could try:

setTimeout(() => {
calculateAndDisplayRoute();
}, 500);

Put that where you are calling calculateAndDisplayRoute() elsewhere.

You might have to destroy the existing map each time - not sure.
From here, hopefully you can get further advice from a Google Maps user.

5

i did that but unfortunately doesn’t work, thanks for your interest

6

Maybe this sounds like an odd question, but did you try to resize the window on the blank map? Sometimes you should manually call the resize event (since you have multiple maps). Is the map grey or just blank and is nothing rendered or just not the tiles? Do you have any errors in your logs? question questions question :slight_smile:

7

I strongly recommend against setTimeout(). Even if it works on occasion, you are just inviting inconsistency in your app behavior. There is always a better way.

1 Like
8

i tried to resize the map but nothing , the page just blank nothing rendered and there is no errors in the log
:sweat:

9

don’t worry it didn’t work :joy:

10

I assume you have your reasons for avoiding ionic-native’s google-maps wrapper, but you seem to be doing a lot of direct DOM manipulation. In my experience, that’s a big source of confusing bugs like the one you describe here. If you simply can’t avoid doing that, I think providing people with access to a complete reproducible code repository would improve your chances of getting useful advice.