As per documentation on maps API v3, there are two separate example of dotted and solid line.. i have an array of lat and long, i want to mark path alternate marking of solid and dotted between cordinates..
code is as
var lat_lng = new Array();
var latlngbounds = new google.maps.LatLngBounds();
for (var 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
});
// console.log(i%2);
var lineSymbol = {
path: 'M 0,-1 0,1',
strokeOpacity: 1,
scale: 4
};
latlngbounds.extend(marker.position);
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent("Location:"+data.location_name+"<br> Battery Status :"+data.battery_status+"<br> Form :"+data.tablename+"<br> Status :"+data.status+"<br> Time :"+new Date(data.time)+"<br> Weather :"+data.weather);
infoWindow.open(map, marker);
});
})(marker, data);
}
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
//***********ROUTING****************//
//Initialize the Path Array
var path = new google.maps.MVCArray();
//Initialize the Direction Service
var service = new google.maps.DirectionsService();
//Set the Path Stroke Color
if(i%2==0)
{
var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7',strokeOpacity: 0,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '20px'
}], });
}
else
{
var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7'});
}
I am drawing line at the end with a case but it only take one either solid or dotted at a time.
A single google.maps.Polyline can only have one style (solid vs. dashed). You need to make each segment that needs a different style a separate Polyline.
proof of concept fiddle
code snippet:
var geocoder;
var map;
var markers = [{
lat: 42,
lng: -72,
title: "0"
}, {
lat: 43,
lng: -73,
title: "1"
}, {
lat: 43,
lng: -74,
title: "2"
}, {
lat: 42,
lng: -75,
title: "3"
}, {
lat: 41,
lng: -76,
title: "4"
}];
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var lat_lng = [];
var latlngbounds = new google.maps.LatLngBounds();
for (var 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
});
// console.log(i%2);
var lineSymbol = {
path: 'M 0,-1 0,1',
strokeOpacity: 1,
scale: 4
};
latlngbounds.extend(marker.position);
(function(marker, data) {
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent("Location:" + data.location_name + "<br> Battery Status :" + data.battery_status + "<br> Form :" + data.tablename + "<br> Status :" + data.status + "<br> Time :" + new Date(data.time) + "<br> Weather :" + data.weather);
infoWindow.open(map, marker);
});
})(marker, data);
//***********ROUTING****************//
if (lat_lng.length > 1) {
//Set the Path Stroke Color
if (i % 2 == 0) {
var poly = new google.maps.Polyline({
map: map,
strokeColor: '#4986E7',
strokeOpacity: 0,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '20px'
}],
path: lat_lng
});
} else {
var poly = new google.maps.Polyline({
map: map,
strokeColor: '#4986E7',
path: lat_lng
});
}
lat_lng = [];
lat_lng.push(myLatlng);
}
}
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>
Related
I wanted to connect multiple markers to a single location using javascript.
I have written the code below and I am getting markers that are getting connected sequentially (as in the image provided).
FYI, I am a beginner in working with javascript and google maps.
I wanted to connect the markers to the following location ['134.56.32.13',19.0760,72.8777]
where,
'134.56.32.13' is the example IP address
19.0760 is the latitude
72.8777 is the longitude.
This is a link i found helpful in connecting the locations -
Connect Multiple markers with polyline
var locations = [
['123.134.67.145', 22.5726, 88.3639],
['140.91.57.132', 28.7041, 77.1025],
['110.191.167.130', 13.0827, 80.2707],
['192.168.151.151', 12.9716, 77.5946]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: new google.maps.LatLng(19.75, 77.94),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var flightPlanCoordinates = [];
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
flightPlanCoordinates.push(marker.getPosition());
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
var flightPath = new google.maps.Polyline({
map: map,
path: flightPlanCoordinates,
strokeColor: "#ff0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
The markers are getting connected sequentially.This is the image.
This is how the output should look like
Easiest to add that entry to your array, then skip it, and create two point polylines starting there and going to each (other) marker in the array:
var locations = [
['134.56.32.13', 19.0760, 72.8777],
['123.134.67.145', 22.5726, 88.3639],
['140.91.57.132', 28.7041, 77.1025],
['110.191.167.130', 13.0827, 80.2707],
['192.168.151.151', 12.9716, 77.5946]
];
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
if (i != 0) {
var flightPlanCoordinates = [
new google.maps.LatLng(locations[0][1], locations[0][2]),
marker.getPosition()
];
var flightPath = new google.maps.Polyline({
map: map,
path: flightPlanCoordinates,
icons: [{
icon: {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
},
offset: '50%'
}],
strokeColor: "#ff0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
proof of concept fiddle
code snippet:
var locations = [
['134.56.32.13', 19.0760, 72.8777],
['123.134.67.145', 22.5726, 88.3639],
['140.91.57.132', 28.7041, 77.1025],
['110.191.167.130', 13.0827, 80.2707],
['192.168.151.151', 12.9716, 77.5946]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: new google.maps.LatLng(19.75, 77.94),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
// create polylines
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
if (i != 0) {
var flightPlanCoordinates = [
new google.maps.LatLng(locations[0][1], locations[0][2]),
marker.getPosition()
];
var flightPath = new google.maps.Polyline({
map: map,
path: flightPlanCoordinates,
icons: [{
icon: {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
},
offset: '50%'
}],
strokeColor: "#ff0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
}
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
I've multiple polylines, I want a marker on every end and start of polyline with a label, I am tracking bike movement, I am getting the polyline but i need to display the time on poly line or on the end point, if i can show the time in the polyline it would be great. I am developing a tracking system, i am getting the lat long, of start and end points i am also abple to draw polylines, i want to display time on the polyline or at least display a marker on every end and show the time... below is my code
var bikearray = [];
$('#searchbtn').on('click', function() {
$.ajax({
url:'http://metrobikes.in/api/a2b-bike-movement-on-map',
method:"GET",
data : {
start_Date : "2017-12-11",
end_date : "2018-01-24",
bike_number : "KA-51-D-6109"
},
}).done(function(data){
bikearray = data.result.data;
initMap();
});
});
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: new google.maps.LatLng(12.98966, 77.653637),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};
for(i = 0; i < bikearray.length; i++){
var from_lat = parseFloat(bikearray[i].from_lat);
var from_long = parseFloat(bikearray[i].from_long);
var to_lat = parseFloat(bikearray[i].to_lat);
var to_long =parseFloat(bikearray[i].to_long);
var linecolor = bikearray[i].colour;
console.log(bikearray[i].from_lat);
var bikePath = new google.maps.Polyline({
path: [
{lat: from_lat, lng: from_long},
{lat: to_lat, lng: to_long}
],
icons: [{
icon: lineSymbol,
repeat:'35px',
offset: '100%'
}],
geodesic: true,
strokeColor: linecolor,
strokeOpacity: 1.0,
strokeWeight: 2,
map: map
});
bikePath.setMap(map);
}
}
To add a marker to the beginning and end of the polyline, add a marker to the beginning point and to the ending point. To add the time in an InfoWindow on the end marker, add that as well (and trigger a click on it to open it):
for(i = 0; i < bikearray.length; i++){
var from_lat = parseFloat(bikearray[i].from_lat);
var from_long = parseFloat(bikearray[i].from_long);
var startMarker = new google.maps.Marker({
map: map,
position: {lat: from_lat, lng: from_long}
});
var to_lat = parseFloat(bikearray[i].to_lat);
var to_long =parseFloat(bikearray[i].to_long);
var endMarker = new google.maps.Marker({
map: map,
position: {lat: to_lat, lng: to_long}
});
var time = bikearray[i].time;
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(endMarker, 'click', (function(marker, time, infowindow) {
return function(evt) {
infowindow.setContent(time);
infowindow.open(map, marker);
}})(endMarker, time, infowindow));
google.maps.event.trigger(endMarker, 'click');
var linecolor = bikearray[i].colour;
proof of concept fiddle
code snippet:
var bikearray = [{
from_lat: 12.98966,
from_long: 77.653637,
to_lat: 12.9715987,
to_long: 77.5945626,
colour: "blue",
time: "12:00"
},
{
from_lat: 13.0826802,
from_long: 80.2707184,
to_lat: 12.9922145,
to_long: 77.7159,
colour: "red",
time: "11:00"
},
]
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: new google.maps.LatLng(12.98966, 77.653637),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};
for (i = 0; i < bikearray.length; i++) {
var from_lat = parseFloat(bikearray[i].from_lat);
var from_long = parseFloat(bikearray[i].from_long);
var startMarker = new google.maps.Marker({
map: map,
position: {
lat: from_lat,
lng: from_long
}
});
var to_lat = parseFloat(bikearray[i].to_lat);
var to_long = parseFloat(bikearray[i].to_long);
var endMarker = new google.maps.Marker({
map: map,
position: {
lat: to_lat,
lng: to_long
}
});
var time = bikearray[i].time;
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(endMarker, 'click', (function(marker, time, infowindow) {
return function(evt) {
infowindow.setContent(time);
infowindow.open(map, marker);
}
})(endMarker, time, infowindow));
google.maps.event.trigger(endMarker, 'click');
var linecolor = bikearray[i].colour;
console.log(bikearray[i].from_lat);
var bikePath = new google.maps.Polyline({
path: [
{
lat: from_lat,
lng: from_long
},
{
lat: to_lat,
lng: to_long
}
],
icons: [{
icon: lineSymbol,
repeat: '35px',
offset: '100%'
}],
geodesic: true,
strokeColor: linecolor,
strokeOpacity: 1.0,
strokeWeight: 2,
map: map
});
bikePath.setMap(map);
}
}
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>
Looks like this was already answered in Text Within Polyline Google Maps V3
One solution would be using this library from github:
https://github.com/googlemaps/js-map-label
You could use it like this:
var labelPosition = new google.maps.LatLng(middle_lat, middle_long);
var mapLabel = new MapLabel({
text: "Your text",
position: labelPosition ,
map: map,
fontSize: 12
});
You would have to calculate the Middle-Point between the two points.
I'm having problems getting a google map polyline to appear though I have it working in other situations that are very similar. This function draws the markers ok but for some reason no path appears between them:
var map;
function initGoogleMap() {
var myLatLng = {
lat: 10,
lng: -97
};
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 1,
center: myLatLng,
mapTypeId: 'satellite',
mapTypeControl: true,
streetViewControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
mapTypeIds: ['roadmap', 'satellite']
}
});
}
function drawArray() {
var lats = ["51.5", "21.43", "30", "40.10"];
var lons = ["-0.06", "-100.36", "-223.23", "-333.94"];
var lastLat = 0;
var lastLon = 0;
for (var t = 0; t < lats.length; t++) {
var lat = lats[t];
var lon = lons[t];
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lon),
icon: "http://1.bp.blogspot.com/_GZzKwf6g1o8/S6xwK6CSghI/AAAAAAAAA98/_iA3r4Ehclk/s1600/marker-green.png",
map: map
});
var lineSymbol = {
// path: 'M 1,-1 1,1',
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
strokeOpacity: 1,
strokeColor: 'white',
scale: 1
};
if (lastLat !== 0) {
$("#show").append("lastLat=" + lastLat + " lastLon=" + lastLon + "<BR>");
$("#show").append("lat=" + lat + " lon=" + lon + "<BR>");
var line = new google.maps.Polyline({
path: [{
lat: lastLat,
lng: lastLon
}, {
lat: lat,
lng: lon
}],
strokeOpacity: 0,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '20px'
}],
map: map
});
}
lastLat = lat;
lastLon = lon;
}
}
initGoogleMap();
drawArray();
There is a fiddle at https://jsfiddle.net/hfeist/t9z29f1q/
Use
lats = [51.5, 21.43, 30, 40.10];
lons = [-0.06, -100.36, -223.23, -333.94];
instead of,
var lats = ["51.5", "21.43", "30", "40.10"];
var lons = ["-0.06", "-100.36", "-223.23", "-333.94"];
JSFiddle demo
My code is:
// Create an object containing LatLng, population.
var cityPoints = {};
cityPoints[0] = {
center: new google.maps.LatLng(41.878113, -87.629798),
id: 0,
addr: 'avenue0',
magnitude: 100000
};
cityPoints[1] = {
center: new google.maps.LatLng(40.714352, -74.005973),
id: 'siv1',
addr: 'avenue1',
magnitude: 100000
};
cityPoints[2] = {
center: new google.maps.LatLng(34.052234, -118.243684),
id: 'siv2',
addr: 'avenue2',
magnitude: 100000
}
var cityCircle;
var infoWindow = new google.maps.InfoWindow({size: new google.maps.Size(150,150)});
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(37.09024, -95.712891),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
for (i in cityPoints) {
var magnitudeOptions = {
map: map,
center: cityPoints[i].center,
radius: cityPoints[i].magnitude,
id:cityPoints[i].id,
addr:cityPoints[i].addr,
infoWindowIndex: i,
strokeColor: '#2d7142',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#7faf8e',
fillOpacity: 0.2
};
cityCircle = new google.maps.Circle(magnitudeOptions);
google.maps.event.addListener(cityCircle, 'click', (function(cityCircle, i) {
return function() {
infoWindow.setContent(cityPoints[i].id + " " + cityPoints[i].addr);
infoWindow.setPosition(cityCircle.getCenter());
infoWindow.open(map);
}
})(cityCircle, i));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
function add()
{
alert(cityCircle.get('id'));
alert(cityCircle.get('addr'));
/* $('#siv2').css('color','red'); */
alert($('#siva2').length);
}
I want to google circle act as markers. I just completed that task now additionally i need to change color of circle.
I want to change color of already drawn google map circles with help of already generated google circle Id
Is this Possible???
One option would be to push the circles as you create them into an array, so you can access them later (say circles =[];).
Iterate through the array setting the 'fillColor' property of each circle (and whatever else you want to change).
for (var i = 0; i < circles.length; i++) {
if (circles[i].get('fillColor') == "#FF0000") {
circles[i].setOptions({fillColor:'#7faf8e'});
} else {
circles[i].setOptions({fillColor: "#FF0000"});
}
}
proof of concept fiddle
code snippet:
var circles = [];
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(37.09024, -95.712891),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
for (i in cityPoints) {
var magnitudeOptions = {
map: map,
center: cityPoints[i].center,
radius: cityPoints[i].magnitude,
id: cityPoints[i].id,
addr: cityPoints[i].addr,
infoWindowIndex: i,
strokeColor: '#2d7142',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#7faf8e',
fillOpacity: 0.2
};
cityCircle = new google.maps.Circle(magnitudeOptions);
circles.push(cityCircle);
google.maps.event.addListener(cityCircle, 'click', (function(cityCircle, i) {
return function() {
infoWindow.setContent(cityPoints[i].id + " " + cityPoints[i].addr);
infoWindow.setPosition(cityCircle.getCenter());
infoWindow.open(map);
}
})(cityCircle, i));
}
google.maps.event.addDomListener(document.getElementById('toggleCircles'), 'click', function() {
for (var i = 0; i < circles.length; i++) {
if (circles[i].get('fillColor') == "#FF0000") {
circles[i].setOptions({
fillColor: '#7faf8e'
});
} else {
circles[i].setOptions({
fillColor: "#FF0000"
});
}
}
});
}
google.maps.event.addDomListener(window, "load", initialize);
// Create an object containing LatLng, population.
var cityPoints = {};
cityPoints[0] = {
center: new google.maps.LatLng(41.878113, -87.629798),
id: 0,
addr: 'avenue0',
magnitude: 100000
};
cityPoints[1] = {
center: new google.maps.LatLng(40.714352, -74.005973),
id: 'siv1',
addr: 'avenue1',
magnitude: 100000
};
cityPoints[2] = {
center: new google.maps.LatLng(34.052234, -118.243684),
id: 'siv2',
addr: 'avenue2',
magnitude: 100000
}
var cityCircle;
var infoWindow = new google.maps.InfoWindow({
size: new google.maps.Size(150, 150)
});
html,
body,
#map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input type="button" value="toggle" id="toggleCircles" />
<div id="map-canvas"></div>
If you want to set the color of the circle by its Id, then use an associative array indexed by the id:
circles[cityCircle.id] = cityCircle;
Then change the color like this:
var circleId = document.getElementById('circleId').value;
var circle = circles[circleId];
if (circle.get('fillColor') == "#FF0000") {
circle.setOptions({fillColor: '#7faf8e'});
} else {
circle.setOptions({fillColor: "#FF0000"});
}
proof of concept fiddle
code snippet:
var circles = [];
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(37.09024, -95.712891),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
for (i in cityPoints) {
var magnitudeOptions = {
map: map,
center: cityPoints[i].center,
radius: cityPoints[i].magnitude,
id: cityPoints[i].id,
addr: cityPoints[i].addr,
infoWindowIndex: i,
strokeColor: '#2d7142',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#7faf8e',
fillOpacity: 0.2
};
cityCircle = new google.maps.Circle(magnitudeOptions);
circles[cityCircle.id] = cityCircle;
document.getElementById('circleIds').innerHTML += cityCircle.id + "<br>";
google.maps.event.addListener(cityCircle, 'click', (function(cityCircle, i) {
return function() {
infoWindow.setContent(cityPoints[i].id + " " + cityPoints[i].addr);
infoWindow.setPosition(cityCircle.getCenter());
infoWindow.open(map);
}
})(cityCircle, i));
}
google.maps.event.addDomListener(document.getElementById('toggleCircles'), 'click', function() {
var circleId = document.getElementById('circleId').value;
var circle = circles[circleId];
if (circle.get('fillColor') == "#FF0000") {
circle.setOptions({
fillColor: '#7faf8e'
});
} else {
circle.setOptions({
fillColor: "#FF0000"
});
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
// Create an object containing LatLng, population.
var cityPoints = {};
cityPoints[0] = {
center: new google.maps.LatLng(41.878113, -87.629798),
id: 0,
addr: 'avenue0',
magnitude: 100000
};
cityPoints[1] = {
center: new google.maps.LatLng(40.714352, -74.005973),
id: 'siv1',
addr: 'avenue1',
magnitude: 100000
};
cityPoints[2] = {
center: new google.maps.LatLng(34.052234, -118.243684),
id: 'siv2',
addr: 'avenue2',
magnitude: 100000
}
var cityCircle;
var infoWindow = new google.maps.InfoWindow({
size: new google.maps.Size(150, 150)
});
html,
body,
#map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input type="button" value="toggle" id="toggleCircles" />
<input value="siv2" id="circleId" />
<div id="circleIds"></div>
<div id="map-canvas"></div>
I've been trying to rotate the Google Maps API SVG aircraft symbol so it shows the aircraft's correct heading each time the symbol moves. It initially loads showing the correct heading - I just can't seem to work out how to update it to the new heading. I've spent 2 days trying and very much failing. I thought I'd be able to simply change it by adding rotatation: getTrueHeading but no such luck.
The only way I can get it to closely do what I want is by adding the planeSymbol instance and the marker instance in to the
setInterval(function() {}, 3000);
function towards the bottom but this (obviously) duplicates the aircraft icon and seems very inefficient.
I appreciate the code below is not very good so please excuse it's quality - still very much work in progress and I'm also very new to javascript.
If anyone could help I would be most grateful.
function initMap() {
var getLatEl = document.getElementById('latitude');
getLat = parseFloat(getLatEl.innerHTML);
var getLongEl = document.getElementById('longitude');
getLong = parseFloat(getLongEl.innerHTML);
var gettrueHeadingEl = document.getElementById('trueHeading');
getTrueHeading = parseFloat(gettrueHeadingEl.innerHTML);
if (isNaN(getLat) == true && isNaN(getLong) == true) {
// Show default location
var usersLocation = {lat: 33.949484, lng: -118.430566};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: usersLocation,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var image = 'assets/images/icons/aircraft_marker_map_none_16x16.png';
}else if (isNaN(getLat) == false && isNaN(getLong) == false) {
// Show flight sim location
var usersLocation = {lat: getLat, lng: getLong};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: usersLocation,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var image = 'assets/images/icons/aircraft_marker_map_16x16.png';
}
var planeSymbol = {
path: 'M362.985,430.724l-10.248,51.234l62.332,57.969l-3.293,26.145 l-71.345-23.599l-2.001,13.069l-2.057-13.529l-71.278,22.928l-5.762-23.984l64.097-59.271l-8.913-51.359l0.858-114.43 l-21.945-11.338l-189.358,88.76l-1.18-32.262l213.344-180.08l0.875-107.436l7.973-32.005l7.642-12.054l7.377-3.958l9.238,3.65 l6.367,14.925l7.369,30.363v106.375l211.592,182.082l-1.496,32.247l-188.479-90.61l-21.616,10.087l-0.094,115.684',
scale: 0.0333,
strokeOpacity: 1,
color: 'black',
strokeWeight: 1,
rotation: getTrueHeading
};
var marker = new google.maps.Marker({
id: "player",
position: usersLocation,
map: map,
title: 'Username',
icon: planeSymbol
});
//
// Move players aircraft
setInterval(function() {
var getLatEl = document.getElementById('latitude');
getLat = parseFloat(getLatEl.innerHTML);
var getLongEl = document.getElementById('longitude');
getLong = parseFloat(getLongEl.innerHTML);
var gettrueHeadingEl = document.getElementById('trueHeading');
getTrueHeading = parseFloat(gettrueHeadingEl.innerHTML);
var planeSymbol = {
path: 'M362.985,430.724l-10.248,51.234l62.332,57.969l-3.293,26.145 l-71.345-23.599l-2.001,13.069l-2.057-13.529l-71.278,22.928l-5.762-23.984l64.097-59.271l-8.913-51.359l0.858-114.43 l-21.945-11.338l-189.358,88.76l-1.18-32.262l213.344-180.08l0.875-107.436l7.973-32.005l7.642-12.054l7.377-3.958l9.238,3.65 l6.367,14.925l7.369,30.363v106.375l211.592,182.082l-1.496,32.247l-188.479-90.61l-21.616,10.087l-0.094,115.684',
scale: 0.0333,
strokeOpacity: 1,
color: 'black',
strokeWeight: 1,
rotation: getTrueHeading
};
var marker = new google.maps.Marker({
position: usersLocation,
map: map,
title: 'Username',
icon: planeSymbol
});
marker.setPosition( new google.maps.LatLng( getLat, getLong ) );
map.panTo( new google.maps.LatLng( getLat, getLong ) );
}, 3000);
}
marker.setMap( map );
moveAircraft( map, marker );
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=APIKEYREMOVED&callback=initMap" async defer>
</script>
<!--/Google Map API -->
<!-- Move Aircraft to Flight Sim Location -->
<script>
function moveAircraft( map, marker ) {
var getLatEl = document.getElementById('latitude');
getLat = parseFloat(getLatEl.innerHTML);
var getLongEl = document.getElementById('longitude');
getLong = parseFloat(getLongEl.innerHTML);
marker.setPosition( new google.maps.LatLng( getLat, getLong ) );
map.panTo( new google.maps.LatLng( getLat, getLong ) );
};
</script>
Read the heading from the DOM just like you do the coordinates and use it to set the rotation property of the icon.
// read the value for the heading from the DOM
var gettrueHeadingEl = document.getElementById('trueHeading');
getTrueHeading = parseFloat(gettrueHeadingEl.innerHTML);
// set the rotation property of the icon
marker.setPosition(new google.maps.LatLng(getLat, getLong));
var newIcon = marker.getIcon()
newIcon.rotation = getTrueHeading;
marker.setIcon(newIcon);
proof of concept fiddle
code snippet:
function initMap() {
var getLatEl = document.getElementById('latitude');
getLat = parseFloat(getLatEl.innerHTML);
var getLongEl = document.getElementById('longitude');
getLong = parseFloat(getLongEl.innerHTML);
var gettrueHeadingEl = document.getElementById('trueHeading');
getTrueHeading = parseFloat(gettrueHeadingEl.innerHTML);
if (isNaN(getLat) == true && isNaN(getLong) == true) {
// Show default location
var usersLocation = {
lat: 33.949484,
lng: -118.430566
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: usersLocation,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var image = 'assets/images/icons/aircraft_marker_map_none_16x16.png';
} else if (isNaN(getLat) == false && isNaN(getLong) == false) {
// Show flight sim location
var usersLocation = {
lat: getLat,
lng: getLong
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: usersLocation,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var image = 'assets/images/icons/aircraft_marker_map_16x16.png';
}
var planeSymbol = {
path: 'M362.985,430.724l-10.248,51.234l62.332,57.969l-3.293,26.145 l-71.345-23.599l-2.001,13.069l-2.057-13.529l-71.278,22.928l-5.762-23.984l64.097-59.271l-8.913-51.359l0.858-114.43 l-21.945-11.338l-189.358,88.76l-1.18-32.262l213.344-180.08l0.875-107.436l7.973-32.005l7.642-12.054l7.377-3.958l9.238,3.65 l6.367,14.925l7.369,30.363v106.375l211.592,182.082l-1.496,32.247l-188.479-90.61l-21.616,10.087l-0.094,115.684',
scale: 0.0333,
strokeOpacity: 1,
color: 'black',
strokeWeight: 1,
rotation: getTrueHeading,
anchor: new google.maps.Point(400, 400)
};
var marker = new google.maps.Marker({
id: "player",
position: usersLocation,
map: map,
title: 'Username',
icon: planeSymbol
});
//
var polyline = new google.maps.Polyline({
map: map,
path: []
})
// Move players aircraft
setInterval(function() {
var getLatEl = document.getElementById('latitude');
getLat = parseFloat(getLatEl.innerHTML);
var getLongEl = document.getElementById('longitude');
getLong = parseFloat(getLongEl.innerHTML);
var gettrueHeadingEl = document.getElementById('trueHeading');
getTrueHeading = parseFloat(gettrueHeadingEl.innerHTML);
var planeSymbol = {
path: 'M362.985,430.724l-10.248,51.234l62.332,57.969l-3.293,26.145 l-71.345-23.599l-2.001,13.069l-2.057-13.529l-71.278,22.928l-5.762-23.984l64.097-59.271l-8.913-51.359l0.858-114.43 l-21.945-11.338l-189.358,88.76l-1.18-32.262l213.344-180.08l0.875-107.436l7.973-32.005l7.642-12.054l7.377-3.958l9.238,3.65 l6.367,14.925l7.369,30.363v106.375l211.592,182.082l-1.496,32.247l-188.479-90.61l-21.616,10.087l-0.094,115.684',
scale: 0.0333,
strokeOpacity: 1,
color: 'black',
strokeWeight: 1,
rotation: getTrueHeading,
anchor: new google.maps.Point(400, 400)
};
if (marker && marker.setPosition) {
marker.setPosition(new google.maps.LatLng(getLat, getLong));
var newIcon = marker.getIcon()
newIcon.rotation = getTrueHeading;
marker.setIcon(newIcon);
polyline.getPath().push(marker.getPosition());
} else {
marker = new google.maps.Marker({
position: usersLocation,
map: map,
title: 'Username',
icon: planeSymbol
});
}
map.panTo(new google.maps.LatLng(getLat, getLong));
}, 3000);
marker.setMap(map);
// moveAircraft(map, marker);
}
var angle = 0;
function simulateMovement() {
angle += 1;
var newPt = google.maps.geometry.spherical.computeOffset(new google.maps.LatLng(42, -72), 100000, angle);
document.getElementById('latitude').innerHTML = newPt.lat();
document.getElementById('longitude').innerHTML = newPt.lng();
var heading = angle + 90;
document.getElementById('trueHeading').innerHTML = heading;
}
setInterval(simulateMovement, 1000);
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="latitude">42</div>
<div id="longitude">-72</div>
<div id="trueHeading">90</div>
<div id="map"></div>