javascriptgoogle-mapsgoogle-maps-api-3google-maps-markersmarker
Overwrite Default Text On Marker PopUp In Google Map API Using JavaScript?
I am using the below code to shop Road Maps between some markers on Google Map using its API on a WebPage. You can view it on FIDDLE too.
<style type="text/css">
html,body,#dvMap {
height:100%;
width:100%;
}
</style>
<div id="info"></div>
<div id="dvMap"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js"></script>
<script type="text/javascript">
var directionsDisplay = [];
var directionsService = [];
var map = null;
function calcRoute() {
var msg = "25.001807, 67.123459:25.007006, 67.076991:24.957115, 67.076278:24.945176, 67.084069:24.940619, 67.080735:24.936648, 67.076211:24.927262, 67.064335:24.918269, 67.053686:24.909177, 67.049781:24.900226, 67.044931:24.892076, 67.043592:24.880923, 67.039432:24.872733, 67.035963:24.859631, 67.015729:24.854257, 67.006481:24.848813, 66.996748:24.825830, 66.979450:24.818366, 66.975126";
var input_msg = msg.split(":");
var locations = new Array();
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < input_msg.length; i++) {
var tmp_lat_lng = input_msg[i].split(",");
locations.push(new google.maps.LatLng(tmp_lat_lng[0], tmp_lat_lng[1]));
bounds.extend(locations[locations.length-1]);
}
var mapOptions = {
// center: locations[0],
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
map.fitBounds(bounds);
var i = locations.length;
var index = 0;
while (i != 0) {
if (i < 3) {
var tmp_locations = new Array();
for (var j = index; j < locations.length; j++) {
tmp_locations.push(locations[index]);
}
drawRouteMap(tmp_locations);
i = 0;
index = locations.length;
}
if (i >= 3 && i <= 10) {
console.log("before :fun < 10: i value " + i + " index value" + index);
var tmp_locations = new Array();
for (var j = index; j < locations.length; j++) {
tmp_locations.push(locations[j]);
}
drawRouteMap(tmp_locations);
i = 0;
index = locations.length;
console.log("after fun < 10: i value " + i + " index value" + index);
}
if (i >= 10) {
console.log("before :fun > 10: i value " + i + " index value" + index);
var tmp_locations = new Array();
for (var j = index; j < index + 10; j++) {
tmp_locations.push(locations[j]);
}
drawRouteMap(tmp_locations);
i = i - 9;
index = index + 9;
console.log("after fun > 10: i value " + i + " index value" + index);
}
}
}
function drawRouteMap(locations) {
var start, end;
var waypts = [];
for (var k = 0; k < locations.length; k++) {
if (k >= 1 && k <= locations.length - 2) {
waypts.push({
location: locations[k],
stopover: true
});
}
if (k == 0) start = locations[k];
if (k == locations.length - 1) end = locations[k];
}
var request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
};
console.log(request);
directionsService.push(new google.maps.DirectionsService());
var instance = directionsService.length - 1;
directionsDisplay.push(new google.maps.DirectionsRenderer({
preserveViewport: true
}));
directionsDisplay[instance].setMap(map);
directionsService[instance].route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
console.log(status);
directionsDisplay[instance].setDirections(response);
}
});
}
google.maps.event.addDomListener(window, 'load', calcRoute);
</script>
Now my problem is that I want to show my own desired text on each marker label where currently Google is showing default address as shown in the below pic.
I tried many things and google it but not able to add this feature in my code. So is this possible to write my own text there...???
DEMO Text To Show As Per Their Lat Lon:
var locations = [
['Ahsanabad Chowrangi', 25.001807, 67.123459, 1],
['Allah Wali Chowrangi', 25.007006, 67.076991, 2],
['Shafique Mor', 24.957115, 67.076278, 3],
['Sohrab Goth Flyover', 24.945176, 67.084069, 4],
['Ancholi', 24.940619, 67.080735, 5],
['Water Pump Chowrangi', 24.936648, 67.076211, 6],
['Ayesha Manzil Chowrangi', 24.927262, 67.064335, 7],
['Karimabad Chowrangi', 24.918269, 67.053686, 8],
['Liaquatabad 10 Number Chowrangi', 24.909177, 67.049781, 9],
['Lalo Kheet Daak Khana Chowrangi', 24.900226, 67.044931, 10],
['Teen Hatti Bridge', 24.892076, 67.043592, 11],
['Gurumandar', 24.880923, 67.039432, 12],
['Numaish Chowrangi', 24.872733, 67.035963, 13],
['Jama Cloth Market', 24.859631, 67.015729, 14],
['City Court', 24.854257, 67.006481, 15],
['Tower', 24.848813, 66.996748, 16],
['Nagina Center', 24.825830, 66.979450, 17],
['Kemari No. 1', 24.818366, 66.975126, 18]
];
Solution
To change the text displayed for each marker, modify the start_address property of that leg in the directions response before calling the directions renderer. To get the last point as well, also set the end_address property the value for the end marker of the next leg.
for (var leg = 0; leg < response.routes[0].legs.length; leg++) {
response.routes[0].legs[leg].start_address = markerText[instance * 9 + leg][0] + "<br>instance=" + instance;
}
(the code above assumes an array markerText which contains the text you desire to appear for each marker).
proof of concept fiddle using your array of locations
code snippet:
var directionsDisplay = [];
var directionsService = [];
var markerText = [
['Ahsanabad Chowrangi', 25.001807, 67.123459, 1],
['Allah Wali Chowrangi', 25.007006, 67.076991, 2],
['Shafique Mor', 24.957115, 67.076278, 3],
['Sohrab Goth Flyover', 24.945176, 67.084069, 4],
['Ancholi', 24.940619, 67.080735, 5],
['Water Pump Chowrangi', 24.936648, 67.076211, 6],
['Ayesha Manzil Chowrangi', 24.927262, 67.064335, 7],
['Karimabad Chowrangi', 24.918269, 67.053686, 8],
['Liaquatabad 10 Number Chowrangi', 24.909177, 67.049781, 9],
['Lalo Kheet Daak Khana Chowrangi', 24.900226, 67.044931, 10],
['Teen Hatti Bridge', 24.892076, 67.043592, 11],
['Gurumandar', 24.880923, 67.039432, 12],
['Numaish Chowrangi', 24.872733, 67.035963, 13],
['Jama Cloth Market', 24.859631, 67.015729, 14],
['City Court', 24.854257, 67.006481, 15],
['Tower', 24.848813, 66.996748, 16],
['Nagina Center', 24.825830, 66.979450, 17],
['Kemari No. 1', 24.818366, 66.975126, 18]
];
var map = null;
function calcRoute() {
var msg = "25.001807, 67.123459:25.007006, 67.076991:24.957115, 67.076278:24.945176, 67.084069:24.940619, 67.080735:24.936648, 67.076211:24.927262, 67.064335:24.918269, 67.053686:24.909177, 67.049781:24.900226, 67.044931:24.892076, 67.043592:24.880923, 67.039432:24.872733, 67.035963:24.859631, 67.015729:24.854257, 67.006481:24.848813, 66.996748:24.825830, 66.979450:24.818366, 66.975126";
var input_msg = msg.split(":");
var locations = new Array();
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < input_msg.length; i++) {
var tmp_lat_lng = input_msg[i].split(",");
locations.push(new google.maps.LatLng(tmp_lat_lng[0], tmp_lat_lng[1]));
bounds.extend(locations[locations.length - 1]);
}
var mapOptions = {
// center: locations[0],
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
map.fitBounds(bounds);
var i = locations.length;
var index = 0;
while (i != 0) {
if (i < 3) {
var tmp_locations = new Array();
for (var j = index; j < locations.length; j++) {
tmp_locations.push(locations[index]);
}
drawRouteMap(tmp_locations);
i = 0;
index = locations.length;
}
if (i >= 3 && i <= 10) {
console.log("before :fun < 10: i value " + i + " index value" + index);
var tmp_locations = new Array();
for (var j = index; j < locations.length; j++) {
tmp_locations.push(locations[j]);
}
drawRouteMap(tmp_locations);
i = 0;
index = locations.length;
console.log("after fun < 10: i value " + i + " index value" + index);
}
if (i >= 10) {
console.log("before :fun > 10: i value " + i + " index value" + index);
var tmp_locations = new Array();
for (var j = index; j < index + 10; j++) {
tmp_locations.push(locations[j]);
}
drawRouteMap(tmp_locations);
i = i - 9;
index = index + 9;
console.log("after fun > 10: i value " + i + " index value" + index);
}
}
}
function drawRouteMap(locations) {
var start, end;
var waypts = [];
for (var k = 0; k < locations.length; k++) {
if (k >= 1 && k <= locations.length - 2) {
waypts.push({
location: locations[k],
stopover: true
});
}
if (k == 0) start = locations[k];
if (k == locations.length - 1) end = locations[k];
}
var request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
};
console.log(request);
directionsService.push(new google.maps.DirectionsService());
var instance = directionsService.length - 1;
directionsDisplay.push(new google.maps.DirectionsRenderer({
preserveViewport: true
}));
directionsDisplay[instance].setMap(map);
directionsService[instance].route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
console.log(status);
for (var leg = 0; leg < response.routes[0].legs.length; leg++) {
response.routes[0].legs[leg].start_address = markerText[instance * 9 + leg][0] + "<br>instance=" + instance;
response.routes[0].legs[leg].end_address = markerText[instance * 9 + leg + 1][0] + "<br>instance=" + instance;
}
directionsDisplay[instance].setDirections(response);
}
});
}
google.maps.event.addDomListener(window, 'load', calcRoute);html,
body,
#dvMap {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="info"></div>
<div id="dvMap"></div>code snippet using same input list for all processing:
var directionsDisplay = [];
var directionsService = [];
var locations = [
['Ahsanabad Chowrangi', 25.001807, 67.123459, 1],
['Allah Wali Chowrangi', 25.007006, 67.076991, 2],
['Shafique Mor', 24.957115, 67.076278, 3],
['Sohrab Goth Flyover', 24.945176, 67.084069, 4],
['Ancholi', 24.940619, 67.080735, 5],
['Water Pump Chowrangi', 24.936648, 67.076211, 6],
['Ayesha Manzil Chowrangi', 24.927262, 67.064335, 7],
['Karimabad Chowrangi', 24.918269, 67.053686, 8],
['Liaquatabad 10 Number Chowrangi', 24.909177, 67.049781, 9],
['Lalo Kheet Daak Khana Chowrangi', 24.900226, 67.044931, 10],
['Teen Hatti Bridge', 24.892076, 67.043592, 11],
['Gurumandar', 24.880923, 67.039432, 12],
['Numaish Chowrangi', 24.872733, 67.035963, 13],
['Jama Cloth Market', 24.859631, 67.015729, 14],
['City Court', 24.854257, 67.006481, 15],
['Tower', 24.848813, 66.996748, 16],
['Nagina Center', 24.825830, 66.979450, 17],
['Kemari No. 1', 24.818366, 66.975126, 18]
];
var map = null;
function calcRoute() {
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < locations.length; i++) {
var pt = new google.maps.LatLng(locations[i][1], locations[i][2]);
bounds.extend(pt);
}
var mapOptions = {
// center: locations[0],
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
map.fitBounds(bounds);
var i = locations.length;
var index = 0;
while (i != 0) {
if (i < 3) {
var tmp_locations = new Array();
for (var j = index; j < locations.length; j++) {
tmp_locations.push(new google.maps.LatLng(locations[j][1], locations[j][2]));
}
drawRouteMap(tmp_locations);
i = 0;
index = locations.length;
}
if (i >= 3 && i <= 10) {
console.log("before :fun < 10: i value " + i + " index value " + index);
var tmp_locations = new Array();
for (var j = index; j < locations.length; j++) {
tmp_locations.push(new google.maps.LatLng(locations[j][1], locations[j][2]));
}
drawRouteMap(tmp_locations);
i = 0;
index = locations.length;
console.log("after fun < 10: i value " + i + " index value " + index);
}
if (i >= 10) {
console.log("before :fun > 10: i value " + i + " index value " + index);
var tmp_locations = new Array();
for (var j = index; j < index + 10; j++) {
tmp_locations.push(new google.maps.LatLng(locations[j][1], locations[j][2]));
}
drawRouteMap(tmp_locations);
i = i - 9;
index = index + 9;
console.log("after fun > 10: i value " + i + " index value " + index);
}
}
}
function drawRouteMap(routelocations) {
var start, end;
var waypts = [];
for (var k = 0; k < routelocations.length; k++) {
if (k >= 1 && k <= routelocations.length - 2) {
waypts.push({
location: routelocations[k],
stopover: true
});
}
if (k == 0) start = routelocations[k];
if (k == routelocations.length - 1) end = routelocations[k];
}
var request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
};
console.log(request);
directionsService.push(new google.maps.DirectionsService());
var instance = directionsService.length - 1;
directionsDisplay.push(new google.maps.DirectionsRenderer({
preserveViewport: true
}));
directionsDisplay[instance].setMap(map);
directionsService[instance].route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
console.log(status);
for (var leg = 0; leg < response.routes[0].legs.length; leg++) {
response.routes[0].legs[leg].start_address = locations[instance * 9 + leg][0] + "<br>instance=" + instance;
response.routes[0].legs[leg].end_address = locations[instance * 9 + leg + 1][0] + "<br>instance=" + instance;
}
directionsDisplay[instance].setDirections(response);
}
});
}
google.maps.event.addDomListener(window, 'load', calcRoute);html,
body,
#dvMap {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="info"></div>
<div id="dvMap"></div>(fiddle)
- Keep numbers which appear in both columns, in J lang
- Differentiation in J
- How to reshape an array with an arbitrary size in one dimension?
- Why is Insert (fold) right associative
- Write 4 : 'x&{.&.;: y' tacitly
- Alignment issue when printing formatted prime numbers in J language
- How can I define a verb in J that applies a different verb alternately to each atom in a list?
- How to get user input in the J programming language
- How to unbox a list of boxed lists of differing lengths in J?
- How can I fix 'noun result was required' error in J?
- In j, how can I define a verb locally in one scope and pass it to a defined adverb?
- Convert boxed array to normal array?
- Read column of CSV file as array
- Replace atom in array of strings
- What does the dyad `=` do to boxed strings?
- Index of minimum element using J
- How can I take the outer product of string vectors in J?
- Building an array of verbs in J
- Reading in multidigit command line parameter
- Amend with bond to new data shows unexpected behaviour
- How to turn a table or matrix into a (flat) list in J
- How to run dissect in J?
- How to define selection using index function in J
- How to exit the J console?
- Find 4-neighbors using J
- Writing custom verbs in J
- How do I negate a selector in J lang?
- How to use arbitrary selector in interchange in J lang?
- different result once square root is added inside tacit
- Sum of arrays with repeated indices