Issue
i have a weird behavior of Google maps using dart !! here
as you see the link responsible for making th map appears is “Géolocalisation” until now i have no problem! but when i reclick, or when i visit another link then returning back to “Géo..” it gaves me this and i really don’t know what to do! this is my first try at GMap so i need a littel bit of help please.
i must mention that the page doesn’t refresh when i click at the link it’s only delets the old content from the container div then add the new elements also i must mention that i’m using bootstrap3,this is the code for the page géo
import 'package:google_maps/google_maps.dart';
import '../view.dart';
import 'dart:html';
//view Map
class viewMap extends View{
panelCoreBuilder(){
//creating the container layout and it is a div row
DivElement layout = new DivElement()..className="row";
//adding a style element for the map element inside the container
layout.children.add(new StyleElement()..text="#mapblock{margin: 0;padding: 0; height: 500px; width: 100%;");
DivElement cellone = new DivElement()..className="col-md-3";
//naming the block that contains the map
DivElement celltow = new DivElement()..className="col-md-9"..id="mapblock";
//adding the cells to the layout
layout.children.addAll([cellone,celltow]);
//creating the map
visualRefresh = true;
final mapOptions = new MapOptions()
..zoom = 8
..center = new LatLng(34.034453, -5.885925)
..mapTypeId = MapTypeId.ROADMAP;
final map = new GMap(celltow, mapOptions);
//returning the layout to the MainContainer...
return layout;
}
}
so that’s it i hope you can give me any solution ,hypotheses ,or even a hint
and if i fond the solution first i’ll post it here!
Solution
This is likely that your <div>
has an empty size (or not displayed) when the new GMap
is called. The map is not aware of the <div>
container resizing by default. You have to manually trigger a resize
event when you display it on the screen with :
event.trigger(map, 'resize', []);
Answered By – Alexandre Ardhuin
Answer Checked By – Clifford M. (FlutterFixes Volunteer)