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
Related
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 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);
}
}
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>
I use the below code for my webpage, but I want the map show the border as in this example.
How can I figure it out?
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script language="javascript" type="text/javascript">
var map;
var geocoder;
function InitializeMap() {
var latlng = new google.maps.LatLng(39.646859, 27.883121);
var myOptions =
{
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
}
function FindLocation(whichone) {
geocoder = new google.maps.Geocoder();
InitializeMap();
var control1 = document.getElementById('<%= DDL_Ilce.ClientID %>');
var selectedvalue1 = control1.options[control1.selectedIndex].text;
var control2 = document.getElementById('<%= DDL_Mahalle.ClientID %>');
var selectedvalue2 = control2.options[control2.selectedIndex].text;
if (whichone == 1) {
var address = " Balıkesir" ;
}
else
{
var address = selectedvalue2 + " Balıkesir" ;
}
alert(address);
geocoder.geocode({ 'address': address, 'region':'Turkey' }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.fitBounds(results[0].geometry.bounds);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
}
else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
window.onload = InitializeMap;
</script>
Add in the Polyline method. As an example place something like this inside your InitializeMap() function:
var flightPlanCoordinates = [
{lat: 39.646859, lng: 27.883121},
{lat: 40.646859, lng: 28.883121},
{lat: 42.646859, lng: 30.883121},
{lat: 43.646859, lng: 32.883121},
{lat: 39.646859, lng: 27.883121}
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
So that your function looks like this now:
function InitializeMap(){
var latlng = new google.maps.LatLng(39.646859, 27.883121);
var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, disableDefaultUI: true };
map = new google.maps.Map(document.getElementById("map"), myOptions);
var flightPlanCoordinates = [
{lat: 39.646859, lng: 27.883121},
{lat: 40.646859, lng: 28.883121},
{lat: 42.646859, lng: 30.883121},
{lat: 43.646859, lng: 32.883121},
{lat: 39.646859, lng: 27.883121}
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
You can read more about it here:
https://developers.google.com/maps/documentation/javascript/shapes
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>