Skip to content
main
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
app
 
 
 
 
 
 
lib
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Ember Google Maps

A friendly Ember addon for working with Google Maps.

Version npm Ember Observer Score Build Status

What this addon is:
  • A lightweight Ember API for working with Google Maps.
  • An on-demand, asynchronous loader for the Google Maps API.
What this addon is not:
  • A bulky, verbose wrapper that reimplements the entire Google Maps API.
  • An option validator that is tightly coupled to Google’s API.

📎 Documentation

View guide and documentation ↗️

🔗 Compatibility

  • Ember.js v3.16 or above
  • Ember CLI v3.16 or above
  • Node.js v10 or above

Features

Feature
Lightweight wrapper
Async API loading
Official Google API
Leverages templates
Contextual components
Minimal observer usage
Native Ember HTML markers

If you don’t need the Google API specifically, check out ember-leaflet ↗️.

Examples of what to expect

Display a map centered around a set of coordinates 🗺.

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

Display an array of locations using markers 📍.

<GMap @lat="51.508530" @lng="-0.076132" @zoom={{10}} as |map|>
  {{#each this.locations as |location|}}
    <map.marker
      @lat={{location.lat}}
      @lng={{location.lng}}
      @onClick={{action "showDetails" location}} />
  {{/each}}
</GMap>

Display a custom overlay, like a custom HTML marker using template blocks 😱. This lets you do all sorts of fancy things, like adding CSS animations and binding data.

<GMap @lat="51.508530" @lng="-0.076132" @zoom={{10}} as |map|>
  {{#each this.rentals as |rental|}}
    <map.overlay @lat={{rental.lat}} @lng={{rental.lng}}>
      <div style="transform: translateX(-50%) translateY(-50%);">
        <p class="price">
          {{rental.price}}
        </p>
      </div>
    </map.overlay>
  {{/each}}
</GMap>

Learn more ↗️

👷 Maintainers

This addon is maintained by Sander Melnikov.

Contributing

See the Contributing guide for details.

For more information on using ember-cli, visit https://ember-cli.com/.

License

MIT © Sander Melnikov.

Disclaimer

This software and its maintainer are in no way affiliated, endorsed, maintained, or supported by Google LLC.

©2020 Google LLC All rights reserved. Google Maps™ is a trademark of Google LLC.