Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sandydoo/ember-google-maps

A friendly Ember addon for working with Google Maps.
https://github.com/sandydoo/ember-google-maps

ember-addon ember-g-map emberjs google google-maps map maps

Last synced: about 1 month ago
JSON representation

A friendly Ember addon for working with Google Maps.

Awesome Lists containing this project

README 

        
# Ember Google Maps



[![Latest version][npm-version-badge]][npm-url]

[![npm][npm-downloads-badge]][npm-url]

[![Ember Observer Score][ember-observer-badge]][ember-observer-url]

[![Build Status][ci-badge]][ci-url]



A friendly [Ember][ember-url] addon for working with [Google Maps][google-maps-url].



- Create and draw on your maps using Ember components.

- Automatically load the Google Maps API on demand and safely access it across your entire app.







> #### Thanks for using the addon!

>

> ember-google-maps is over 3 years old now. In that time, I’ve completely rewritten it multiple times over to support changes in both Ember and Google Maps. I’d love to keep working on this addon in my free time, but could use your support.

>

> If you use ember-google-maps in your commercial work or find it valuable, consider leaving a donation to support on-going maintenance and API costs.

>

> [![Support me on Ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/sandydoo)

>

> Thank you! 🙌🙌🙌\

> — @sandydoo







- [Documentation](#-documentation)

  - [Quick start](#-quick-start-for-the-impatient)

- [Compatibility](#-compatibility)

- [Examples](#-examples)

- [Addons](#-extra-addons)

- [Maintainers](#-maintainers)

- [Contributing](#contributing)

- [License](#license)

- [Disclaimer](#disclaimer)



Are you new to Ember? [Learn how to use Ember and install addons →](https://guides.emberjs.com/release/getting-started/quick-start/)



Looking for a more general mapping solution? [Check out ember-leaflet →](https://github.com/miguelcobain/ember-leaflet).



📎 Documentation

--------------------------------------------------------------------------------



**[Get started with ember-google-maps →][docs-url]**



### 💨 Quick start for the impatient



1. Install the addon.



```sh

ember install ember-google-maps

```



2. Provide a Google Maps API key in `config/environment.js`. [Learn how to create an API key →](https://developers.google.com/maps/documentation/javascript/get-api-key)



```js

'ember-google-maps': {

  key: ""

}

```



3. Make sure your map has a size, or you’ll end up staring at a blank screen. `ember-google-map` is the default class for all maps.



```css

.ember-google-map {

  width: 500px;

  height: 500px;

}

```



4. Draw a new map at some coordinates.



```hbs



```



5. Great! You’ve drawn a map.\

   **[Now keep reading the docs →][docs-url]**



🔗 Compatibility

--------------------------------------------------------------------------------



### [![Latest version][npm-version-badge]][npm-url]

  - Ember.js v3.28 or above

  - Ember CLI v3.28 or above

  - Node.js v18 or above



⭐ Examples

--------------------------------------------------------------------------------



Display a map centered around a set of coordinates.



```handlebars



```



Display an array of locations using markers 📍.



```handlebars



  {{#each this.locations as |location|}}

    

  {{/each}}



```



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.



```handlebars



  {{#each this.rentals as |rental|}}

    

      


        


          {{rental.price}}

        


      


    

  {{/each}}



```



**[Learn more →][docs-url]**



🛒 Extra addons

--------------------------------------------------------------------------------



- [MarkerClustererPlus](https://github.com/sandydoo/ember-google-maps-markerclustererplus) — Add marker clustering to your maps with [@googlemaps/markerclustererplus](https://github.com/googlemaps/js-markerclustererplus).



😇 Maintainers

--------------------------------------------------------------------------------



This addon is maintained by **[Sander Melnikov][maintainer-url]**.



Contributing

--------------------------------------------------------------------------------



See the [Contributing](CONTRIBUTING.md) guide for details.



License

--------------------------------------------------------------------------------



[MIT][license-url] © [Sander Melnikov][maintainer-url].



Disclaimer

--------------------------------------------------------------------------------



This software is not endorsed, maintained, or supported by Google LLC.



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



[npm-version-badge]: https://img.shields.io/npm/v/ember-google-maps.svg?label=latest

[npm-downloads-badge]: https://img.shields.io/npm/dt/ember-google-maps

[npm-url]: https://www.npmjs.org/package/ember-google-maps



[ci-badge]: https://github.com/sandydoo/ember-google-maps/workflows/CI/badge.svg?branch=main

[ci-url]: https://github.com/sandydoo/ember-google-maps/actions?query=workflow%3ACI



[ember-observer-badge]: https://emberobserver.com/badges/ember-google-maps.svg

[ember-observer-url]: https://emberobserver.com/addons/ember-google-maps



[ember-url]: https://emberjs.com

[google-maps-url]: https://developers.google.com/maps/documentation/javascript/overview



[docs-url]: https://ember-google-maps.sandydoo.me/docs/getting-started

[maintainer-url]: https://github.com/sandydoo

[license-url]: https://github.com/sandydoo/ember-google-maps/blob/main/LICENSE