CODEWITHSUNDEEP
javascriptgoogle-mapsdart
bhargav
bhargav

Reputation: 111

using google Dart with Google Maps JavaScript API

Is there a way to use JS api and frameworks like Google Maps JavaScript API, dojo within a dart project. pointers to some samples will be nice.

Upvotes: 3

Views: 1094

Answers (2)

Kai Sellgren
Kai Sellgren

Reputation: 30292

I have used Alexandre Ardhuin's google_maps package. Install it as a dependency:

dependencies:
  google_maps: any

Then import a few files in the HTML:

<head>
  <script src="http://maps.googleapis.com/maps/api/js?v=3.10&sensor=false"></script>
  <link href="https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
</head>

Note: I had to use version 3.10 of the JS API -- be sure to specify that in the URL (as I did above), until the package has been updated to work with the latest version.

Then the actual HTML container for the map:

<div class="map" style="width: 640; height: 640px;"></div>

Some imports:

import 'dart:html';
import 'package:js/js.dart' as js;
import 'package:google_maps/js_wrap.dart' as jsw;
import 'package:google_maps/google_maps.dart';

Then the actual code:

js.scoped(() {
  var mapOptions = new MapOptions()
    ..mapTypeId = MapTypeId.ROADMAP
    ..center = new LatLng(60.987097,25.767059)
    ..zoom = 6;

  var map = new GMap(_root.query(".map"), mapOptions);

  var marker = new Marker(
    new MarkerOptions()
      ..position = new LatLng(60.987097,25.767059)
      ..map = map
      ..title = 'Foo'
  );

  var content = new DivElement();
  content.innerHtml = '''
<h3>Foo</h3>

<p>bar</p>
''';

  var infoWindow = new InfoWindow(
    new InfoWindowOptions()
      ..content = content
  );

  marker.on.click.add((e) {
    infoWindow.open(map, marker);
  });

  jsw.retainAll([map, marker, infoWindow]);
});

The result is a map where I have marked my home city.

enter image description here

Have fun!

Upvotes: 5

Alexandre Ardhuin
Alexandre Ardhuin

Reputation: 76303

You can use the google_maps package to deal with Google Maps JavaScript API v3.

To deal with Js Api, you can use the js package. See Using JavaScript from Dart: The js Library for more informations.

Upvotes: 0

Related Questions