Error loading Google MAP in Web

[harsuu942]

Error loading Google MAP in Web

[harsuu942]

Thanks a man !!! I got the solutions.

[a14n]

Did you correctly include the Maps API JavaScript using a script tag before your dart script ?

<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>

[harsuu942]

Yes, I have already included the API javaScript but still showing TypeError.

[a14n]

It looks like an issue with the html setup. Do you have something similar to https://github.com/a14n/dart-google-maps/blob/master/example/01-basics/map-simple/map.html ?

Could you post your html code?

[harsuu942]

Here is my HTML code.

<title>web</title> <style> html, body, #map { height: 100%; margin: 0px; padding: 0px } </style>

<script src="https://maps.googleapis.com/maps/api/js?key=googleAPIKey"></script> <script defer src="page.dart.js"></script>

[a14n]

Hard to tell what is wrong without additional informations. If you have a like to a public repo I could access I can take a look but for now I can't help more.

[harsuu942]

The sample example is working fine but I want to use it as a widget.

Here is what I used as a widget

Widget getMap() {
String htmlId = "map";

// ignore: undefined_prefixed_name
ui.platformViewRegistry.registerViewFactory(htmlId, (int viewId) {
final myLatlng = LatLng(1.3521, 103.8198);

final mapOptions = MapOptions()
  ..zoom = 10
  ..center = LatLng(1.3521, 103.8198);

final elem = DivElement()
  ..id = htmlId
  ..style.width = "100%"
  ..style.height = "100%"
  ..style.border = 'none';



final map = GMap(elem, mapOptions);

Marker(MarkerOptions()
  ..position = myLatlng
  ..map = map
  ..title = 'Hello World!'
);

return elem;

});

return HtmlElementView(viewType: htmlId);
}

This time getting error: "TypeError: Cannot read property 'maps' of undefined" so can't use as a widget
so could please help me out.

[a14n]

Hard to tell what is wrong. You can take a look at how google_maps_flutter_web works.