0
私のウェブサイトでこのタイプのマップを使用して、チェックポイント付きの地図旅行を画像の下に表示し、そのポイントにインテントを設定します。配列を使用してウェイポイントを動的に変更してください。ここで ウェイポイントでGoogleマップを設定する方法は？
/**
* This is for used map of Journey
*
* @params id as Journeys id
* @params request as Data of Journeys
*
* return Google Map Data
*/
function journeyMap(id,request) {
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer({
polylineOptions: {
strokeColor: "#F24639",
strokeWeight: 5
}
});
var latlng = new google.maps.LatLng(20.5937,78.9629);
var myOptions = {
zoom : 4,
center : latlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [
{
"featureType": "landscape.natural",
"elementType": "geometry.fill",
"stylers": [
{ "color": "#ffffff" }
]
},{
"featureType": "landscape.man_made",
"stylers": [
{ "color": "#ffffff" },
{ "visibility": "off" }
]
},{
"featureType": "water",
"stylers": [
{ "color": "#80C8E5" },
{ "saturation": 0 }
]
},{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#999999" }
]
}
,{
"elementType": "labels.text.stroke",
"stylers": [
{ "visibility": "off" }
]
}
,{
"elementType": "labels.text",
"stylers": [
{ "color": "#333333" }
]
}
,{
"featureType": "road.local",
"stylers": [
{ "color": "#dedede" }
]
}
,{
"featureType": "road.local",
"elementType": "labels.text",
"stylers": [
{ "color": "#666666" }
]
}
,{
"featureType": "transit.station.bus",
"stylers": [
{ "saturation": -57 }
]
}
,{
"featureType": "road.highway",
"elementType": "labels.icon",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "poi",
"stylers": [
{ "visibility": "off" }
]
}
]
};
var map = new google.maps.Map(document.getElementById("map_"+id),myOptions);
directionsDisplay.setMap(map);
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}//end journeyMap()
私のコードです
<?php
$originCityName = !empty($journeys['start_city_name']) ? $journeys['start_city_name'] : '';
$destinationCityName = !empty($journeys['end_city_name']) ? $journeys['end_city_name'] : '';
?>
<!-- #### This is used for the Google Journeys Map : START #### -->
<script>
var request_<?php echo !empty($journeys['id']) ? $journeys['id'] : ''; ?> = {
origin: '<?php echo $originCityName; ?>',
destination: '<?php echo $destinationCityName; ?>',
//~ waypoints: [{
//~ location:"Ajmer",
//~ stopover:true,
//~ }],
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
google.maps.event.addDomListener(window, "load", function() { journeyMap(<?php echo !empty($journeys['id']) ? $journeys['id'] : '' ?>,request_<?php echo !empty($journeys['id']) ? $journeys['id'] : '' ?>); });
</script>
<!-- #### This is used for the Google Journeys Map : END #### -->
<div id="map_<?php echo $journeys['id']; ?>" style="height: 340px;"></div>