{"id":22296285,"url":"https://github.com/doishub/google-maps-viewer","last_synced_at":"2025-07-29T01:32:26.964Z","repository":{"id":77374189,"uuid":"194226799","full_name":"doishub/google-maps-viewer","owner":"doishub","description":"Google Maps Viewer - A simple plugin to display Google Maps","archived":true,"fork":false,"pushed_at":"2020-01-02T16:05:54.000Z","size":35,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-25T22:36:51.445Z","etag":null,"topics":["api","geosjon","google","javascript","maps","vanilla"],"latest_commit_sha":null,"homepage":null,"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/doishub.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-06-28T07:17:56.000Z","updated_at":"2025-01-16T06:48:56.000Z","dependencies_parsed_at":null,"dependency_job_id":"7a3c597e-2dbd-4591-8612-94e76708c5b2","html_url":"https://github.com/doishub/google-maps-viewer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/doishub/google-maps-viewer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doishub%2Fgoogle-maps-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doishub%2Fgoogle-maps-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doishub%2Fgoogle-maps-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doishub%2Fgoogle-maps-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/doishub","download_url":"https://codeload.github.com/doishub/google-maps-viewer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doishub%2Fgoogle-maps-viewer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267616577,"owners_count":24116154,"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","status":"online","status_checked_at":"2025-07-28T02:00:09.689Z","response_time":68,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["api","geosjon","google","javascript","maps","vanilla"],"created_at":"2024-12-03T17:44:51.188Z","updated_at":"2025-07-29T01:32:26.957Z","avatar_url":"https://github.com/doishub.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Google Maps Viewer\nA simple plugin to display Google Maps\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/doishub/google-maps-viewer/blob/master/LICENSE)\n\n## How to Use\n##### Google Maps Viewer has a .js file in addition to the Google Maps library and other useful Plugins.\n```html\n    \u003cscript src=\"https://maps.googleapis.com/maps/api/js?key=YOUR-API-TOKEN\u0026callback=onGoogleMapsApiReady\" async\u003e\u003c/script\u003e\n    \u003cscript src=\"js/google-maps-viewer.js\"\u003e\u003c/script\u003e\n    \n    \u003c!-- Optional for Cluster use --\u003e\n    \u003cscript src=\"https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/markerclusterer.js\"\u003e\u003c/script\u003e\n    \n    \u003c!-- Optional for Spiderfier use --\u003e\n    \u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/OverlappingMarkerSpiderfier/1.0.3/oms.min.js\"\u003e\u003c/script\u003e\n```\n\n##### Create a container for the map\n```html\n    \u003cdiv id=\"myMap\"\u003e\u003c/div\u003e\n```\n\n##### Initialize a simple map\n ```javascript\n     var map = new GoogleMapsViewer('map', {\n         initInstant: true,\n         map: {\n             zoom: 12,\n             lat: 51.0968605,\n             lng: 5.9690903\n         }\n     });\n ```\n \n## Options\n##### Defaults\n```javascript\n{\n    initInstant: false,\n    source: {\n        id: 'source',\n        type: 'geojson',\n        path: false,\n        param: null,\n    },\n    marker: {\n        icon: null,\n        options: null\n    },\n    popup: {\n        showEvent: 'click',\n        hideEvent: false,\n        options: null,\n        propSelector: 'template',\n        source: {\n            path: false,\n            param: null,\n            loader: true,\n            loaderMarkup: '\u003cspan class=\"loader\"\u003e\u003c/span\u003e'\n        }\n    },\n    spider: {\n        spiderfier: false,\n        closePopupOnUnspiderfy: true,\n        format: null,\n        options: {\n            keepSpiderfied: true,\n            markersWontMove: true,\n            markersWontHide: true,\n            basicFormatEvents: false\n        }\n    },\n    cluster: {\n        clustering: false,\n        clusterSteps: null,\n        styles: null,\n        options: {\n            maxZoom: 14\n        }\n    },\n    map: {\n        bounds: false,\n        interactive: true,\n        mapTypeControl: false,\n        fullscreen: true,\n        streetview: true,\n        scrollwheel: false,\n        gestureHandling: 'cooperative',\n        style: 'roadmap',\n        styles: null,\n        zoom: 6,\n        minZoom: 3,\n        maxZoom: 16,\n        lat: null,\n        lng: null\n    }\n}\n```\n\n## Examples\n### Load Data via GEOJson\n```javascript\nsource: {\n    id: 'source',               // Source-ID\n    type: 'geojson',            // Source-Type\n    path: 'your/geosjon/path',  // Path to your GEOJson \n    param: {                    // optional Parameters\n        param1: 'Hello',\n        param2: 'World'\n    }\n}\n``` \n\n### Popups\n```javascript\npopup: {\n    showEvent: 'mouseover', \n    hideEvent: 'mouseleave',\n    options: {\n        ...                     //  See google documentation\n    }\n}\n```\n\n#### Loading Popups asynchronously\nIf you want to load popups asynchronously, you have several options. You can load popups directly via GEOJson, or only by clicking (or any other event).\n```javascript\npopup: {\n    propSelector: 'template',                           // Property name to define from which field the content of a popup is read (asynchronous only) \n    source: {\n        path: 'your/popup/template/path',               // Path to your HTML content\n        param: {                                        // optional Parameters\n            param1: 'Hello',\n            param2: 'World'\n        }\n        loader: true,                                   // Show a loader while loading\n        loaderMarkup: '\u003cspan class=\"loader\"\u003e\u003c/span\u003e'\n    }\n}\n```\n\n##### Use placeholders to add dynamic data to the path\nSometimes it is necessary to define a separate query for each marker on the map. In order to be able to use placeholders, it is necessary to specify them using `markerProps` (Markers loaded via a GEOJson are automatically filled with the transmitted `properties`-Object).\n```javascript\npopup: { \n    source: {\n        path: 'your/popup/template/%id%',               // Path to your HTML content with placeholder\n    }\n}\n```\nIn this example, the `markerProps` object must contain the field `id`. If this is not the case, the value is not replaced.\n\n## Methods\n\n##### Returns the Viewer-Object\n```javascript\ngetViewer()\n```\n\n##### Add a Marker to the map \n```javascript\naddMarker(\n    latLng,        // Array or google.maps.LatLng Object\n    htmlContent,   // Popup content (optional)\n    markerOptions, // Passing more options for added marker (optional)\n    markerProps    // Own marker properties (optional)\n)\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoishub%2Fgoogle-maps-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdoishub%2Fgoogle-maps-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoishub%2Fgoogle-maps-viewer/lists"}