Prevent double initialization

CHANGELOG.md

@@ -2,6 +2,35 @@
 
 All notable changes will be documented in this file.
 
+### 1.2.1 - 2020-01-06
+
+- Prevent double initialization
+
+### 1.2.0 - 2020-01-06
+
+- Add support for marker popups
+- Events
+
+### 1.1.0 - 2020-01-06
+
+- Add support for custom marker icon images
+
+### 1.0.4 - 2020-01-06
+
+- Add Laravel 6 compatibility
+
+### 1.0.3 - 2019-04-18
+
+- Update service provider
+
+### 1.0.2 - 2018-10-25
+
+- Code cleanup
+
+### 1.0.1 - 2018-08-30
+
+- Code cleanup
+
 ## 1.0.0 - 2018-08-30
 
 - Improvements, first stable release

README.md

@@ -24,13 +24,12 @@ Supported map services:
 ## Features
 | | Google Maps | OpenStreetMap | Bing Maps | MapQuest | Yandex Maps | MapKit |  
 |---|:---:|:---:|:---:|:---:|:---:|:---:|
-| Map | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
+| [Map](#basic-map) | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
-| Markers | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
+| [Markers](#map-with-markers) | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
-| Marker Title | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
+| [Marker Links](#marker-links) | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
-| Marker Link | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
+| [Marker Popups](#marker-popups) | ✔ | ✔ | ✔ | ✔ | ✔ | ❌ |
-| Custom Marker Icon | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
+| [Custom Marker Icons](#custom-marker-icons) | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
-| Marker Popup | ✔ | ✔ | ✔ | ✔ | ✔ | ❌ |
+| [Marker Click Event](#marker-clicked) | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | 
-| Marker Click Event | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | 
 
 ## Installation
 
@@ -75,6 +74,7 @@ before the `</body>` closing tag, to load the map scripts.
 @mapscripts
 ```
 
+### Basic Map
 Display a map by adding the `@map` directive to your Blade template.
 ```php
 @map([
@@ -83,58 +83,87 @@ Display a map by adding the `@map` directive to your Blade template.
     'zoom' => 6,
 ])
 ```
+
+### Map With Markers
 You can also show markers / pins / annotations:
 ```php
 @map([
     'lat' => 48.134664,
     'lng' => 11.555220,
     'zoom' => 6,
-    'markers' => [[
+    'markers' => [
+        [
             'title' => 'Go NoWare',
             'lat' => 48.134664,
             'lng' => 11.555220,
-    ]],
+        ],
+    ],
 ])
 ```
 
-Open a url when a marker is clicked
+### Marker Links
+Open a url when a marker is clicked.
 ```php
 @map([
     'lat' => 48.134664,
     'lng' => 11.555220,
     'zoom' => 6,
-    'markers' => [[
+    'markers' => [
+        [
             'title' => 'Go NoWare',
             'lat' => 48.134664,
             'lng' => 11.555220,
             'url' => 'https://gonoware.com',
-    ]],
+        ],
+    ],
 ])
 ```
 
-Show a custom marker icon. The URL to the icon image can be absolute or relative.
+### Marker Popups
+Show a popup when a marker is clicked. The `popup` attribute may contain HTML markup.
 ```php
 @map([
     'lat' => 48.134664,
     'lng' => 11.555220,
     'zoom' => 6,
-    'markers' => [[
+    'markers' => [
+        [
+                'title' => 'Go NoWare',
+                'lat' => 48.134664,
+                'lng' => 11.555220,
+                'popup' => '<h3>Details</h3><p>Click <a href="https://gonoware.com">here</a>.</p>',
+        ],
+    ],
+])
+```
+
+### Custom Marker Icons
+Show a custom marker icon. Absolute and relative URLs are supported.
+```php
+@map([
+    'lat' => 48.134664,
+    'lng' => 11.555220,
+    'zoom' => 6,
+    'markers' => [
+        [
             'title' => 'Go NoWare',
             'lat' => '48.134664',
             'lng' => '11.555220',
             'url' => 'https://gonoware.com',
             'icon' => 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
-    ]],
+        ],
+    ],
 ])
 ```
 
-Additionally you may also specify the icon image size and anchor in pixels. The icon will be aligned so that the anchor point is at the marker's geographical location.
+Additionally you may also specify the icon image size and anchor in pixels. The image will be aligned so that the tip of the icon is at the marker's geographical location.
 ```php
 @map([
     'lat' => '48.134664',
     'lng' => '11.555220',
     'zoom' => '6',
-    'markers' => [[
+    'markers' => [
+        [
             'title' => 'Go NoWare',
             'lat' => '48.134664',
             'lng' => '11.555220',
@@ -142,11 +171,12 @@ Additionally you may also specify the icon image size and anchor in pixels. The
             'icon' => 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
             'iconSize' => [20, 32],
             'iconAnchor' => [0, 32],
-    ]],
+        ],
+    ],
 ])
 ```
 
-## Customization
+## Styling
 
 To adjust the height of the map use CSS:
 ```css
@@ -172,7 +202,7 @@ Fade in by default when using Bootstrap 3.3.7 or 4+. To replicate or modify the
 }
 ```
 
-## Advanced Customization
+## Events
 
 ### Map Initialized
 The event `LaravelMaps:MapInitialized` will be dispatched when a map and its markers were initialized. The DOM element, map, 

public/mix-manifest.json

@@ -1,4 +1,4 @@
 {
-    "/js/index.js": "/js/index.js?id=5386a39aa7c6e81e1267",
+    "/js/index.js": "/js/index.js?id=2e139c49390af2c9b185",
     "/css/index.css": "/css/index.css?id=81569dd7736e102f4342"
 }

resources/js/index.js

@@ -43,8 +43,12 @@ const createMapService = service => {
   const selector = `[data-map-${service.name}]`;
   const elements = Array.prototype.slice.call(document.querySelectorAll(selector) || []);
   elements.forEach(element => {
+    if (element.getAttribute('data-map-initialized') === true) {
+      return;
+    }
     const data = createMapService(element);
     dispatchEventMapInitialized(service.name, element, data);
+    element.setAttribute('data-map-initialized', true);
   });
 };