Most of the Markers are missing when calling it dynamically. Here is my code. I am beginner in Laravel. The Sports variable contains various sports name, marker image for each sport name, popup image for each sport name etc. The Mapevents contains different/ repeated sport names with different latitude and longitude. While try to mark in Map using Markers most of the Map events are not displaying.
<script type="text/javascript">
(function(A) {
if (!Array.prototype.forEach)
A.forEach = A.forEach || function(action, that) {
for (var i = 0, l = this.length; i < l; i++)
if (i in this)
action.call(that, this[i], i, this);
};
})(Array.prototype);
var
mapObject,
markers = [],
markersData = {
@foreach($mapevents as $event)
@foreach($sports as $sport)
@if($event->category_id==$sport->id)
'': [
{
name: 'Events',
location_latitude: "",
location_longitude: "",
map_image_url: 'sport2gether/storage/<?php echo $sport->popup_image?>',
name_point: '""',
description_point: 'Event Details<br>Starting Date: ""<br>Ending Date: ""<br>Starting time: ""<br>Ending time: ""',
url_point: 'eventsdetails'
},
],
@endif
@endforeach
@endforeach
@foreach($maphotspots as $hotspot)
@foreach($sports as $sport)
@if($hotspot->category_id==$sport->id)
'': [
{
name: 'Hotspots',
location_latitude: "",
location_longitude: "",
map_image_url: 'sport2gether/storage/<?php echo $sport->popup_image?>',
name_point: '""',
description_point: 'Hotspot Details<br>Starting Date: ""<br>Ending Date: ""<br>Starting time: ""<br>Ending time: ""',
url_point: 'hotspotsdetails'
},
],
@endif
@endforeach
@endforeach
};
function initialize () {
var mapOptions = {
zoom: 16,
center: new google.maps.LatLng("", ""),
mapTypeId: google.maps.MapTypeId.HYBRID,
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.LEFT_CENTER
},
panControl: false,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.TOP_RIGHT
},
scaleControl: false,
scaleControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
},
streetViewControl: false,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
},
styles: [{"featureType":"poi","stylers":[{"visibility":"off"}]},{"stylers":[{"saturation":-70},{"lightness":37},{"gamma":1.15}]},{"elementType":"labels","stylers":[{"gamma":0.26},{"visibility":"off"}]},{"featureType":"road","stylers":[{"lightness":0},{"saturation":0},{"hue":"#ffffff"},{"gamma":0}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"visibility":"on"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"lightness":50},{"saturation":0},{"hue":"#ffffff"}]},{"featureType":"administrative.province","stylers":[{"visibility":"on"},{"lightness":-50}]},{"featureType":"administrative.province","elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"administrative.province","elementType":"labels.text","stylers":[{"lightness":20}]}]
};
var
marker;
mapObject = new google.maps.Map(document.getElementById('map'), mapOptions);
for (var key in markersData)
markersData[key].forEach(function (item) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(item.location_latitude, item.location_longitude),
map: mapObject,
icon: 'sport2gether/storage/' + key,
});
if ('undefined' === typeof markers[key])
markers[key] = [];
markers[key].push(marker);
google.maps.event.addListener(marker, 'click', (function () {
closeInfoBox();
getInfoBox(item).open(mapObject, this);
mapObject.setCenter(new google.maps.LatLng(item.location_latitude, item.location_longitude));
}));
});
};
function hideAllMarkers () {
for (var key in markers)
markers[key].forEach(function (marker) {
marker.setMap(null);
});
};
function toggleMarkers (category) {
hideAllMarkers();
closeInfoBox();
if ('undefined' === typeof markers[category])
return false;
markers[category].forEach(function (marker) {
marker.setMap(mapObject);
marker.setAnimation(google.maps.Animation.DROP);
});
};
function closeInfoBox() {
$('div.infoBox').remove();
};
function getInfoBox(item) {
return new InfoBox({
content:
'<div class="marker_info none" id="marker_info">' +
'<div class="info" id="info">'+
'<img src="' + item.map_image_url + '" class="logotype" alt=""/>' +
'<h2>'+ item.name_point +'<span></span></h2>' +
'<span>'+ item.description_point +'</span>' +
'<a href="'+ item.url_point + '" class="green_btn">Join</a>' +
'<span class="arrow"></span>' +
'</div>' +
'</div>',
disableAutoPan: true,
maxWidth: 0,
pixelOffset: new google.maps.Size(40, -210),
closeBoxMargin: '50px 200px',
closeBoxURL: '',
isHidden: false,
pane: 'floatPane',
enableEventPropagation: true
});
};
</script>
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire