Creating a map

Creating a map is straightforward. The only required arguments are the coordinates for the center.

<GMap @lat="51.508530" @lng="-0.076132" @zoom={{12}} />

To get the map to render, the map canvas needs to be styled with dimensions. For example, in your app.css:

.ember-google-map {
  width: 500px;
  height: 500px;
}

Most of the components in this addon accept lat and lng parameters for convenience and consistency. This lets you avoid the hassle of remembering whether to use position or center and lets you provide the coordinates separately, as that’s how you are likely storing them if you’re using Ember Data. We don’t assert the usage of lat and lng, so you can still use the native Google options if you wish.

The g-map component accepts all of the MapOptions options you would pass to a Google Map instance. These are automatically watched for changes.

<GMap
  @lat="51.508530"
  @lng="-0.076132"
  @zoom={{12}}
  @styles={{this.myMapStyle}}
  @minZoom={{10}}
  @panControl={{false}}
  @streetViewControl={{false}} />

You can also pass an options object, but note that it will not be watched for changes. You can use the g-map/hash helper instead if you need the options to be watched.

Accessing the map instance

If you need access the map instance – to call panTo for example – you can use the onceOnIdle hook. It will return the map instance once the map has been initialised.