{"id":16532447,"url":"https://github.com/vheissu/aurelia-google-maps","last_synced_at":"2025-06-13T13:02:02.189Z","repository":{"id":2573847,"uuid":"42177889","full_name":"Vheissu/aurelia-google-maps","owner":"Vheissu","description":"A highly configurable custom element for use in your Aurelia applications for inserting Google Maps into your application.","archived":false,"fork":false,"pushed_at":"2023-07-20T06:54:47.000Z","size":1322,"stargazers_count":45,"open_issues_count":6,"forks_count":35,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-05-08T00:39:04.732Z","etag":null,"topics":["aurelia-applications","aurelia-cli","aurelia-plugins","google","google-maps"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/Vheissu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2015-09-09T12:48:15.000Z","updated_at":"2025-04-13T19:33:38.000Z","dependencies_parsed_at":"2024-01-11T00:06:39.617Z","dependency_job_id":"d8e64ee4-548c-4f65-b56d-58d921d6367e","html_url":"https://github.com/Vheissu/aurelia-google-maps","commit_stats":{"total_commits":150,"total_committers":29,"mean_commits":5.172413793103448,"dds":0.3733333333333333,"last_synced_commit":"c1753bf25c7eab8abc8f45aac9f1d42e1495a678"},"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vheissu%2Faurelia-google-maps","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vheissu%2Faurelia-google-maps/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vheissu%2Faurelia-google-maps/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vheissu%2Faurelia-google-maps/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Vheissu","download_url":"https://codeload.github.com/Vheissu/aurelia-google-maps/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252978667,"owners_count":21834910,"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":["aurelia-applications","aurelia-cli","aurelia-plugins","google","google-maps"],"created_at":"2024-10-11T18:12:40.338Z","updated_at":"2025-05-08T00:39:07.358Z","avatar_url":"https://github.com/Vheissu.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# aurelia-google-maps (for Aurelia 1)\n\n[![Join the chat at https://gitter.im/Vheissu/aurelia-google-maps](https://badges.gitter.im/Vheissu/aurelia-google-maps.svg)](https://gitter.im/Vheissu/aurelia-google-maps?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\nA highly configurable custom element for use in your Aurelia applications for\ninserting Google Maps into your application.\n\n## To Install\n\n**Webpack/Aurelia CLI**\n\n``` shell\nnpm install aurelia-google-maps --save\n```\n\n### CLI User?\nThe Aurelia CLI requires some additional configuration to use this plugin. Open up your `aurelia.json` file located in the `aurelia_project` directory and at the bottom of the `dependencies` section add in the following:\n\n```\n{\n    \"name\": \"aurelia-google-maps\",\n    \"path\": \"../node_modules/aurelia-google-maps/dist/amd\",\n    \"main\": \"index\"\n}\n```\n\n**Jspm**\n\n``` shell\njspm install aurelia-google-maps\n```\n\n## Configuring For Use\n\nInside of your `main.js`/`main.ts` file simply load the plugin inside of\nthe configure method using `.plugin()`\n\n``` javascript\nexport function configure(aurelia) {\n    aurelia.use\n        .plugin(PLATFORM.moduleName('aurelia-google-maps'), config =\u003e {\n            config.options({\n                apiKey: 'myapiKey', // use `false` to disable the key\n                apiLibraries: 'drawing,geometry', //get optional libraries like drawing, geometry, ... - comma seperated list\n                options: { panControl: true, panControlOptions: { position: 9 } }, //add google.maps.MapOptions on construct (https://developers.google.com/maps/documentation/javascript/3.exp/reference#MapOptions)\n                language:'' | 'en', // default: uses browser configuration (recommended). Set this parameter to set another language (https://developers.google.com/maps/documentation/javascript/localization)\n                region: '' | 'US' // default: it applies a default bias for application behavior towards the United States. (https://developers.google.com/maps/documentation/javascript/localization)\n                markerCluster: {\n                    enable: false,\n                    src: 'https://cdn.rawgit.com/googlemaps/v3-utility-library/99a385c1/markerclusterer/src/markerclusterer.js', // self-hosting this file is highly recommended. (https://developers.google.com/maps/documentation/javascript/marker-clustering)\n                    imagePath: 'https://cdn.rawgit.com/googlemaps/v3-utility-library/tree/master/markerclusterer/images/m', // the base URL where the images representing the clusters will be found. The full URL will be: `{imagePath}{[1-5]}`.`{imageExtension}` e.g. `foo/1.png`. Self-hosting these images is highly recommended. (https://developers.google.com/maps/documentation/javascript/marker-clustering)\n                    imageExtension: 'png',\n                }\n            });\n        })\n}\n```\n\n## Using It\n\nNow you have Google Maps configured, to use it simply use the custom\nelement `\u003cgoogle-map\u003e\u003c/google-map\u003e` in your views.\n\n### Latitude/Longitude\n\nProvide standard latitude and longitude values.\n\n``` html\n\u003ctemplate\u003e\n    \u003cgoogle-map latitude=\"37.323\" longitude=\"-122.0527\"\u003e\u003c/google-map\u003e\n\u003c/template\u003e\n```\n\n### Address\n\nIn prior versions, it was possible to bind a property named `address` to the map. This was removed in favor of importing the GoogleMapsAPI service and geocoding the address. In many cases, you'll receive multiple results back from the geocoding service and you may wish to allow the user to select the option.\n\n### Zooming A Map\n\nTaking the first example, let's add a `zoom` attribute and supply a value of 15.\nBy default this is 8 if you do not supply a zoom value.\n\n``` html\n\u003ctemplate\u003e\n    \u003cgoogle-map latitude=\"37.323\" longitude=\"-122.0527\" zoom=\"15\"\u003e\u003c/google-map\u003e\n\u003c/template\u003e\n```\n\n### Automatically update bounds from markers\n\nAutomatically adjust the bounds of the map by using the provided markers\n\n``` html\n\u003ctemplate\u003e\n    \u003cgoogle-map markers.bind=\"myMarkers\" auto-update-bounds=\"true\"\u003e\u003c/google-map\u003e\n\u003c/template\u003e\n```\n\nThese properties also support working with Aurelia's databinding, so you can\nbind any of the above to variables in your viewmodel and the map updates\nwhen these values are changed.\n\n### Map loaded callback (with map reference)\nWhen the map is loaded and instantiated, you can call a function inside of your view-model.\n\n``` html\n\u003ctemplate\u003e\n    \u003cgoogle-map map-loaded.call=\"myLoadedCallback(map, $event)\"\u003e\u003c/google-map\u003e\n\u003c/template\u003e\n```\n\n### Map Type\n\nSet the Google Basic Map Type.  See [docs](https://developers.google.com/maps/documentation/javascript/maptypes#BasicMapTypes)\n\n##### Supported Constants\n* HYBRID - This map type displays a transparent layer of major streets on satellite images.\n* ROADMAP -\tThis map type displays a normal street map.\n* SATELLITE -\tThis map type displays satellite images.\n* TERRAIN\t- This map type displays maps with physical features such as terrain and vegetatio\n\n##### Example\n``` html\n\u003ctemplate\u003e\n    \u003cgoogle-map markers.bind=\"myMarkers\" map-type=\"HYBRID\"\u003e\u003c/google-map\u003e\n\u003c/template\u003e\n```\n\n### Map Click Event\n\nIt is possible to catch the map click events as specified by the [Google Maps documentation](https://developers.google.com/maps/documentation/javascript/events#ShapeEvents).\nThe map's `click` event is added as a CustomEvent to the `\u003cgoogle-map\u003e` DOM\nelement with the event data added to the `detail` key.\nSome events are also propagated via Aurelia's Event Aggregator.\n\n#### Example\n\n``` html\n\u003cgoogle-map map-click.delegate=\"myEventHandler($event)\"\u003e\u003c/google-map\u003e\n```\n\n``` javascript\nmyEventHandler(event) {\n    var latLng = event.detail.latLng,\n        lat = latLng.lat(),\n        lng = latLng.lng();\n}\n```\n\n### Event Aggregation\n\nIn 2.0 of this plugin, there were several events propagated via the Aurelia Event Aggregator.\n\nThese events are now handled as DOM events. [See here](#supported-events)\n\n### Render array of markers\n\nMarkers can be bound to the element with the `markers` attribute like below:\n\n``` html\n\u003cgoogle-map markers.bind=\"myMarkers\"\u003e\u003c/google-map\u003e\n```\n\nThis markers variable should be an array of objects with at minimum either both the `latitude` and `longitude` key/value pairs or just the `address` key/value pair.\nAddresses for which geocoding fails get logged to the console as info:\n\n``` javascript\nvar myMarkers = [\n\t{\n        latitude: -27.451673,\n        longitude: 153.043981\n    },\n    {\n       address: '1 Avenue B New York, NY 10009'\n    },\n    {\n        latitude: 37.754582,\n        longitude: -122.446418,\n        icon: '/images/bullseye.png',\n        title: 'My Big Target',\n        custom: {id: 123456},\n        infoWindow: {content: `\n                \u003cdiv id=\"content\"\u003e\n                  \u003cdiv id=\"siteNotice\"\u003e\u003c/div\u003e\n                  \u003ch1 id=\"firstHeading\" class=\"firstHeading\"\u003eUluru\u003c/h1\u003e\n                  \u003cdiv id=\"bodyContent\"\u003e\n                    \u003cp\u003e\u003cb\u003eUluru\u003c/b\u003e, also referred to as \u003cb\u003eAyers Rock\u003c/b\u003e, is a large sandstone rock formation in the southern part of the Northern Territory, central Australia. It lies 335\u0026#160;km (208\u0026#160;mi) south west of the nearest large town, Alice Springs; 450\u0026#160;km (280\u0026#160;mi) by road. Kata Tjuta and Uluru are the two major features of the Uluru - Kata Tjuta National Park. Uluru is sacred to the Pitjantjatjara and Yankunytjatjara, the Aboriginal people of the area. It has many springs, waterholes, rock caves and ancient paintings. Uluru is listed as a World Heritage Site.\u003c/p\u003e\n                    \u003cp\u003eAttribution: Uluru, \u003ca href=\"https://en.wikipedia.org/w/index.php?title=Uluru\u0026oldid=297882194\"\u003ehttps://en.wikipedia.org/w/index.php?title=Uluru\u003c/a\u003e last visited June 22, 2009).\u003c/p\u003e\n                  \u003c/div\u003e\n                \u003c/div\u003e`}\n    }\n];\n```\n\n#### Supported marker properties\n\n*   `latitude` (required)\n*   `longitude` (required)\n*   `icon` (optional) - string|Icon|Symbol - see [docs](\u003chttps://developers.google.com/maps/documentation/javascript/reference#MarkerOptions\u003e)\n*   `label` (optional) - string|MarkerLabel - see [docs](\u003chttps://developers.google.com/maps/documentation/javascript/reference#MarkerOptions\u003e)\n*   `title` (optional) - string - Rollover text, see [docs](\u003chttps://developers.google.com/maps/documentation/javascript/reference#MarkerOptions\u003e)\n*   `custom` (optional) - store arbitrary data (e.g. an `id` field) in this object, retrieve it from the `googlemap:marker:click` event payload\n*   `infoWindow` (optional) - object - If set, the `googlemap:marker:click` evetn will not be called, instead an infowindow containing the given content will show up - see [docs](https://developers.google.com/maps/documentation/javascript/infowindows)\n\n\n### Marker clustering\n\nThis options allows the clustering of markers that are near each other.\nAll the config and styling options can be found [here](https://github.com/googlemaps/v3-utility-library/blob/master/markerclusterer/src/markerclusterer.js#L40).\n\n### \u003ca name=\"drawing-mode\"\u003e\u003c/a\u003eDrawing Mode\n\nAllows usage of Google Maps' Drawing API to add Markers, Polylines, Polygons, Rectangles and Circles to the map instance. To allow this, simply set the defaults as below:\n\n``` html\n\u003cgoogle-map draw-enabled.bind=\"true\" draw-mode=\"polygon\"\u003e\u003c/google-map\u003e\n```\n\nThe `draw-mode` can take the same values as defined [here](https://developers.google.com/maps/documentation/javascript/reference#OverlayType)\n\n#### Drawing Events\n\nOne of the drawing events has been exposed to the element as a `CustomEvent` and a callback can be set as below:\n\n``` html\n\u003cgoogle-map map-overlay-complete.delegate=\"callback($event)\"\u003e\u003c/google-map\u003e\n```\n\nThe event object is the same as given [here](https://developers.google.com/maps/documentation/javascript/reference#OverlayCompleteEvent) with the addition of the `encoded` variable. This is the encoded polyline (you can play around with it [here](https://developers.google.com/maps/documentation/utilities/polylineutility)).\n\nIn addition to the `map-overlay-complete` event, an event is also propagated through Aurelia's Event Aggregator:\n\n* `googlemap:draw:overlaycomplete` - Emitted when an overlay drawing has been completed\n\n## Supported Properties\n\n* latitude: A latitude value for the map\n* longitude: A longitude value for the map\n* address: Provide an address that gets geocoded into latitude and longitude coordinates\n* zoom: A zoom value, default is 8\n* disableDefaultUi: A boolean of true or false. Default is false. (use disable-default-ui=\"true\")\n\n##### Example:\n``` html\n\u003cgoogle-map disable-default-ui=\"true\"\u003e\u003c/google-map\u003e\n```\n\n* markers: An array of objects with key/value pairs as described above.\n* polygons: An array of polygon objects\n* options: A Google Maps options object specified [here](https://developers.google.com/maps/documentation/javascript/3.exp/reference#MapOptions)\n* auto-update-bounds: Specifies whether the bounds should automatically update when the markers/polygons given changes\n* auto-info-window: Specifies whether to automatically popup the info window on a marker/polygon when the marker/polygon is clicked (only works when an infowindow was set on that marker/polygon)\n* Drawing mode options see [above](#drawing-mode)\n\n## \u003ca name=\"supported-events\"\u003e\u003c/a\u003eSupported Events\n\n* map-click: Delegate a handler with `map-click.delegate=\"callback($event)\"`\n* map-overlay-complete: Delegate a handler with `map-overlay-complete.delegate=\"callback($event)\"`\n* marker-render: Delegate a handler with `marker-render.delegate=\"callback($event)\"`\n* marker-click: Delegate a handler with `marker-click.delegate=\"callback($event)\"`\n* marker-mouse-over: Delegate a handler with `marker-mouse-over.delegate=\"callback($event)\"`\n* marker-mouse-out: Delegate a handler with `marker-mouse-out.delegate=\"callback($event)\"`\n* polygon-click: Delegate a handler with `polygon-click.delegate=\"callback($event)\"`\n* polygon-render: Delegate a handler with `polygon-render.delegate=\"callback($event)\"`\n* info-window-show: Delegate a handler with `info-window-show.delegate=\"callback($event)\"`\n* info-window-close: Delegate a handler with `info-window-close.delegate=\"callback($event)\"`\n* map-loaded: A function handler that handles when the map is loaded. `map-loaded.bind=\"handler\"`\n* Drawing mode events see [above](#drawing-mode)\n\n## Todo\nThis element still is missing some features, but they are in development.\n\n*   Expand upon markers ability to allow markers supplied by plugin to add\n    themselves\n\n*   Add in more configuration options\n\n*   Work on making the custom element easier to extend\n\n*   Work on supporting click events and events inside of the map,\n    with callbacks support\n\n*   Allow more marker options (color, label, etc.)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvheissu%2Faurelia-google-maps","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvheissu%2Faurelia-google-maps","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvheissu%2Faurelia-google-maps/lists"}