Issue
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>{{$location->lat}}</p>
<p>{{$location->long}}</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)
[ "{{ $location->lat }}", "{{ $location->long }}" ],
@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>
Solution
finally i solved my problem, i did it by using Ajax and it worked well,
also this way shows how to bring the database data(lat,lng) and print them as markers on the Map (without using Ajax). hope it helps the others :)
var uluru = {lat: -25.344, lng: 131.036};
var locations = [
@foreach ($information as $location)
[ {{ $location->latitude }}, {{ $location->longitude }} ],
@endforeach
];
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 4, center: uluru});
for (i = 0; i < locations.length; i++) {
var location = new google.maps.LatLng(locations[i][0], locations[i][1]);
var marker = new google.maps.Marker({
position: location,
map: map,
});
};
Answered By - Ala'a
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.