I know this question seems like it has been asked before, but none of them as i saw could answer my problem, the problem is that I'm having an error when getting my latitude & longitude data from database and can't show markers in google map on javascript part, I can get my database(lan,lng) in my view normally, but could not print them as markers on google map, the markers don't show at all, i think it's because i put all the script inside the initMap().now all i want is to show my database data (lan,lng) on google map as markers .any help would be appreciated. excuse my bad English
the Code
<!DOCTYPE html>
<html>
<head>
<style>
/* Set the size of the div element that contains the map */
#map {
height: 400px; /* The height is 400 pixels */
width: 100%; /* The width is the width of the web page */
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<!--
@foreach ($position as $location)
<p></p>
<p></p>
@endforeach
-->
<!--The div element for the map -->
<div id="map">
</div>
<script src="https://js.pusher.com/5.0/pusher.min.js"></script>
<script>
// Initialize and add the map
function initMap() {
// The location of Uluru
var uluru = {lat: -25.344, lng: 131.036};
// The map, centered at Uluru
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 4, center: uluru});
// The marker, positioned at Uluru
// var marker = new google.maps.Marker({position: uluru, map: map});
// Enable pusher logging - don't include this in production
Pusher.logToConsole = true;
var pusher = new Pusher('5945d552dbd1e6bb3107', {
cluster: 'ap2',
forceTLS: true
});
var channel = pusher.subscribe('location');
channel.bind("App\\Events\\SendLocation", function(data) {
// alert('An event was triggered with message: ' + data);
var uluru = {lat: parseFloat(data.location.lat), lng: parseFloat(data.location.long)};
var uluru= [
@foreach ($position as $location)
[ "", "" ],
@endforeach
];
var marker = new google.maps.Marker({position: uluru, map: map});
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=my-api-key&callback=initMap"
async defer></script>
</body>
</html>
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire