From 1826c27c80849f0b41d205d1a13867bf44eecd7f Mon Sep 17 00:00:00 2001
From: Kiko Jover <kiko@kikojover.es>
Date: Thu, 10 Mar 2022 09:21:17 +0100
Subject: [PATCH] Added Custom InfoWindow and Icon on Google Maps (#24)

* Added Custom InfoWindow and Icon on Google Maps

* Added Unit Test for Icon and InfoWindow on Google Maps

* leaflet + tests

Co-authored-by: kikojover
Co-authored-by: Lars Wiegers <larswiegers@live.nl>
---
 resources/views/components/google.blade.php  | 23 ++++++++++++++++++--
 resources/views/components/leaflet.blade.php |  6 ++++-
 tests/Unit/GoogleMapsTest.php                | 12 ++++++++++
 tests/Unit/LeafletTest.php                   |  6 +++++
 4 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/resources/views/components/google.blade.php b/resources/views/components/google.blade.php
index 8cc028f..ad8c224 100644
--- a/resources/views/components/google.blade.php
+++ b/resources/views/components/google.blade.php
@@ -31,15 +31,34 @@ function initMap{{$mapId}}() {
             zoom: {{$zoomLevel}},
         });
 
+    function addInfoWindow(marker, message) {
+
+        var infoWindow = new google.maps.InfoWindow({
+            content: message
+        });
+
+        google.maps.event.addListener(marker, 'click', function () {
+            infoWindow.open(map{{$mapId}}, marker);
+        });
+    }
+
         @foreach($markers as $marker)
-            new google.maps.Marker({
+            var marker{{ $loop->iteration }} = new google.maps.Marker({
                 position: {
                     lat: {{$marker['lat'] ?? $marker[0]}},
                     lng: {{$marker['long'] ?? $marker[1]}}
                 },
                 map: map{{$mapId}},
-                title: "{{ $marker['title'] ?? 'Hello World!' }}",
+                @if(isset($marker['title']))
+                title: "{{ $marker['title'] }}",
+                @endif
+                icon: @if(isset($marker['icon']))"{{ $marker['icon']}}" @else null @endif
             });
+
+            @if(isset($marker['info']))
+                addInfoWindow(marker{{ $loop->iteration }}, @json($marker['info']));
+            @endif
+
         @endforeach
     }
 </script>
diff --git a/resources/views/components/leaflet.blade.php b/resources/views/components/leaflet.blade.php
index ebcf0f2..317e01e 100644
--- a/resources/views/components/leaflet.blade.php
+++ b/resources/views/components/leaflet.blade.php
@@ -31,7 +31,11 @@ class='{{ $attributes["class"] }}'
         iconSize: [{{$marker['iconSizeX'] ?? 32}} , {{ $marker['iconSizeY'] ?? 32 }}],
        });
      @endif
-    var marker = L.marker([{{$marker['lat'] ?? $marker[0]}}, {{$marker['long'] ?? $marker[1]}}]).addTo(mymap);
+    var marker = L.marker([{{$marker['lat'] ?? $marker[0]}}, {{$marker['long'] ?? $marker[1]}}]);
+    @if(isset($marker['info']))
+     marker.bindPopup(@json($marker['info']));
+    @endif
+    marker.addTo(mymap);
     @endforeach
 
     @if($tileHost === 'mapbox')
diff --git a/tests/Unit/GoogleMapsTest.php b/tests/Unit/GoogleMapsTest.php
index 1d2acbc..c372676 100644
--- a/tests/Unit/GoogleMapsTest.php
+++ b/tests/Unit/GoogleMapsTest.php
@@ -47,4 +47,16 @@ public function test_it_can_take_classes_as_attribute()
         $content = $this->getComponentRenderedContent("<x-maps-google class='h-16'></x-maps-google>");
         $this->assertStringContainsString("class='h-16'", $content);
     }
+
+    public function test_it_can_take_custom_icon_on_marker()
+    {
+        $content = $this->getComponentRenderedContent("<x-maps-google :markers=\"[['lat' => 38.716450, 'long' => 0.055684, 'icon' => 'icon.png']]\"></x-maps-google>");
+        $this->assertStringContainsString('icon: "icon.png"', $content);
+    }
+
+    public function test_it_can_take_custom_infowindow_on_marker()
+    {
+        $content = $this->getComponentRenderedContent("<x-maps-google :markers=\"[['lat' => 38.716450, 'long' => 0.055684, 'info' => 'MarkerInfo']]\"></x-maps-google>");
+        $this->assertStringContainsString('addInfoWindow(marker1, "MarkerInfo");', $content);
+    }
 }
diff --git a/tests/Unit/LeafletTest.php b/tests/Unit/LeafletTest.php
index 2bd053b..d0c9c0d 100644
--- a/tests/Unit/LeafletTest.php
+++ b/tests/Unit/LeafletTest.php
@@ -46,4 +46,10 @@ public function test_it_can_take_classes_as_attribute()
         $content = $this->getComponentRenderedContent("<x-maps-leaflet class='h-16'></x-maps-leaflet>");
         $this->assertStringContainsString("class='h-16'", $content);
     }
+
+    public function test_it_can_take_custom_infowindow_on_marker()
+    {
+        $content = $this->getComponentRenderedContent("<x-maps-leaflet :markers=\"[['lat' => 38.716450, 'long' => 0.055684, 'info' => 'MarkerInfo']]\"></x-maps-leaflet>");
+        $this->assertStringContainsString('marker.bindPopup("MarkerInfo");', $content);
+    }
 }