ROUTES MARKING JSON - javascript

ROUTES MARKING JSON - javascript

I have a code javascript with JSON .. The code it's ok .
The code draw the markers corectly, now I need link the points..
This is my code :
function initialize() {
var hr = new XMLHttpRequest();
hr.open("GET", "mylist.json", true);
hr.setRequestHeader("Content-type", "application/json", true);
var la;
var lo;
hr.onreadystatechange = function() {
var map = new google.maps.Map(document.getElementById('mapa'), {
zoom: 12,
center: new google.maps.LatLng(3.555, -76.29),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var pathCoordinates = new google.maps.MVCArray();
if (hr.readyState == 4 && hr.status == 200) {
var data = JSON.parse(hr.responseText);
for (var obj in data) {
la = data[obj].a;
lo = data[obj].o;
marker = new google.maps.Marker({
position: new google.maps.LatLng(la, lo),
map: map
});
}
}
}
}
hr.send(null);
I use the next code for link of the marker but I can't save the JSON into array.
var marcadores = [{
lat: 3.54849,
lng: -76.2887
}, {
lat: 3.54856,
lng: -76.3000
}];
var flightPath = new google.maps.Polyline({
path: marcadores,
geodesic: true,
strokeColor: 'green',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);

I solved my problem...
the solution was this :
arr.push(new google.maps.LatLng( la , lo));
}
var flightPath = new google.maps.Polyline({
path: arr,
geodesic: true,
strokeColor: 'green',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);

Related

how to connect multiple markers to a single location using javascript

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>

Filling Google Maps polygon from array of LatLng points

I have an array of coordinates in LatLng format. I would like to construct a polygon using those coordinates. I know I can hardcode a polygon with individual coordinates like this:
var triangleCoords = [
{lat: A, lng: A},
{lat: B, lng: B},
{lat: C, lng: C}]
Is it possible to place the LatLng data points from my array into triangleCoords and create the polygon that way?

Correct me if I had misunderstood your question.
Q:
Is it possible to place the LatLng data points from my array into triangleCoords and create the polygon that way?
A:
Short answer: No. Unfortunately there is no smartness in the google.maps.Polygon code which would magically try to figure out the lat and lng coordinates of the specified google.maps.LatLng objects for you.
You will need to use the lat() and lng() APIs to return the raw coordinate values from the google.maps.LatLng object and plug that into your array. No shortcut.
Example:
var map = new google.maps.Map(document.getElementById("map"),
{
zoom: 4,
center: new google.maps.LatLng(22.7964, 79.8456),
mapTypeId: google.maps.MapTypeId.HYBRID
});
var coordinateA = new google.maps.LatLng(18.979026,72.949219);
var coordinateB = new google.maps.LatLng(28.613459,77.255859);
var coordinateC = new google.maps.LatLng(22.512557,88.417969);
var coordinateD = new google.maps.LatLng(12.940322,77.607422);
var coords =
[
{lat: coordinateA.lat(), lng: coordinateA.lng() },
{lat: coordinateB.lat(), lng: coordinateB.lng() },
{lat: coordinateC.lat(), lng: coordinateC.lng() },
{lat: coordinateD.lat(), lng: coordinateD.lng() }
];
metros = new google.maps.Polygon(
{
paths: coords,
strokeColor: "#0000FF",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#0000FF",
fillOpacity: 0.26
});
See here for a working JSFiddle example.
http://jsfiddle.net/SamuelToh/3srggbmu/

Here same way am trying polygon google route map dynamically from mysql, it work only on marker, but its not working in polygon ,
here is the code
function initMap()
{
var map = new google.maps.Map(document.getElementById('map'),{
zoom: 5,
center: { lat: 13.36, lng: 77.03 },
});
var planCoordinates = new Array();
// var locations = [
// {lat: 13.367797388285002, lng:77.03707749682616},
// {lat:13.341074247677549, lng:77.0394807561035},
// {lat:13.379153826558369, lng: 77.08685929614256},
// {lat: 13.367797388285002, lng:77.03707749682616},
// ];
<?php
if ($result->num_rows > 0)
{
foreach($result as $key => $row)
{
?>
var locations = [{lat: <?php echo $row['lat']; ?>,lng: <?php echo $row['lng']; ?>}];
for (let i = 0; i < locations.length; i++) {
let obj = locations[i];
planCoordinates[i] = new google.maps.LatLng(obj.lat, obj.lng);
var myLatlng = new google.maps.LatLng(obj.lat, obj.lng);
poly = new google.maps.Polygon({
path: planCoordinates,
geodesic: true,
strokeColor: 'hsla(290,60%,70%,0.3)',
strokeOpacity: 1.0,
strokeWeight: 3,
fillColor: 'hsla(290,60%,70%,0.3)',
fillOpacity: 1.35
});
poly.setMap(map);
var infoWindow = new google.maps.InfoWindow({ content: contentString.this });
var marker = new google.maps.Marker({
position: myLatlng,
title: "Jumbookart",
zIndex: 999,
});
marker.setMap(map);
let ikonica = new google.maps.Marker({
position: myLatlng,
title: "Markeri",
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 7
}
});
ikonica.setMap(map);
}
<?php } } ?>
var arrayOfFlightPlans = [locations];
//Loops through all polyline paths and draws each on the map.
for (let i = 0; i < arrayOfFlightPlans.length; i++) {
flightPath = new google.maps.Polygon({
path: arrayOfFlightPlans[i],
geodesic: true,
strokeColor: 'hsla(290,60%,70%,0.3)',
strokeOpacity: 1.0,
strokeWeight: 3,
fillColor: 'hsla(290,60%,70%,0.3)',
fillOpacity: 1.35
});
flightPath.setMap(map);
}
}

How to edit color of google circle using id

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>

Google Maps JavaScript API - Create Polygon from Polylines Snapped to Road

I am trying to fill an area that is bordered by polylines that are snapped to roads. Here is my code:
var pos = new google.maps.LatLng(29.744860,-95.361302);
var myOptions = {
zoom: 12,
center: pos,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), myOptions);
map.setCenter(pos);
roadTrip1 = [
new google.maps.LatLng(29.692093, -95.377307),
new google.maps.LatLng(29.813047,-95.399361),
new google.maps.LatLng(29.692093, -95.377307)
];
var traceroadTrip1 = new google.maps.Polyline({
path: roadTrip1,
strokeColor: "red",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
});
var service1 = new google.maps.DirectionsService(),traceroadTrip1,snap_path=[];
traceroadTrip1.setMap(map);
for(j=0;j<roadTrip1.length-1;j++){
service1.route({origin: roadTrip1[j],destination: roadTrip1[j+1],travelMode: google.maps.DirectionsTravelMode.DRIVING},function(result, status) {
if(status == google.maps.DirectionsStatus.OK) {
snap_path = snap_path.concat(result.routes[0].overview_path);
traceroadTrip1.setPath(snap_path);
}
});
}
I'm not too familiar with javascript and I'm hoping it's easy to create a polygon from polylines that are snapped to roads. Once I have a polygon I'd like to color the area.
Thanks for any and all help.

Change the google.maps.Polyline to a google.maps.Polygon.
var traceroadTrip1 = new google.maps.Polygon({
path: roadTrip1,
strokeColor: "red",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
proof of concept fiddle
code snippet:
function initialize() {
var pos = new google.maps.LatLng(29.813047, -95.399361);
var myOptions = {
zoom: 11,
center: pos,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), myOptions);
map.setCenter(pos);
roadTrip1 = [
new google.maps.LatLng(29.692093, -95.377307),
new google.maps.LatLng(29.813047, -95.399361),
new google.maps.LatLng(29.692093, -95.377307)
];
var traceroadTrip1 = new google.maps.Polygon({
path: roadTrip1,
strokeColor: "red",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
var service1 = new google.maps.DirectionsService(),
traceroadTrip1, snap_path = [];
var bounds = new google.maps.LatLngBounds();
traceroadTrip1.setMap(map);
for (j = 0; j < roadTrip1.length - 1; j++) {
service1.route({
origin: roadTrip1[j],
destination: roadTrip1[j + 1],
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
snap_path = snap_path.concat(result.routes[0].overview_path);
traceroadTrip1.setPath(snap_path);
for (var i = 0; i < traceroadTrip1.getPath().getLength(); i++) {
bounds.extend(traceroadTrip1.getPath().getAt(i));
}
map.fitBounds(bounds);
}
});
}
}
google.maps.event.addDomListener(window, "load", initialize);
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>

Rotate SVG symbol to match aircraft heading using Google Maps API

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>

We Keep Coding

JavaScript is the programming language of the Web.

ROUTES MARKING JSON - javascript

I solved my problem... the solution was this : arr.push(new google.maps.LatLng( la , lo)); } var flightPath = new google.maps.Polyline({ path: arr, geodesic: true, strokeColor: 'green', strokeOpacity: 1.0, strokeWeight: 2 }); flightPath.setMap(map);

Related

how to connect multiple markers to a single location using javascript

Filling Google Maps polygon from array of LatLng points

How to edit color of google circle using id

Google Maps JavaScript API - Create Polygon from Polylines Snapped to Road

Rotate SVG symbol to match aircraft heading using Google Maps API

Categories

Resources