{"id":13701567,"url":"https://github.com/angular-ui/ui-map","last_synced_at":"2025-05-04T21:31:05.851Z","repository":{"id":57741681,"uuid":"8419922","full_name":"angular-ui/ui-map","owner":"angular-ui","description":"Google Maps","archived":true,"fork":false,"pushed_at":"2016-06-19T21:59:36.000Z","size":6153,"stargazers_count":289,"open_issues_count":30,"forks_count":89,"subscribers_count":35,"default_branch":"master","last_synced_at":"2025-04-25T19:14:34.980Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":" http://angular-ui.github.io/ui-map","language":"JavaScript","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/angular-ui.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-02-25T22:38:48.000Z","updated_at":"2025-02-20T04:39:08.000Z","dependencies_parsed_at":"2022-09-09T11:51:32.677Z","dependency_job_id":null,"html_url":"https://github.com/angular-ui/ui-map","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-ui%2Fui-map","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-ui%2Fui-map/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-ui%2Fui-map/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-ui%2Fui-map/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/angular-ui","download_url":"https://codeload.github.com/angular-ui/ui-map/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252403892,"owners_count":21742459,"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":[],"created_at":"2024-08-02T20:01:49.438Z","updated_at":"2025-05-04T21:31:04.743Z","avatar_url":"https://github.com/angular-ui.png","language":"JavaScript","readme":"# UI.Map [![Build Status](https://secure.travis-ci.org/angular-ui/ui-map.png)](http://travis-ci.org/angular-ui/ui-map)\n\nThis directive allows you to add [Google Maps Javascript API](https://developers.google.com/maps/) elements.\n\n## Requirements\n\n- AngularJS\n- [UI.Event](https://github.com/angular-ui/ui-event)\n- [Google Maps Javascript API 3.x](https://developers.google.com/maps/documentation/javascript/)\n\n## Usage\n\nYou can get it from [Bower](http://bower.io/)\n\n```sh\nbower install angular-ui-map\n```\n\nThis will copy the UI.Map files into a `bower_components` folder, along with its dependencies. Load the script files in your application:\n\n```html\n\u003cscript type=\"text/javascript\" src=\"bower_components/angular/angular.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"bower_components/angular-ui-event/dist/event.min.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"bower_components/angular-ui-map/src/map.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"https://maps.googleapis.com/maps/api/js?v=3.exp\u0026sensor=false\u0026callback=onGoogleReady\"\u003e\u003c/script\u003e\n```\n\n__Make sure to listen to the [callback parameter when loading the Google Maps API](https://developers.google.com/maps/documentation/javascript/examples/map-simple-async) !\nThe API must be fully loaded before this module !__\nHere we name this callback `onGoogleReady`. To load your angular app after the Google Maps API you can start it with [angular.bootstrap](http://docs.angularjs.org/api/angular.bootstrap).\n\n```javascript\nfunction onGoogleReady() {\n  angular.bootstrap(document.getElementById(\"map\"), ['app.ui-map']);\n}\n```\n\nAdd the UI.Map module as a dependency to your application module :\n\n```javascript\nvar myAppModule = angular.module('app.ui-map', ['ui.map']);\n```\n\nFinally, add the directive to your html:\n\n```html\n\u003csection id=\"map\" ng-controller=\"MapCtrl\" \u003e\n  \u003cdiv ui-map=\"myMap\" ui-options=\"mapOptions\" class=\"map-canvas\"\u003e\u003c/div\u003e\n\u003c/section\u003e\n```\nNote that `myMap` will be a [google.maps.Map class](https://developers.google.com/maps/documentation/javascript/reference#Map), and `mapOptions` a [google.maps.MapOptions object](https://developers.google.com/maps/documentation/javascript/reference#MapOptions) (see [below](#options)).\n\nTo see something it's better to add some CSS, like\n\n```css\n.map-canvas { height: 400px; }\n```\n\n## Options\n\n[google.maps.MapOptions object](https://developers.google.com/maps/documentation/javascript/reference#MapOptions) can be passed through the main directive attribute`ui-map`.\n\n```javascript\nmyAppModule.controller('MapCtrl', ['$scope', function ($scope) {\n    $scope.mapOptions = {\n      center: new google.maps.LatLng(35.784, -78.670),\n      zoom: 15,\n      mapTypeId: google.maps.MapTypeId.ROADMAP\n    };\n  }]);\n```\n\n### UI.Event\n\n[UI.Event](https://github.com/angular-ui/ui-event) allows you to specify custom behavior over user events. You just need to prefix the official event by __map-__ to bind a callback to it.\n\nFor example, the _click_ or *zoom_changed* event of the [google.maps.Map class](https://developers.google.com/maps/documentation/javascript/reference#Map) can be used through the UI.Event object keys __map-click__ and **map-zoom_changed** :\n\n```html\n\u003csection id=\"map\" ng-controller=\"MapCtrl\" \u003e\n  \u003cdiv  ui-map=\"myMap\"ui-options=\"mapOptions\" class=\"map-canvas\"\n        ui-event=\"{'map-click': 'addMarker($event, $params)', 'map-zoom_changed': 'setZoomMessage(myMap.getZoom())' }\"\n  \u003e\u003c/div\u003e\n\u003c/section\u003e\n```\n\n\n## Testing\n\nWe use Karma and jshint to ensure the quality of the code.  The easiest way to run these checks is to use grunt:\n\n```sh\nnpm install -g grunt-cli\nnpm install \u0026\u0026 bower install\ngrunt\n```\n\nThe karma task will try to open Firefox and Chrome as browser in which to run the tests.  Make sure this is available or change the configuration in `test\\karma.conf.js`\n\n\n### Grunt Serve\n\nWe have one task to serve them all !\n\n```sh\ngrunt serve\n```\n\nIt's equal to run separately:\n\n* `grunt connect:server` : giving you a development server at [http://127.0.0.1:8000/](http://127.0.0.1:8000/).\n\n* `grunt karma:server` : giving you a Karma server to run tests (at [http://localhost:9876/](http://localhost:9876/) by default). You can force a test on this server with `grunt karma:unit:run`.\n\n* `grunt watch` : will automatically test your code and build your demo.  You can demo generation with `grunt build:gh-pages`.\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangular-ui%2Fui-map","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fangular-ui%2Fui-map","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangular-ui%2Fui-map/lists"}