JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&.js"></script>
<div id="map_canvas"></div>You can click either on a route or in the list-view.
<br />
<div id='routes'></div>
<div id='debug'></div>
CSS
#map_canvas {
width: 600px;
height: 500px;
}
JavaScript
var allRoutes = [];
var highlightedPoly;
initialize();
$("#routes a").click(function () {
$("#debug").html("<p>I will highlight " + $(this).text() + "</p>");
var dataIndex = $(this).data("index");
polyline = allRoutes[dataIndex];
// Un-highlight the current highlighted trip (if any)
if (highlightedPoly) {
highlightedPoly.setOptions({
strokeColor: "#FF0000",
zIndex: 1
});
}
// Highlight the clicked trip
polyline.setOptions({
strokeColor: "#00FFAA",
zIndex: 6000
});
// Save the trip in a global variable (needed for closure)
highlightedPoly = polyline;
});
function initialize() {
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(10.012552, 76.327043),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// Define an info window
var infowindow = new google.maps.InfoWindow({
content: ""
});
// ---------------------------------------------------------
// Encapsulate below (simulates my JSON scope)
(function () {
// Route 1 array
var polylineCoordinates = [
new google.maps.LatLng(10.013566, 76.331549),
new google.maps.LatLng(10.013566, 76.331463),
new google.maps.LatLng(10.013503, 76.331313),
new google.maps.LatLng(10.013482, 76.331205),
new google.maps.LatLng(10.012419, 76.330926),
new google.maps.LatLng(10.013034, 76.330712),
new google.maps.LatLng(10.013313, 76.330411),
new google.maps.LatLng(10.013292, 76.330175),
new google.maps.LatLng(10.013228, 76.329854),
new google.maps.LatLng(10.013144, 76.329553),
new google.maps.LatLng(10.013059, 76.329296),
new google.maps.LatLng(10.012896, 76.329017),
new google.maps.LatLng(10.012869, 76.328802),
new google.maps.LatLng(10.012785, 76.328545),
...