0
나는 잘 작동하지만 마커 색상을 변경하려고합니다. 남성은 노란색 마커를 의미하고 여성은 내가 원하는 것을 의미한다고 가정합니다. 파란색 마커를 보여주세요. 어떻게 할 수 있습니까? 당신은 그가Google지도에서 정보 창을 클릭하여 주소를 표시하는 방법
var res = {
"status": "success",
"count": 3,
"data": [{
"tripId": "1",
"pickupLatitude": "12.956413",
"pickupLongitude": "77.695380",
"empName": "Arun",
\t \t \t \t \t "gender":"Male",
"pickupTime" : "9.30 AM"
},
{
"tripId": "1",
"pickupLatitude": "12.956107",
"pickupLongitude": "77.694994",
"empName": "Kohila",
\t \t \t \t \t "gender":"Female",
"pickupTime" : "9.40 AM"
},
{
"tripId": "1",
"pickupLatitude": "12.955639",
"pickupLongitude": "77.694932",
"empName": "Dinesh",
\t \t \t \t \t "gender":"Male",
"pickupTime" : "9.50 AM"
}
],
"travlledLocation": [
{
"Travlinglatitude": "12.956664",
"Travlinglongitude": "77.696829"
},
{
"Travlinglatitude": "12.956604",
"Travlinglongitude": "77.696480"
},
{
"Travlinglatitude": "12.956523",
"Travlinglongitude": "77.696021"
},
{
"Travlinglatitude": "12.956413",
"Travlinglongitude": "77.695380"
},
{
"Travlinglatitude": "12.956335",
"Travlinglongitude": "77.695029"
},
{
"Travlinglatitude": "12.956230",
"Travlinglongitude": "77.694997"
},
{
"Travlinglatitude": "12.956107",
"Travlinglongitude": "77.694994"
},
{
"Travlinglatitude": "12.955934",
"Travlinglongitude": "77.694970"
},
{
"Travlinglatitude": "12.955639",
"Travlinglongitude": "77.694932"
},
{
"Travlinglatitude": "12.955380",
"Travlinglongitude": "77.694902"
}
]
};
var geocoder;
var map;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var locations = res.travlledLocation.map(function(o, i) {
return [
i == 0 ? 'Start' : i == res.travlledLocation.length - 1 ? 'Going From Here' : i,
o.Travlinglatitude,
o.Travlinglongitude,
i + 1
]
});
var waypoints = res.data.map(function(o) {
return {
empName: o.empName,
pickupTime: o.pickupTime,
gender: o.gender,
lat: o.pickupLatitude,
lng: o.pickupLongitude
}
});
initialize();
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer({
suppressMarkers: true
});
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
//center: new google.maps.LatLng(-33.92, 151.25), //
mapTypeId: google.maps.MapTypeId.ROADMAP
});
directionsDisplay.setMap(map);
var infowindow = new google.maps.InfoWindow();
var marker, i;
var request = {
travelMode: google.maps.TravelMode.DRIVING
};
for (i = 0; i < locations.length; i++) {
if (locations[i][3] == 1 || locations[i][3] == locations.length) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
i: locations[i][0],
icon: {
\t \t \t url : locations[i][0]=='Start' ?'http://www.myiconfinder.com/uploads/iconsets/256-256-8055c322ae4049897caa15e5331940f2.png' : 'http://www.myiconfinder.com/uploads/iconsets/256-256-76f453c62108782f0cad9bfc2da1ae9d.png',
\t \t \t scaledSize: locations[i][0]=='Start'? new google.maps.Size(40, 40) :new google.maps.Size(45, 45)
}
});
}
google.maps.event.addListener(marker, 'click', (function(marker, infowindow) {
return function() {
infowindow.setContent(marker.i);
infowindow.open(map, marker);
};
})(marker, infowindow));
if (i == 0) request.origin = marker.getPosition();
else if (i == locations.length - 1) request.destination = marker.getPosition();
}
//push the waypoints to request.waypoints array
waypoints.forEach(function(v, i) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(v.lat, v.lng),
map: map,
icon: {
url: 'http://www.myiconfinder.com/uploads/iconsets/256-256-56165014858e6dbadaf3ba00d782f125.png',
scaledSize: new google.maps.Size(45, 45)
},
data: v
});
google.maps.event.addListener(marker, 'click', (function(marker, infowindow) {
return function() {
infowindow.setContent('<b>Employee Name : </b>' + marker.data.empName + '<br><b>pickupTime : </b>' + marker.data.pickupTime+ '<br><b>Gender : </b>' + marker.data.gender);
infowindow.open(map, marker);
};
})(marker, infowindow));
})
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
google.maps.event.addDomListener(window, "load", initialize);html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}<div id="map"></div>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC7lDrYPDmJz1JsQh2rbWA9uRZHcFk_xJY">
</script>내 업데이트 질문 남성 또는 여성처럼 내가 성별 세부 사항을 표시하고 여기에서 열린 팝업 후, 마커를 클릭 성별 세부 사항을 알고 싶다면
여기에서 녹색 아이콘을 클릭하면 시작이 표시되고 빨간색 아이콘을 클릭하면 여기에서 나가기가 표시됩니다. 대신이 주소를 표시하고 싶습니다. 당신이 당신의 대답을 업데이트하십시오 수 있습니다 - 여기
당신이 시작과 끝을 할 때와 마찬가지로 아이콘을 설정하면 다른 아이콘 URL을 참조하십시오. – Deckerz