I could draw polylines using google maps API javascript in my web page successfully.. but The problem is that I want to change the color of polylines as soon as I get the data which is recieved via socket in my ajax code . here is my java script code which draw polylines with red color:
<html>
<head>
<title>
My GOOGLE Map
</title>
<style>
#map
{
height:100%;
width:100%;
}
</style>
<meta charset="UTF-8">
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBI1yC7eX6bOcbLruLZ224K5X4N-rwznjE&callback=initMap">
</script>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script>
var markers = [{
"title": 'A',
"lat": '35.742521',
"lng": '51.457286',
"description": 'A'
}, {
"title": 'B',
"lat": '35.754612',
"lng": '51.476658',
"description": 'B'
}, {
"title": 'D',
"lat": '35.742155',
"lng": '51.451312',
"description": 'D'
}
, {
"title": 'E',
"lat": '35.748999',
"lng": '51.453447',
"description": 'E'
},
];
/*
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initMap()
{
directionsDisplay = new google.maps.DirectionsRenderer();
var options =
{
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom:8,
center: {lat:35.6892,lng:51.3890}
}
var map = new google.maps.Map(document.getElementById('map'),options);
directionsDisplay.setMap(map);
var start = '35.742521, 51.457286';
var end = '35.754612,51.476658';
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var myRoute = response.routes[0];
var txtDir = '';
for (var i=0; i<myRoute.legs[0].steps.length; i++) {
txtDir += myRoute.legs[0].steps[i].instructions+"<br />";
}
document.getElementById('directions').innerHTML = txtDir;
}
});
//add marker
var marker = new google.maps.Marker(
{
position:{lat:35.754612,lng:51.476658},
map:map,
icon:'station2.png'
}
);
//add info window
var infoWindow = new google.maps.InfoWindow({
content:"<h2 style='float:right;color:blue;'>Station 1</h2>"
});
marker.addListener('click',function(){
infoWindow.open(map,marker);
});
} */
function initMap() {
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var infoWindow = new google.maps.InfoWindow();
//multi polylines
var lat_lng = new Array();
var latlngbounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var data = markers[i];
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
lat_lng.push(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title
});
latlngbounds.extend(marker.position);
(function(marker, data) {
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
//Initialize the Direction Service
var service = new google.maps.DirectionsService();
//Loop and Draw Path Route between the Points on MAP
for (var i = 0; i < lat_lng.length; i++) {
if ((i + 1) < lat_lng.length) {
var src = lat_lng[i];
var des = lat_lng[i + 1];
i = i+1;
service.route({
origin: src,
destination: des,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
//Initialize the Path Array
var path = new google.maps.MVCArray();
//Set the Path Stroke Color
var poly = new google.maps.Polyline({
map: map,
strokeColor: '#ec2a04'
});
poly.setPath(path);
for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
path.push(result.routes[0].overview_path[i]);
}
}
});
}
}
}
</script>
</head>
<body onload="initMap()">
<h1>My google map</h1>
<button id='get'>display direction</button>
<div id="map" ></div>
</body>
</html>
Also Here is my ajax code which get a data:
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect('http://192.168.1.150:3000');
socket.on('field', function (data) {
//console.log(data);
//$("#field").html(data);
switch(data)
{
case "1":
//here I want to change one of polyline color
break;
case "2":
break;
}
Aucun commentaire:
Enregistrer un commentaire