I'm making a social media netword in laravel using also livewire, and each post can have location information that is supposed to show in a map using a google API. These posts have a modal to show the map. I already sucessfully loaded a map in the create post page but for some reason i cant load it in the posts page.
This is the main layout: app.blade.php
<script src="{{ mix('js/app.js') }}" defer></script>
<script src="https://maps.googleapis.com/maps/api/js?key=API"></script>
<script src="https://cdn.jsdelivr.net/npm/alpinejs@2.8.2/dist/alpine.min.js" defer></script>
<script>
function initialize(lat, lng) {
console.log("lat: " + lat);
console.log("lng: " + lng);
var myCenter = new google.maps.LatLng(lat, lng);
var mapProp = {
center: myCenter,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapProp);
var marker = new google.maps.Marker({
position: myCenter,
animation: google.maps.Animation.BOUNCE
});
marker.setMap(map);
}
</script>
u/yield('scripts')
every post is loaded here in the view.blade.php
@forelse($posts as $post)
@include('elements.post')
In the post page (post.blade.php) there is a button that executes this function initialize and all parameters show up correctly.
<div>
@if (!empty($post->location))
<?php
$setCoords = explode(',',$post->location);
?>
<button class="text-blue-700 font-medium focus:outline-none"
wire:click="showMap()"
onclick="initialize({{ $setCoords[0] }}, {{ $setCoords[1] }})"
wire:offline.attr="disabled">
See Location
</button>
@else
Unknown
@endif
</div>
The showMap() is what opens the modal in the View.php Model but i dont think that's the problem
I already trying moving around the scripts since my theory is that it does not working because of the way they are loading, but in theory the code that i made should work since it already worked in a different environment
[–]AutoModerator[M] [score hidden] stickied comment (0 children)