PHPackages venca-x/nettegmap - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. venca-x/nettegmap ActiveLibrary[Utility & Helpers](/categories/utility) venca-x/nettegmap ================= Nette/forms addon. Viewer, picker and new layer for Google maps 1.4.2(3w ago)4241MITPHPPHP >=8.0CI passing Since Feb 2Pushed 3w ago1 watchersCompare [ Source](https://github.com/venca-x/nettegmap)[ Packagist](https://packagist.org/packages/venca-x/nettegmap)[ RSS](/packages/venca-x-nettegmap/feed)WikiDiscussions master Synced 3d ago READMEChangelogDependencies (11)Versions (26)Used By (0) Nettegmap ========= [](#nettegmap) [![Test](https://github.com/venca-x/nettegmap/actions/workflows/tests.yml/badge.svg?branch=master)](https://github.com/venca-x/nettegmap/actions)[![Coding Style](https://github.com/venca-x/nettegmap/actions/workflows/coding-style.yml/badge.svg?branch=master)](https://github.com/venca-x/nettegmap/actions)[![Coverage Status](https://camo.githubusercontent.com/8bc9240ee4758dd45ee377edacf587c39f9cb52925c6d31cb64ad2217429f874/68747470733a2f2f636f766572616c6c732e696f2f7265706f732f6769746875622f76656e63612d782f6e65747465676d61702f62616467652e7376673f6272616e63683d6d6173746572)](https://coveralls.io/github/venca-x/nettegmap?branch=master)[![Total Downloads](https://camo.githubusercontent.com/ca2b55cc3dad1729bab3486af7e5915310340f0eed3e2a2caebd4f1624a9ad83/68747470733a2f2f706f7365722e707567782e6f72672f76656e63612d782f6e65747465676d61702f646f776e6c6f6164732e737667)](https://packagist.org/packages/venca-x/nettegmap)[![Latest Stable Version](https://camo.githubusercontent.com/2c939087116895a6ab8f505916c910dee8cd1230b178a324743e151f0deda93a/68747470733a2f2f706f7365722e707567782e6f72672f76656e63612d782f6e65747465676d61702f762f737461626c652e737667)](https://packagist.org/packages/venca-x/nettegmap)[![Latest Unstable Version](https://camo.githubusercontent.com/9c641a6f131bf89ae3dbbc3530635d54d4dd298a49efacc8dc52046dacfde588/68747470733a2f2f706f7365722e707567782e6f72672f76656e63612d782f6e65747465676d61702f762f756e737461626c652e737667)](https://packagist.org/packages/venca-x/nettegmap)[![License](https://camo.githubusercontent.com/87b7c2a9efa8ab49341db8d08c6d339adeae7eeeaa535f83297a19974b2b93a4/68747470733a2f2f706f7365722e707567782e6f72672f76656e63612d782f6e65747465676d61702f6c6963656e73652e737667)](https://packagist.org/packages/venca-x/nettegmap) Nette addon. Viewer and picker for Google maps **This branch is for Nette 3.0** VersionPHP Recommended Nettedev-master>= 8.0Nette 3.0 (Nette\\SmartObject)1.4.x>= 8.0Nette 3.0 (current; Maps JS v3.56+ Advanced Markers)1.3.x>= 8.0Nette 3.0 (Nette\\SmartObject)1.2.x>= 7.1Nette 2.4 (Nette\\SmartObject)1.1.x>= 5.3.7Nette 2.4, 2.3 (Nette\\Object)1.0.x>= 5.3.7Nette 2.4, 2.3 (Nette\\Object)### Version 1.4.0 (Maps JavaScript API 2023–2024+) [](#version-140-maps-javascript-api-20232024) - **Asynchronous API load**: the recommended pattern uses `async` on the script tag, query parameters `loading=async` and `callback=netteGMapGoogleApiReady`, and the `marker` library alongside `places` (`libraries=places,marker`). The global function `window.netteGMapGoogleApiReady` is defined in `jquery.netteGMap.js` and must be loaded **before** the Google Maps script so the callback exists when the API finishes loading. - **Advanced markers**: legacy `google.maps.Marker` is replaced by `google.maps.marker.AdvancedMarkerElement` (deprecation notice from February 2024). Map options include **`mapId`**; if you do not set a Map ID in PHP, the client uses Google’s `DEMO_MAP_ID` (suitable for development; for production, create a Map ID in [Google Cloud Console](https://console.cloud.google.com/) and set it with `setMapId()` on the control). - **Info windows** use `infowindow.open({ map, anchor })` for advanced markers. **Custom marker icons** use the `content` option with an `` node. - **Geocoding** requests use the `location` field instead of the deprecated `latLng` key. - **Bugfix**: the viewer with a fixed center no longer referenced an out-of-scope `mapProp` variable; `map.setCenter()` is used instead. - **Draggable picker**: `dragend` is bound once on the picker marker; repeated updates no longer stack duplicate listeners. Při aktualizaci z 1.3.x je nutné upravit načtení skriptu v šabloně (viz Configuration) a zkontrolovat pořadí: jQuery → `jquery.netteGMap.js` → asynchronní tag Maps API s `callback=netteGMapGoogleApiReady`. Installation ------------ [](#installation) Install with composer: ``` composer require venca-x/nettegmap:^1.4 ``` (Or `dev-master` for the latest commit.) ``` You need use jQuery. Configuration ------------- bootstrap.php add register line OR add line in config.neon ```php Nette\Forms\NetteGMapPicker::register();//require only form picker ``` OR add line to config.neon: ``` extensions: nettegmap: Nette\Forms\NetteGMapPicker ``` ``` ``` - Generate **YOUR\_API\_KEY** in [Google Cloud Console](https://console.cloud.google.com/) (APIs & Services → Credentials). - Enable **Maps JavaScript API** and, for the picker search box, a Places-compatible API (e.g. **Places API** / Places API (New) as required by your project). - The URL must include `libraries=places,marker` (marker library is required for advanced markers), `loading=async`, and `callback=netteGMapGoogleApiReady` (must match the function name in `jquery.netteGMap.js`). **Volitelné — vlastní Map ID (doporučeno pro produkci):** v [Cloud Console](https://console.cloud.google.com/) vytvořte Map ID a v presenteru / komponentě zavolejte např. `$viewer->setMapId('VÁŠ_MAP_ID');` (metoda je na společné bázi `BaseNetteGMap`). Bez nastavení zůstává fallback `DEMO_MAP_ID` v prohlížeči. Usage with Bower / bundler -------------------------- [](#usage-with-bower--bundler) Load the Google Maps script **after** the bundle that includes `jquery.netteGMap.js`, with `callback=netteGMapGoogleApiReady` and `libraries=places,marker` (see Configuration). Example Grunt/Gulp order: ``` concat: { js: { src: ['bower_components/jquery/dist/jquery.min.js', 'vendor/nette/forms/src/assets/netteForms.js', 'bower_components/bootstrap/dist/js/bootstrap.min.js', 'vendor/venca-x/nettegmap/client/js/jquery.netteGMap.js', 'www/js/main.js' ], dest: 'www/js/compiled.min.js' } }, cssmin: { target: { files: { 'www/css/main.min.css': ['www/css/main.css','vendor/venca-x/nettegmap/client/css/netteGMap.css'] } } } ``` Simple usage viewer marker -------------------------- [](#simple-usage-viewer-marker) This example show how to view map with marker: [![viewer simple](docs/img/viewer-simple.png?raw=true "Example")](docs/img/viewer-simple.png?raw=true) ``` protected function createComponentNetteGMapSimpleViewer() { $markers = array(); $markers[] = new \Marker("home", "description", "49.1695254488", "14.2521617334"); //$netteGMapViewer->setCenterMap(new \GpsPoint(49.1695254488,14.2521617334)); //$netteGMapViewer->setScrollWheel(true); //$netteGMapViewer->setZoom(12); //$netteGMapViewer->setMapId('YOUR_GOOGLE_MAP_ID'); // volitelné, viz verze 1.4 $netteGMapViewer = new \NetteGMapViewer($markers); return $netteGMapViewer; } ``` ``` {control netteGMapSimpleViewer} ``` Usage viewer marker with polyline --------------------------------- [](#usage-viewer-marker-with-polyline) This example show how to show map with marker: [![viewer polyline](docs/img/viewer-polyline.png?raw=true "Example")](docs/img/viewer-polyline.png?raw=true) ``` protected function createComponentNetteGMapViewerPolyline() { $markers = array(); $markers[] = new \Marker("home", "description", "49.1695254488", "14.2521617334"); //$netteGMapViewer->setCenterMap(new \GpsPoint(49.1695254488,14.2521617334)); //$netteGMapViewer->setScrollwheel(TRUE); //$netteGMapViewer->setZoom(12); $netteGMapViewer = new \NetteGMapViewer($markers); //add polyline to map $coordinates = array( new \GpsPoint(49.169669, 14.252152), new \GpsPoint(49.169399, 14.252175), new \GpsPoint(49.169532, 14.251842), new \GpsPoint(49.169669, 14.252152) ); $polyLine = new \PolyLine($coordinates); $netteGMapViewer->setPolyLine($polyLine); return $netteGMapViewer; } ``` ``` {control netteGMapViewerPolyline} ``` Usage picker in form -------------------- [](#usage-picker-in-form) This example show how to set GPS position on map: [![picker](docs/img/picker.png?raw=true "Example")](docs/img/picker.png?raw=true) ``` protected function createComponentGMapForm() { $form = new Nette\Application\UI\Form; $form->addGMap('position', 'Position:') ->setWidth("500") ->setHeight("500"); //->showMyActualPositionButton(); //->setScrollwheel(TRUE); $form->addSubmit('send', 'Save'); $form->onSuccess[] = [$this, 'gMapFormSucceeded']; return $form; } public function gMapFormSucceeded($form) { $values = $form->getValues(); dump($values); exit(); } ``` Set default position value for picker: ``` $form->setDefaults(array( 'position' => array( 'latitude' => "49.1695254488", 'longitude' => "14.2521617334", ), )); ``` Latte: ``` {control gMapForm} ``` After send form: ``` Nette\ArrayHash #f110 position => array (2) latitude => "50.0923932109" (13) longitude => "14.4580078125" (13) ``` Usage layer ----------- [](#usage-layer) This example show how to add own picture on map as a new layer: [![layer](docs/img/layer.png?raw=true "Example")](docs/img/layer.png?raw=true) ``` protected function createComponentNetteGMapLayer() { $netteGMapViewer = new \NetteGMapLayer(); //$netteGMapViewer->setCenterMap(new \GpsPoint("48.977153", "14.454486")); $netteGMapViewer->setHeight("600px"); $netteGMapViewer->setScrollwheel(TRUE); $netteGMapViewer->setZoom(18); $netteGMapViewer->setLayerUrlImage("http://www.barcampjc.cz/pictures/parkoviste.jpg"); $netteGMapViewer->setLayerLeftDownCorner(new \GpsPoint(48.97685376928403, 14.453693823169715)); $netteGMapViewer->setLayerRightTopCorner(new \GpsPoint(48.97771464665134, 14.45583921230309)); return $netteGMapViewer; } ``` Latte: ``` {control netteGMapLayer} ``` --- Get coordinates from address ---------------------------- [](#get-coordinates-from-address) ``` \GMapUtils::getCoordinatesFromAddress("Prague, Czech Republic") ``` return ``` array( "gps_lat" => 50.0755381, "gps_lon" => 14.4378005) ``` Get address from coordinates ---------------------------- [](#get-address-from-coordinates) ``` \GMapUtils::getAddressFromCoordinates( 50.0755381, 14.4378005 ) ``` return ``` Náměstí Míru 820/9, 120 00 Praha-Praha 2, Czech Republic ``` Set marker position from out script (JS) ---------------------------------------- [](#set-marker-position-from-out-script-js) ``` $( "#my-div-map div.nettegmap-canvas" ).setMarkerPosition( 14.1111, 48.2222 ); ``` Limits looking coordinates -------------------------- [](#limits-looking-coordinates) Users of the free API: 2,500 requests per 24 hour period. 5 requests per second. Callback after change position marker in main.js ------------------------------------------------ [](#callback-after-change-position-marker-in-mainjs) When you want call your code after marker position chaged, you can be inspired by this code. main.js ``` $( function() { $( 'body' ).netteGMapPicker( { //my callback marker change position changePositionMarker: function( results ) { var district = results[4].formatted_address.split(","); //alert( district[0] ); $("select#frm-addCompetitionForm-district_id option").each(function() { this.selected = ( this.text === district[0] ); }); $("select#frm-editCompetitionForm-district_id option").each(function() { this.selected = ( this.text === district[0] ); }); //alert('changePositionMarker'); } } ); } ); ``` ### Health Score 53 — FairBetter than 97% of packages Maintenance95 Actively maintained with recent releases Popularity17 Limited adoption so far Community7 Small or concentrated contributor base Maturity78 Established project with proven stability Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~170 days Recently: every ~208 days Total 25 Last Release 22d ago PHP version history (5 changes)v1.0.0PHP >= 5.3.7 1.2.0PHP >=7.1 1.3.2PHP >=7.2 1.3.5PHP >=7.4 v1.3.x-devPHP >=8.0 ### Community Maintainers ![](https://www.gravatar.com/avatar/118375a8804ba0a6a9e67531be1064cf2cf1ddd4669de5ca7cdc6f1618add53e?d=identicon)[venca-x](/maintainers/venca-x) --- Top Contributors [![venca-x](https://avatars.githubusercontent.com/u/4173836?v=4)](https://github.com/venca-x "venca-x (63 commits)") ### Code Quality Static AnalysisPHPStan Type Coverage Yes ### Embed Badge ![Health badge](/badges/venca-x-nettegmap/health.svg) ``` [![Health](https://phpackages.com/badges/venca-x-nettegmap/health.svg)](https://phpackages.com/packages/venca-x-nettegmap) ``` ### Alternatives [nette/code-checker ✅ Nette CodeChecker: A simple tool to check source code against a set of Nette coding standards. 881.7M6](/packages/nette-code-checker)[nasext/dependent-select-box Dependent Select Box for Nette Framework. 21262.8k2](/packages/nasext-dependent-select-box)[uestla/twigrid Experimental DataGrid for Nette Framework 1712.3k2](/packages/uestla-twigrid) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)