I want the value in variable names to be displayed on div with id driverName. I have tried to set using innerhtml nothing has worked. Is there a way I can pass the variables to the content directly from the javascript file above. Once that one works am sure the rest I will do using the same solution.
const arrayItem = item.split("#")
.map((item, i) => `${item}`);
var names = arrayItem[0];
var location = arrayItem[1];
var locationAddress = arrayItem[2];
var regNo = arrayItem[3];
var tripStatus = arrayItem[4];
var startAddress = arrayItem[5];
var endAddress = arrayItem[6];
addMarker({
coords: { lat: -1.294219, lng: 36.806824 },
iconImage: taxi_available,
content: `<p class="d-none">application|identifier</p><h6 class="d-flex align-items-center">
<div class="card mb-0">
<div class="card-body p-0 mb-2">
<div class="d-flex">
<div class="flex-shrink-0 align-self-center me-3">
<img src="assets/images/users/avatar-3.jpg" class="rounded-circle avatar-xs" alt="">
</div>
<div class="flex-grow-1 overflow-hidden pe-5">
<h5 class="text-truncate font-size-14 mb-1 text-capitalize">
<div id="driverName">{{$names}}</div>
<div class="rating-star">
<input type="hidden" class="rating" data-filled="mdi mdi-star text-warning" data-empty="mdi mdi-star-outline text-muted" data-readonly value="3.5" />
</div>
</h5>
<p class="text-truncate mb-0 text-uppercase">KAB 123P</p>
</div>
<div class="font-size-11 text-right">
<p class="text-muted mb-2"><i class="mdi mdi-circle text-primary align-middle me-1"></i> Available for Booking</p>
<p class="text-muted mb-0"><i class="mdi mdi-clock text-muted align-middle me-1"></i> Last seen at 12:23 AM</p>
</div>
</div>
</div>
<div class="card-body bg-light d-flex p-1>
<p class="mb-0">
<i class="mdi mdi-map-marker text-info align-middle me-1 font-18px"></i>
</p>
<div>
<p class="text-muted mb-0">Current Location</p>
<p class="mb-0">
<span class="the-clicked-address"></span> Nairobi hospital, Ngong Road, Nairobi, Kenya
</p>
</div>
</div>
</div>`
});
Below is my js function to add makers to the map
function addMarker(props) {
//add marker
var marker = new google.maps.Marker({
position: props.coords,
map: map,
animation: google.maps.Animation.DROP,
// icon:props.iconImage
});
if (!props.content) {
gmarkers.push(marker);
}
if (props.iconImage) {
//set icon image if its there
marker.setIcon(props.iconImage);
}
// check if there is content
if (props.content) {
//set icon image if its there
var infowindow = new google.maps.InfoWindow({
content: props.content
});
marker.addListener('mouseover', function(e) {
infowindow.open(map, marker);
var newCoords = e.latLng;
newCoords = newCoords.toString();
// alert(newCoords);
var Latitude;
var longitude;
longitude = newCoords.substring(newCoords.lastIndexOf(",") + 1);
Latitude = newCoords.substring(0, newCoords.indexOf(','));
Latitude = Latitude.substring(Latitude.lastIndexOf("(") + 1);
longitude = longitude.substring(0, longitude.indexOf(')'));
reverseGeocoding(Latitude, longitude);
// alert("mouse hovered");
});
marker.addListener('click', function(e) {
toggleBounce(marker);
var newCoords = e.latLng;
newCoords = newCoords.toString();
// alert(newCoords);
var Latitude;
var longitude;
longitude = newCoords.substring(newCoords.lastIndexOf(",") + 1);
Latitude = newCoords.substring(0, newCoords.indexOf(','));
Latitude = Latitude.substring(Latitude.lastIndexOf("(") + 1);
longitude = longitude.substring(0, longitude.indexOf(')'));
reverseGeocoding(Latitude, longitude);
// alert(iconImage);
// alert( e.latLng);
//position of the clicked marker . the longitude and latitude
var pointPosition = e.latLng;
//gettting the image
//initializing image as empty
var theImage = "assets/images/billboard-ads/no-add.jpg";
//checking if the content has an image
if (infowindow.content.includes("<img")) {
//if it has image assign mage to
theImage = infowindow.content.substring(infowindow.content.indexOf('src="') + 5);
//the image url
theImage = theImage.substring(0, theImage.indexOf('"'));
}
var theContent = infowindow.content.substr(18);
var theContent = theContent.substring(0, theContent.indexOf('<'));
//the group of markers eg car,incident,collection points etc
var theGroup = theContent.substring(0, theContent.indexOf('|'));
//the unique identifier of the clicked item eg number plate
var uniqueIdentifier = theContent.substring(theContent.lastIndexOf("|") + 1);
// alert(theGroup);
//if else statements to bring out the correct side details depending on the groups category
if (theImage != "") {
$('#plate .plateImg').attr("src", theImage);
$('.plateImg').removeClass('d-none');
} else {
$('.plateImg').addClass('d-none');
}
if (theGroup == "multi-plate") {
$('#multi-plate .plateImg').removeClass('d-none');
$('#multi-plate').removeClass('left-100').siblings().addClass('left-100');
$('.main-map-container .ma-backdrop').removeClass('d-none');
$(".content, .header").append('<div class="ma-backdrop" data-ma-action="aside-close" data-ma-target=" + e + " />");
}
if (theGroup == "plate") {
$("#plate').removeClass('left-100').siblings().addClass('left-100');
$('.main-map-container .ma-backdrop').removeClass('d-none');
$(".content, .header").append('<div class="ma-backdrop" data-ma-action="aside-close" data-ma-target=" + e + " />");
}
if (theGroup == "plate-available") {
$("#plate .plate-application-plate').removeClass('d-none').prev().addClass('d-none');
$('#plate').removeClass('left-100').siblings().addClass('left-100');
$('.main-map-container .ma-backdrop').removeClass('d-none');
$(".content, .header").append('<div class="ma-backdrop" data-ma-action="aside-close" data-ma-target=" + e + " />");
}
if (theGroup == "application") {
$("#application .plateImg').attr("src", theImage);
$('#application').removeClass('left-100').siblings().addClass('left-100');
$('.main-map-container .ma-backdrop').removeClass('d-none');
$(".content, .header").append('<div class="ma-backdrop" data-ma-action="aside-close" data-ma-target=" + e + " />");
}
if (theGroup == "approved") {
$("#approved .plateImg').attr("src", theImage);
$('#approved').removeClass('left-100').siblings().addClass('left-100');
$('.main-map-container .ma-backdrop').removeClass('d-none');
$(".content, .header").append('<div class="ma-backdrop" data-ma-action="aside-close" data-ma-target=" + e + " />");
}
if (theGroup == "car") {
//functions related to cars goes here
$("#car-info').removeClass('left-100').siblings().addClass('left-100');
$('.main-map-container .ma-backdrop').removeClass('d-none');
$(".content, .header").append('<div class="ma-backdrop" data-ma-action="aside-close" data-ma-target=" + e + " />");
}
if (theGroup == "incident") {
//functions for incidents
$("#incident-info').removeClass('left-100').siblings().addClass('left-100');
$('.main-map-container .ma-backdrop').removeClass('d-none');
$(".content, .header").append('<div class="ma-backdrop" data-ma-action="aside-close" data-ma-target=" + e + " />");
}
if (theGroup == "collectionPoint") {
//functions for collection points
$("#collectionPoint-info').removeClass('left-100').siblings().addClass('left-100');
$('.main-map-container .ma-backdrop').removeClass('d-none');
$(".content, .header").append('<div class="ma-backdrop" data-ma-action="aside-close" data-ma-target=" + e + " />");
}
if (theGroup == "agent") {
//function for agents
$("#agents-info').removeClass('left-100').siblings().addClass('left-100');
$('.main-map-container .ma-backdrop').removeClass('d-none');
$(".content, .header").append('<div class="ma-backdrop" data-ma-action="aside-close" data-ma-target=" + e + " />");
}
if (theGroup == "offstreetParking") {
//function for off street parking
$("#offstreet-info').removeClass('left-100').siblings().addClass('left-100');
$('.main-map-container .ma-backdrop').removeClass('d-none');
$(".content, .header").append('<div class="ma-backdrop" data-ma-action="aside-close" data-ma-target=" + e + " />");
}
if (theGroup == "street") {
//function for on street parking
$("#street-info').removeClass('left-100').siblings().addClass('left-100');
$('.main-map-container .ma-backdrop').removeClass('d-none');
$(".content, .header").append('<div class="ma-backdrop" data-ma-action="aside-close" data-ma-target=" + e + " />");
}
// this shows the more details
// alert("clicked');
var theCanvas = new bootstrap.Offcanvas(offcanvasExample)
theCanvas.show()
});
// close content when mouse exits
marker.addListener('mouseout', function() {
infowindow.close(map, marker);
});
}
}