{"id":13839291,"url":"https://github.com/allenhwkim/angularjs-google-maps","last_synced_at":"2025-09-28T19:32:02.851Z","repository":{"id":12615291,"uuid":"15286424","full_name":"allenhwkim/angularjs-google-maps","owner":"allenhwkim","description":"The Simplest AngularJS Google Maps V3 Directive ","archived":true,"fork":false,"pushed_at":"2020-01-20T17:43:59.000Z","size":6323,"stargazers_count":1523,"open_issues_count":86,"forks_count":517,"subscribers_count":81,"default_branch":"master","last_synced_at":"2024-10-30T04:47:10.462Z","etag":null,"topics":["angular","markers"],"latest_commit_sha":null,"homepage":"http://ngmap.github.io","language":"HTML","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/allenhwkim.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-12-18T15:19:23.000Z","updated_at":"2024-07-09T09:44:36.000Z","dependencies_parsed_at":"2022-08-31T00:01:11.663Z","dependency_job_id":null,"html_url":"https://github.com/allenhwkim/angularjs-google-maps","commit_stats":null,"previous_names":[],"tags_count":156,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/allenhwkim%2Fangularjs-google-maps","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/allenhwkim%2Fangularjs-google-maps/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/allenhwkim%2Fangularjs-google-maps/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/allenhwkim%2Fangularjs-google-maps/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/allenhwkim","download_url":"https://codeload.github.com/allenhwkim/angularjs-google-maps/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234555882,"owners_count":18851864,"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":["angular","markers"],"created_at":"2024-08-04T17:00:17.982Z","updated_at":"2025-09-28T19:31:54.860Z","avatar_url":"https://github.com/allenhwkim.png","language":"HTML","readme":"Google Maps AngularJS Directive\n=============================\n\u003c!--\n[![Build Status](https://travis-ci.org/allenhwkim/angularjs-google-maps.png?branch=master)](https://travis-ci.org/allenhwkim/angularjs-google-maps)\n--\u003e\n\n[Demo](https://ngmap.github.io)  \n[Documentation](https://rawgithub.com/allenhwkim/angularjs-google-maps/master/build/docs/index.html)  \n[Road Trip By StreetView](https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/street-view_road_trip.html)  \n[Maps Can Talk](https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/custom-marker.html) |\n[Custom Marker](https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/custom-marker-2.html)  \n\nIf you like this, you also may like these:\n* [ng2-map](https://github.com/ng2-ui/map) Google Maps Wrapper for Angular 2+\n* [react-openlayers](https://github.com/allenhwkim/react-openlayers) React + OpenLayers\n\nBackground\n-----------------\nThere is already [one](https://github.com/nlaplante/angular-google-maps) for this. However, I found myself taking a totally different approach than the existing one, such as:\n\n1. **Everything in tag and attributes.**   \n   Thus, users don't even need knowledge of JavaScript.\n   \n2. **Expose all original Google Maps V3 API to the user.**   \n   No hiding, no wrapping or whatsoever.\n   By doing so, programmers don't need to learn how to use this module.\n   You only need to know Google Maps V3 API.\n\nThere is a blog that introduces this module. The title of it is '[Google Map As The Simplest Way](http://allenhwkim.tumblr.com/post/70986888283/google-map-as-the-simplest-way)'\n\nTo get started\n--------------\nFor Bower users,\n\n  `$ bower install ngmap`\n\n1. Include `ng-map.min.js`:\n   `\u003cscript src=\"/bower_components/ngmap/build/scripts/ng-map.min.js\"\u003e\u003c/script\u003e`\n\n2. Include Google Maps:  \n    `\u003cscript src=\"http://maps.google.com/maps/api/js\"\u003e\u003c/script\u003e`  \n\n2. Name your AngularJS app ngMap, or add it as a dependency\n\n   `var myApp = angular.module('myApp', ['ngMap']);`\n\nTo get the map instance use the `NgMap.getMap()` function\n\n    app.controller('MyController', function(NgMap) {\n      NgMap.getMap().then(function(map) {\n        console.log(map.getCenter());\n        console.log('markers', map.markers);\n        console.log('shapes', map.shapes);\n      });\n    });\n\nFor npm users,\n\n  `$ npm install ngmap`\n\nFor Meteor users: https://atmospherejs.com/wormy/angularjs-google-maps\n\nLazy loading of Google Maps JavaScript\n---------------------------------------\n  Simply wrap the map tag with `map-lazy-load=\"https://maps.google.com/maps/api/js\"`.\n\n    \u003cdiv map-lazy-load=\"https://maps.google.com/maps/api/js\"\u003e\n      \u003cng-map center=\"41,-87\" zoom=\"3\"\u003e\u003c/ng-map\u003e\n    \u003c/div\u003e\n\n  If you need to pass in an API key to the javascript, you can set a scope\n  variable in your controller (e.g. `$scope.googleMapsUrl=\"https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE\";`).\n  This can be set from a constant value in your app to standardise the API key to pass to google for multiple controllers.\n\n    \u003cdiv map-lazy-load=\"https://maps.google.com/maps/api/js\"\n      map-lazy-load-params=\"{{googleMapsUrl}}\"\u003e\n      \u003cng-map center=\"41,-87\" zoom=\"3\"\u003e\u003c/ng-map\u003e\n    \u003c/div\u003e\n\nFAQ\n----\n## Grey area in Google Maps\n\nThe usual reason why this happens is that the size of the map is changed after the map has been initialized. If you for some reason change the size of the div, you need to trigger the \"resize\" event and possible recenter the map.\n\n     var center = map.getCenter();\n     google.maps.event.trigger(map, \"resize\");\n     map.setCenter(center);\n\nRef.\n  * http://stackoverflow.com/questions/13901520/grey-area-in-google-maps\n  * http://blog.codebusters.pl/en/google-maps-in-hidden-div/\n\n## Check if a marker is within `Map`, `Rectangle`, or `Circle`\n\n    `map.getBounds().contains(marker.getPosition());`\n\n  * http://stackoverflow.com/questions/3648545/how-can-i-check-the-marker-is-or-isnt-in-the-bounds-using-google-maps-v3\n  * https://developers.google.com/maps/documentation/javascript/3.exp/reference#Map\n  * https://developers.google.com/maps/documentation/javascript/3.exp/reference#Rectangle\n  * https://developers.google.com/maps/documentation/javascript/3.exp/reference#Circle\n\n## Calculate distance between two position\n\nYou can check this out: https://developers.google.com/maps/documentation/javascript/distancematrix.\nAs you see,  DistanceMatrix does not require map nor directive.\n\nAnother way to do this, is to use directions directive. As you see it here: https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/directions2.html, you have access to DirectionsRenderer by using `map.directionsRenderers[id]`\n\nhttps://developers.google.com/maps/documentation/javascript/reference?hl=en#DirectionsRenderer\n\nYou use `getDirections()` or `directions`, then calculate the distance from there. e.g.,\n\n  Distance:\n  `{{ map.directionsRenderers[0].directions.routes[0].legs[0].distance }}`\n\nDirectives\n----------\n\n * bicycling-layer\n * custom-control\n * custom-marker (NEW)\n * directions (NEW)\n * drawing-manager (NEW)\n * dynamic-maps-engine-layer\n * fusion-tables-layer\n * heatmap-layer\n * info-window\n * kml-layer\n * map\n * map-data\n * map-lazy-load (NEW)\n * map-type\n * map_controller\n * maps-engine-layer\n * marker\n * overlay-map-type\n * places-auto-complete\n * shape\n * street-view-panorama (NEW)\n * traffic-layer\n * transit-layer\n\nAdvanced examples\n-------------------\n- [Marker Clusterer](https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/marker-clusterer.html)\n- [Starbucks World Wide](https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/map_app.html)\n- [Road Trip By StreetView](https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/street-view_road_trip.html)\n- [Maps Can Talk](https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/custom-marker.html)\n- [Custom Marker](https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/custom-marker-2.html)\n\n[Contributors](CONTRIBUTORS.md)\n===============================\n\nContributing\n============\n- Clone the repository from GitHub.\n- Change to the cloned directory.\n- **npm install** to install the build tools\n- **gulp build** to build the JavaScript \u0026 doc files in the /build folder \u0026 run the unit tests.\n- **gulp clean** to clean up the repository by removing files and folders from previous build.\n- **gulp test** to run the Karma unit test suite.\n- **gulp test:e2e** to run the Protractor test suite. For the first test run, you may need to update the protractor webdriver manager. It will show the command on screen if this is required (node_modules/gulp-protractor/node_modules/protractor/bin/webdriver-manager update).\n- **gulp test:server** will start a web server for the testapp on http://localhost:8888\n\nLicense\n=======\n\n[MIT License](https://github.com/allenhwkim/angularjs-google-maps/blob/master/LICENSE)\n","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fallenhwkim%2Fangularjs-google-maps","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fallenhwkim%2Fangularjs-google-maps","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fallenhwkim%2Fangularjs-google-maps/lists"}