search

a14n / dart-google-maps

A library to use Google Maps JavaScript API v3 from Dart scripts.
Other
125 stars 63 forks source link

Error loading Google MAP in Web #104

Closed harsuu942 closed 2 years ago

harsuu942 commented 2 years ago

TypeError: Cannot read property 'maps' of undefined. How can I solve this?

a14n commented 2 years ago

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 commented 2 years ago

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

a14n commented 2 years ago

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 commented 2 years ago

Here is my HTML code.

<!DOCTYPE html>

web
a14n commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

harsuu942 commented 2 years ago

Thanks a man !!! I got the solutions.