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>
LarsWiegers · Mar 10, 2022 · 1826c27 · 1826c27
1 parent 6c78a80
commit 1826c27
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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);
+    }
 }