Hello to all programmers! I am not very experienced in JavaScript, but I made a code in which it creates a map according to some routes defined in my database.
This is the code:
<?php
$pilotid = Auth::$userinfo->pilotid;
$last_location = FltbookData::getLocation($pilotid);
$last_name = OperationsData::getAirportInfo($last_location->arricao);
if(!$last_location) {
FltbookData::updatePilotLocation($pilotid, Auth::$userinfo->hub);
}
$airs = FltbookData::arrivalairport($last_location->arricao);
?>
<div class="mapcenter" align="center">
<div id="routemap" style="width: 100%; height: 500px; position: relative; overflow: hidden;"></div>
</div>
<script type="text/javascript">
var options = {
zoom: 4,
center: new google.maps.LatLng(<?php echo $last_name->lat?>, <?php echo $last_name->lng?>),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("routemap"), options);
var flightMarkers = [];
</script>
<?php
foreach($last_name as $l) {
foreach($airs as $air) {
$nam = OperationsData::getAirportInfo($air->arricao);
?>
<script type="text/javascript">
var dep_location = new google.maps.LatLng(<?php echo $last_name->lat?>, <?php echo $last_name->lng?>);
var arr_location = new google.maps.LatLng(<?php echo $nam->lat?>, <?php echo $nam->lng?>);
var bounds = new google.maps.LatLngBounds();
bounds.extend(dep_location);
bounds.extend(arr_location);
flightMarkers[flightMarkers.length] = new google.maps.Marker({
position: dep_location,
icon: url + '/lib/skins/metronic/assets/app/media/img/light_blue_marker_user.png',
animation: google.maps.Animation.DROP,
map: map,
title: "<?php echo "$last_location->arricao - $last_name->name";?>",
});
var marker = new google.maps.Marker({
position: arr_location,
icon: url + '/lib/skins/metronic/assets/app/media/img/light_blue_marker_house.png',
animation: google.maps.Animation.DROP,
map: map,
title: "<?php echo "$air->arricao - $nam->name";?>",
});
var coordinates = [new google.maps.LatLng(<?php echo $last_name->lat?>, <?php echo $last_name->lng?>), new google.maps.LatLng(<?php echo $nam->lat?>, <?php echo $nam->lng?>)];
var polylineOptions = {
path: coordinates,
strokeColor: '#49ABEF', strokeOpacity: 1.0, strokeWeight: 2, geodesic: true
};
marker['stepPolyline'] = new google.maps.Polyline(polylineOptions);
google.maps.event.addListener(marker, 'click', (function (marker) {
return function () {
this['stepPolyline'].setMap(map);
}
})(marker));
map.fitBounds(bounds);
</script>
<?php
}
}
?> Here is the result:
WhatIwantedtodoisthatwhenIclickonthemarkerthathastheiconofahouseittracesaroutefromthedestinationpoint(Markerwithauser'sicon)tothedestinationpoint(Markerselected).ForthisIusethiscode(thisattheendofthecodeabove):
var coordinates = [new google.maps.LatLng(<?php echo $last_name->lat?>, <?php echo $last_name->lng?>), new google.maps.LatLng(<?php echo $nam->lat?>, <?php echo $nam->lng?>)];
var polylineOptions = {
path: coordinates,
strokeColor: '#49ABEF', strokeOpacity: 1.0, strokeWeight: 2, geodesic: true
};
marker['stepPolyline'] = new google.maps.Polyline(polylineOptions);
google.maps.event.addListener(marker, 'click', (function (marker) {
return function () {
this['stepPolyline'].setMap(map);
}
})(marker));