Google Maps Partial Polyline - javascript

I want to map a route between two points on Google Maps with a polyline and overlay this with another "current distance travelled" polyline. Basically, if the distance between the two points is 100KM and the person has travelled 25KM I want to overlay a second polyline 25% of the route. I am finding it difficult to find even a formula to calculate what the coordinates of the point 25% along this route would be.
Is there any Google map functionality to do something like this, or a technique for calculating a point along a route, x% of the way.
Thanks in advance.
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Polylines</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script type="text/javascript" src="v3_epoly.js"></script>
<script>
function initialize() {
var mapOptions = {
zoom: 3,
center: new google.maps.LatLng(0, -180),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(-27.46758, 153.027892)
];
var lineSymbol = {
path: 'M 0,-1 0,1',
strokeOpacity: 1,
scale: 4
};
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#999999',
strokeOpacity: 0,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '20px'
}],
});
flightPath.setMap(map);
//current location 2000 miles on route
var mar = flightPath.GetPointAtDistance(2000000);
var myLatlng = new google.maps.LatLng(mar.k, mar.D);
console.log(mar);
var marker = new google.maps.Marker({
position: mar,
map: map,
title: 'Current Location'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" style="height:100%; width:100%;"></div>
</body>
</html>

Related

I want google map like this Multiple Polyline, can Multiple select

I want google map like this Multiple Polyline, can Multiple select.
Multiple Polyline
var geocoder;
var map;
var polyline;
positions = [new google.maps.LatLng(37.441883,-122.143019),
new google.maps.LatLng(37.45296,-122.181725)];
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
});
$("#chkRouteLines").click(function () {
if (!polyline || !polyline.setMap) {
polyline = new google.maps.Polyline({
path: positions,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2,
visible: true
});
}
if ($(this).is(':checked')) {
polyline.setMap(map);
} else {
polyline.setMap(null);
}
})
}
google.maps.event.addDomListener(window, "load", initialize);
html, body, #map_canvas {
height: 90%;
width: 100%;
margin: 0px;
padding: 0px
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>
<input id="chkRouteLines" value="click" type="checkbox" />
you can google developers documents.For example this link:
https://developers.google.com/maps/documentation/javascript/examples/polyline-complex
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Complex Polylines</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// This example creates an interactive map which constructs a polyline based on
// user clicks. Note that the polyline only appears once its path property
// contains two LatLng coordinates.
var poly;
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {lat: 41.879, lng: -87.624} // Center the map on Chicago, USA.
});
poly = new google.maps.Polyline({
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3
});
poly.setMap(map);
// Add a listener for the click event
map.addListener('click', addLatLng);
}
// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event) {
var path = poly.getPath();
// Because path is an MVCArray, we can simply append a new coordinate
// and it will automatically appear.
path.push(event.latLng);
// Add a new marker at the new plotted point on the polyline.
var marker = new google.maps.Marker({
position: event.latLng,
title: '#' + path.getLength(),
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>

move circle along with marker google maps javascript

I am working on a project in which i have marker on map with a circle around it. I want to move the circle along with marker. When ever i move the marker the circle remains to its last position. I want to move both that when ever i move the marker the circle should also move along with it.
Kindly tell me where i am doing mistake?
code is here:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Draw Circle on Marker Click on Google Map</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 99%;
width: 99%
}
</style>
<script async defer
src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"></script>
<script>
var markers = [];
var map;
// First, create an object containing LatLng and population for each city.
var citymap = {lat:21.002471054356725, lng:79.12353515625};
function initMap() {
var lat_lng = {lat: 22.08672, lng: 79.42444};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: lat_lng,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var marker = new google.maps.Marker({
position: lat_lng,
draggable:true ,
map: map
});
var cityCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: lat_lng,
radius: 199999.45454,
draggable:true
});
}
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
You just need to bind drag event with circle with .addListener() function
do it like this
function initMap() {
var lat_lng = {lat: 22.08672, lng: 79.42444};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: lat_lng,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var marker = new google.maps.Marker({
position: lat_lng,
draggable:true ,
map: map
});
var cityCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: lat_lng,
radius: 199999.45454,
draggable:true
});
//add event listner on drag event of marker
marker.addListener('drag', function(event) {
cityCircle.setOptions({center:{lat:event.latLng.lat(),lng:event.latLng.lng()}});
});
}

Google Maps polygon contains location True False

