I'm using google map with input data by autocomplete, it has start, stopover and end, and I want to change default marker of google map
I have refer this post:
Change individual markers in google maps directions
If I use default marker of map, it run normal
My HTML:
<div id="map_canvas"></div>
My script:
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map_canvas'), {
mapTypeControl: false,
center: {
lat: 16.318031,
lng: 107.432559
},
zoom: 5
});
new AutocompleteDirectionsHandler(map);
}
function AutocompleteDirectionsHandler(map) {
this.map = map;
this.originPlaceId = null;
this.destinationPlaceId = null;
this.destinationPlaceId2 = null;
this.travelMode = 'DRIVING';
var originInput = document.getElementById('start');
var destinationInput = document.getElementById('waypoints');
var destinationInput2 = document.getElementById('end');
var modeSelector = document.getElementById('mode-selector');
this.directionsService = new google.maps.DirectionsService;
this.directionsDisplay = new google.maps.DirectionsRenderer;
this.directionsDisplay.setMap(map);
var originAutocomplete = new google.maps.places.Autocomplete(originInput, {placeIdOnly: true});
var destinationAutocomplete2 = new google.maps.places.Autocomplete(destinationInput, {placeIdOnly: true});
var destinationAutocomplete = new google.maps.places.Autocomplete(destinationInput2, {placeIdOnly: true});
this.setupPlaceChangedListener(originAutocomplete, 'ORIG');
this.setupPlaceChangedListener(destinationAutocomplete, 'DEST');
this.setupPlaceChangedListener(destinationAutocomplete2, 'DEST2');
}
AutocompleteDirectionsHandler.prototype.setupClickListener = function(id, mode) {
var radioButton = document.getElementById(id);
var me = this;
radioButton.addEventListener('click', function() {
me.travelMode = mode;
me.route();
});
};
AutocompleteDirectionsHandler.prototype.setupPlaceChangedListener = function(autocomplete, mode) {
var me = this;
autocomplete.bindTo('bounds', this.map);
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
if (!place.place_id) {
window.alert("please input content.");
return;
}
if (mode === 'ORIG') {
me.originPlaceId = place.place_id;
} else if (mode === 'DEST') {
me.destinationPlaceId = place.place_id;
} else if (mode === 'DEST2') {
me.destinationPlaceId2 = place.place_id;
}
me.route();
});
};
AutocompleteDirectionsHandler.prototype.route = function() {
console.log("originPlaceId=" + this.originPlaceId + " destinationPlaceId=" + this.destinationPlaceId + " destinationPlaceId2=" + this.destinationPlaceId2);
if (!this.originPlaceId || !this.destinationPlaceId) {
return;
}
var me = this;
var waypts = [];
if (!!this.destinationPlaceId2) {
waypts.push({
location: {
'placeId': this.destinationPlaceId2
},
stopover: true
});
}
this.directionsService.route({
origin: {
'placeId': this.originPlaceId
},
destination: {
'placeId': this.destinationPlaceId
},
waypoints: waypts,
optimizeWaypoints: true,
travelMode: this.travelMode
}, function(response, status) {
if (status === 'OK') {
me.directionsDisplay.setDirections(response);
var route = response.routes[0];
var summaryPanel = document.getElementById("directions-panel");
// For each route, display summary information.
summaryPanel.innerHTML = "";
// For each route, display summary information.
for (var i = 0; i < route.legs.length; i++) {
makeMarker(leg.start_address, icons.start, "title", map);
makeMarker(leg.stopover_address, icons.end, 'title', map);
makeMarker(leg.end_address, icons.end, 'title', map);
var routeSegment = i + 1;
summaryPanel.innerHTML +=
"<b>Point: " + routeSegment + "</b><br> Start: ";
summaryPanel.innerHTML += route.legs[i].start_address + " </b><br> end: ";
summaryPanel.innerHTML += route.legs[i].end_address + "<br>";
summaryPanel.innerHTML += route.legs[i].distance.text + "<br><br>";
}
computeTotalDistance(response);
}
else {
window.alert('error somewhere. ' + status);
}
});
};
function makeMarker(position, icon, title, map) {
new google.maps.Marker({
position: position,
map: map,
icon: icon,
title: title
});
}
var icons = {
start: new google.maps.MarkerImage(
// URL
'http://maps.google.com/mapfiles/ms/micons/blue.png',
// (width,height)
new google.maps.Size(44, 32),
// The origin point (x,y)
new google.maps.Point(0, 0),
// The anchor point (x,y)
new google.maps.Point(22, 32)),
stopover: new google.maps.MarkerImage(
// URL
'http://maps.google.com/mapfiles/ms/micons/yellow.png',
// (width,height)
new google.maps.Size(44, 32),
// The origin point (x,y)
new google.maps.Point(0, 0),
// The anchor point (x,y)
new google.maps.Point(22, 32)),
end: new google.maps.MarkerImage(
// URL
'http://maps.google.com/mapfiles/ms/micons/green.png',
// (width,height)
new google.maps.Size(44, 32),
// The origin point (x,y)
new google.maps.Point(0, 0),
// The anchor point (x,y)
new google.maps.Point(22, 32))
};
function computeTotalDistance(result) {
var totalDist = 0;
var totalTime = 0;
var myroute = result.routes[0];
for (i = 0; i < myroute.legs.length; i++) {
totalDist += myroute.legs[i].distance.value;
totalTime += myroute.legs[i].duration.value;
}
totalDist = totalDist / 1000.
document.getElementById("total").innerHTML = "Total km: " + totalDist + " km<br>Total: " + (totalTime / 60).toFixed(2) + " min";
}
initMap();
</script>
When I change another marker image, it cannot get marker image from 3 points, How to fix the problem
