{"id":17681721,"url":"https://github.com/jgaskins/opal-google_maps","last_synced_at":"2025-03-30T19:21:08.253Z","repository":{"id":56886793,"uuid":"101803670","full_name":"jgaskins/opal-google_maps","owner":"jgaskins","description":"Gem for using Google Maps in a Ruby front-end app","archived":false,"fork":false,"pushed_at":"2017-08-29T20:47:01.000Z","size":7,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-24T06:51:24.590Z","etag":null,"topics":["clearwater","front-end","google-maps","ruby"],"latest_commit_sha":null,"homepage":"https://rubygems.org/gems/opal-google_maps","language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jgaskins.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-08-29T20:24:19.000Z","updated_at":"2017-09-15T02:54:54.000Z","dependencies_parsed_at":"2022-08-21T00:20:46.229Z","dependency_job_id":null,"html_url":"https://github.com/jgaskins/opal-google_maps","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgaskins%2Fopal-google_maps","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgaskins%2Fopal-google_maps/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgaskins%2Fopal-google_maps/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgaskins%2Fopal-google_maps/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jgaskins","download_url":"https://codeload.github.com/jgaskins/opal-google_maps/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246366225,"owners_count":20765652,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["clearwater","front-end","google-maps","ruby"],"created_at":"2024-10-24T09:11:59.460Z","updated_at":"2025-03-30T19:21:06.553Z","avatar_url":"https://github.com/jgaskins.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Opal::GoogleMaps\n\nRuby bindings for client-side Google Maps integration via Opal and helpers for server-side loading.\n\n## Installation\n\nAdd this line to your application's Gemfile:\n\n```ruby\ngem 'opal-google_maps'\n```\n\nAnd then execute:\n\n    $ bundle\n\n## Usage\n\nSince this gem is a Ruby interface for Google Maps, it requires that the Google Maps JS library be loaded (from Google) first. This is as simple as putting the following line in your server-side application's view template:\n\n```erb\n\u003c%= Opal::GoogleMaps.google_maps(YOUR_API_KEY) %\u003e\n```\n\nThis will add a `\u003cscript\u003e` tag to the rendered HTML with your API key.\n\n### Client-side\n\nIf you're using this gem with Clearwater, you'll want to render it into a `Clearwater::BlackBoxNode` rather than a simple `Clearwater::Component`. The `BlackBoxNode` gives you callbacks for `mount`, `update`, and `unmount`, but the simpler components do not. For example:\n\n```ruby\nrequire 'clearwater/black_box_node' # It is not loaded with Clearwater by default\nrequire 'google/maps' # No need for the `opal` namespace\n\nclass MyMap\n  include Clearwater::BlackBoxNode\n  include Google::Maps # So we don't have to namespace every constant\n\n  attr_reader :map\n\n  def node\n    # Important to set the dimensions of the map container\n    Clearwater::Component.div(style: { width: '600px', height: '600px' })\n  end\n\n  def mount(element)\n    # Need to delay this one animation frame so the div we specified above is\n    # actually in the rendered DOM. Google Maps needs to get the dimensions of\n    # the map from a fully rendered DOM node.\n    Bowser.window.animation_frame do\n      # Similar to the `google.maps.Map` namespace\n      @map = Map.new(\n        element, # passed into this method\n        center: LatLng.new(-34.397, 150.644), # Sydney, NSW, Australia\n        zoom: 8,\n      )\n    end\n  end\n\n  # Each time you render a BlackBoxNode, you get a new instance, so you need\n  # to copy it across instances if you want to operate on it across renders.\n  # If you're only rendering it and never doing anything with it, you can omit\n  # this method entirely.\n  def update(previous, element)\n    @map = previous.map\n  end\nend\n```\n\n### Loading other Google Maps JS libraries\n\nGoogle Maps has several additional libraries to choose from. To load them, add the `libraries` key to your server-side rendering call:\n\n```erb\n\u003c%= Opal::GoogleMaps.google_maps(YOUR_API_KEY, libraries: %w[drawing geometry places visualization]) %\u003e\n```\n\n### Loading Google Maps asynchronously\n\nYou can use the `async` keyword argument to load the Google Maps libraries in a way that will not block rendering.\n\n```erb\n\u003c%= Opal::GoogleMaps.google_maps(YOUR_API_KEY, async: true) %\u003e\n```\n\nKeep in mind that this can cause problems if your app renders a map immediately on load. If you load Google Maps asynchronously, it isn't guaranteed to be loaded before your app. In such a case, you may get an error saying something to the effect of `google is not an object`.\n\n## Contributing\n\nBug reports and pull requests are welcome on GitHub at https://github.com/jgaskins/opal-google_maps. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.\n\n## License\n\nThe gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).\n\n## Code of Conduct\n\nEveryone interacting in the Opal::GoogleMaps project’s codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/jgaskins/opal-google_maps/blob/master/CODE_OF_CONDUCT.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjgaskins%2Fopal-google_maps","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjgaskins%2Fopal-google_maps","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjgaskins%2Fopal-google_maps/lists"}