I've used Javascript+HTLM to show user location and have created polygons on google maps API. My issue is with creating labels/textboxes displaying "User is in polygon" and "User is not in polygon". This example code creates a red dot if the point clicked is in the polygon, and a green dot if the point clicked is out of the polygon. Instead of red and green dots, I want to have "In polygon" "Out of polygon" displayed in a text box that I can then record into a database.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Polygon arrays</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 24.886, lng: -70.269},
zoom: 5,
});
var triangleCoords = [
{lat: 25.774, lng: -80.19},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757}
];
var bermudaTriangle = new google.maps.Polygon({paths: triangleCoords});
google.maps.event.addListener(map, 'click', function(e) {
var resultColor =
google.maps.geometry.poly.containsLocation(e.latLng, bermudaTriangle) ?
'red' :
'green';
new google.maps.Marker({
position: e.latLng,
map: map,
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillColor: resultColor,
fillOpacity: .2,
strokeColor: 'white',
strokeWeight: .5,
scale: 10
}
});
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/jskey=YOUR_API_KEY&signed_in=true&libraries=geometry&callback=initMap"
async defer></script>
</body>
</html>
I have also tried using this code which logs "True" or "False" in the console but again, not in a textbox.
google.maps.event.addListener(map, 'click', function(event) {
console.log(google.maps.geometry.poly.containsLocation(event.latLng, bermudaTriangle));
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Big thanks for any and all help here.
I had a label called Label1 and used this code which writes true in the label if point is in the polygon or false if the point is out of polygon.
var bermudaTriangle = new google.maps.Polygon({paths: triangleCoords});
google.maps.event.addListener(map, 'click', function (event) {
document.getElementById("Label1").innerHTML =google.maps.geometry.poly.containsLocation(event.latLng, bermudaTriangle);
});

How to Add a circle and get the coordinates and radius of the circle using one click on the Google Map?

I want to create a circle using one click on the map, also i want to collect the Lat/Lon information of the circle and it's radius. Please suggest me how to do it using JavaScript.
Regards,
Madhu
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Circles</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
// This example creates circles on the map with fixed radius of 5km
var cityCircle;
function initialize() {
// Create the map.
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(37.09024, -95.712891),//can use your center
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
google.maps.event.addListener(map, "click", function (e) {
//lat and lng is available in e object
var latLng = e.latLng;
// Construct the circleOptions
var circleOptions = {
//optional to modify
/* strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,*/
map: map,
center: latLng,
radius: 5000 //in meters apporx.
};
// Add the circle for this city to the map.
cityCircle = new google.maps.Circle(circleOptions);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>

Complex Polylines with arrow google map api v3

I wanted to create the arrow directed polyline using google map. I'm able to connect through line. But i wanted to draw line in arrow ended.
My code is
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 5
//center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
map.clearOverlays();
// Define a symbol using a predefined path (an arrow)
// supplied by the Google Maps JavaScript API.
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_OPEN_ARROW
};
var polyOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
icons: [{
icon: lineSymbol,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
offset: '100%'
}],
strokeWeight: 3
};
lineCoordinates= new google.maps.Polyline(polyOptions);
lineCoordinates.setMap(map);
}
function placeMarker(mapLoc,address,infoDlgString){
map.setCenter(mapLoc);
var marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
title: address,
position: mapLoc
});
var infowindow = new google.maps.InfoWindow({
content:infoDlgString
});
infowindow.open(map,marker);
}
function getAddressDetail(address2,infoDlgString){
geocoder.geocode( { 'address': address2}, function(results2, status2) {
if (status2 == google.maps.GeocoderStatus.OK) {
map.setCenter(results2[0].geometry.location);
placeMarker(results2[0].geometry.location,address2,infoDlgString);
var path = lineCoordinates.getPath();
path.push(results2[0].geometry.location);
} else {
alert('Geocode was not successful for the following reason: ' + status2);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
You haven't specified a path for your polyline to follow. So Google doesn't know what to plot. Once you add a path of multiple latlngs in your polyOptions variable, the line should appear with the correct arrow head end. This works for me:
<!DOCTYPE html>
<html>
<head>
<title>Polyline with arrows</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { width:100%; height:100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(54.57723, -2.79748);
var myOptions = {
zoom: 9,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,
strokeColor: '#FF0000',
strokeOpacity: 1.0
};
var polyline = new google.maps.Polyline({
path: [latlng, new google.maps.LatLng(54.60039,-3.13632), new google.maps.LatLng(54.36897,-3.07561)],
strokeColor: "#000000",
strokeOpacity: 0.5,
strokeWeight: 4,
map: map,
icons: [{
icon: lineSymbol,
offset: '100%'
}]
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
Also note that there is no strokeColor or strokeOpacity properties in the IconSequence object. These are on the Symbol object instead.

Categories

Resources