0
私はGoogle Map APIを使用していますが、問題なく動作していますが、男性はイエローのマーカーを意味し、女性の場合はマーカーの色を変更したいと思います青色のマーカーを表示します。 どうすればいいですか？ あなたはそれが彼が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