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
initialize();
$("#routes a").click(function() {
$("#debug").html("<p>I will highlight a "+ $(this).text() +"</p>");
});
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: ""
});
var highlightedPoly;
// ---------------------------------------------------------
// 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),
new google.maps.LatLng(10.012700, 76.328223),
new google.maps.LatLng(10.012679, 76.328030),
new google.maps.LatLng(10.012358, 76.327837),
new google.maps.LatLng(10.012637, 76.327600),
new google.maps.LatLng(10.012573, 76.327322),
new google.maps.LatLng(10.012552, 76.327043), ];
var polyline = new google.maps.Polyline({
title: "This is the FIRST route",
path: polylineCoordinates,
strokeColor: '#FF0000',
...