I am using google map api version 3 . Now i want to link markers with line, so that a path can be created between the markers.
Any solution ?
To create line between two markers
use this
var Polyline_Coordinates = [
new google.maps.LatLng(42.357778,-71.061667), // your location lattitude and longitude
new google.maps.LatLng(40.716667,-74),
new google.maps.LatLng(41.836944,-87.684444),
new google.maps.LatLng(34.05,-118.25)
];
var Polyline_Path = new google.maps.Polyline({
path: Polyline_Coordinates,
strokeColor: "#000000",
// color of the outline of the polyline
strokeOpacity: 1.0,
// between 0.0 and 1.0
strokeWeight: 5
// The stroke width in pixels
});
Polyline_Path.setMap(map);
Related
I have two points represented by (lat, lng) and a circle represented center = point(lat, lng) and radius.
[2] pry(main)> points
=> [#<struct Geography::Point x=8.6836, y=56.7619>, #<struct Geography::Point x=8.7501, y=56.8298>]
[3] pry(main)> circle
=> #<struct Geography::Circle center=#<struct Geography::Point x=8.71685, y=56.79585>, radius=5253.053885917054>
I have a method that calculates the distance using Haversine formula so if I do it from the center of the circle towards both points, I'll get:
[4] pry(main)> Geography::Utils.distance_between(circle.center, points.first)
=> 5253.053885917054
[5] pry(main)> Geography::Utils.distance_between(circle.center, points.second)
=> 5252.8180384905045
Please note that the distance between the first point and the center of the circle is the actual radius of the circle. All the distances are in meters. What I mean by this is that one point is on the arc and the one should be super close.
Expected result:
If I represent that in google maps, the arc of the circle will pass through one point and be super close to second.
Actual result:
Question
How does google maps projection works in my case and how can I have an ouput that satisfies the reality?
Map code:
:coffeescript
window.createPostcodeMarker = (postcode) ->
marker = new google.maps.Marker
draggable: false
raiseOnDrag: false
position: postcode.position
map: map
tooltip: postcode.name
icon:
path: google.maps.SymbolPath.CIRCLE
fillOpacity: 1
strokeOpacity: 1
strokeColor: postcode.stroke_color
strokeWeight: 1
scale: 3
fillColor: postcode.stroke_color
circle = new google.maps.Circle
map: map
radius: postcode.radius
fillColor: postcode.fill_color
strokeColor: postcode.stroke_color
strokeWeight: 1
strokeOpacity: 0.8
circle.bindTo('center', marker, 'position')
marker
window.createAreaMarker = (area) ->
marker = new google.maps.Marker
draggable: false
raiseOnDrag: false
position: area.position
map: map
tooltip: area.name
icon:
path: google.maps.SymbolPath.CIRCLE
fillOpacity: 0.3
strokeOpacity: 0.3
strokeColor: area.stroke_color
strokeWeight: 1
scale: 0
fillColor: area.stroke_color
circle = new google.maps.Circle
map: map
radius: area.radius
fillColor: area.fill_color
strokeColor: area.stroke_color
strokeWeight: 1
strokeOpacity: 0.3
circle.bindTo('center', marker, 'position')
marker
window.googleMapsInitializePostcodesMap = ->
if PageData?.postcodesData?
window.bounds = new google.maps.LatLngBounds()
window.markers = []
mapOptions =
mapTypeId: google.maps.MapTypeId.ROADMAP
maxZoom: 13
window.map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions)
# Create markers & extend bounds
for postcode in PageData.postcodesData
marker = createPostcodeMarker(postcode)
markers.push(marker)
bounds.extend(marker.position)
for area in PageData.areasData
marker = createAreaMarker(area)
markers.push(marker)
window.map.fitBounds(bounds)
= json_data_tag(#postcodes_map_data, 'postcodesData')
= json_data_tag(#areas_map_data, 'areasData')
#map-canvas{style: "width: 100%; height: 600px;"}
- content_for :footer_javascripts do
= google_maps_api_js("googleMapsInitializePostcodesMap")
Codepen: https://codepen.io/radubogdan/pen/gWEvZP
You should use the Spherical Geometry library that can be loaded as part of the Javascript Maps API by appending &libraries=geometry when loading the API - for example:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">
The advantage of this method is that it abstracts away the implementation details of the default projection in the Maps API. This makes your life easy, and more importantly, will not break if that default projection ever changes.
Pass the lat/lng coordinates down to the browser and compute the distance between them (in meters) as follows:
var location1 = new google.maps.LatLng(lat1, lng1);
var location2 = new google.maps.LatLng(lat2, lng2);
var distance = google.maps.geometry.spherical.computeDistanceBetween(location1, location2);
or in Coffeescript:
location1 = new google.maps.LatLng lat1, lng1;
location2 = new google.maps.LatLng lat2, lng2;
distance = google.maps.geometry.spherical.computeDistanceBetween location1, location2;
The radius for the circle needs to be the distance between the center of the circle and CoordinateA in meters.
Once you convert to meters, the following site shows that 4288 should be the radius of the circle https://www.daftlogic.com/projects-google-maps-distance-calculator.htm?route=56.79585,8.716850000000022|56.7619,8.68360000000007
Basically, your Haversine formula isn't giving you exactly what you need yet.
I want to draw drag gable route on Google map using encoded poly line string.So that i can drag route , make changes in it and save in database. can anyone have idea regarding this?????
ex: I have following encoded polyline
var encodedPath='iqgnAa|lxMDq##]j#CrIKhBClEIrFMe#oCCKBa#VqAbAqCEWIi#MSg#[oAu#kAu#aAe#{#WcAScA]g#Mm#EaAV_ECKxBl#BL#FDKpB';
var path = google.maps.geometry.encoding.decodePath( encodedPath );
var polyline = new google.maps.Polyline({
path: path,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 2.0,
strokeWeight: 8
});
polyline.setMap( map );
I want to draw drag gable path on Google map using this encoded poly line path.
Currently i am able to draw poly line on Google map using following code but its is not drag gable
Any suggestions????
also i want draggable behavior like Google map direction service so that i can deviate the existing path and save for future use
You can make it draggable in the constructor
var polyline = new google.maps.Polyline({
path: path,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 2.0,
strokeWeight: 8,
draggable: true
});
or later as
polyline.setDraggable(true);
or
polyline.set('draggable',true);
If you use the polyline to render Google's direction services, the paths will be updated along with the polyline when you drag it. Keep in mind that after doing this you will need to persist the new polyline path to the database. This is done by adding listeners to the polyline path
google.maps.event.addListener(polyline.getPath(), 'set_at', function () {
var encodedpath=google.maps.geometry.encoding.encodePath( polyline.getPath() );
SaveMyPath(encodedpath);
});
google.maps.event.addListener(polyline.getPath(), 'insert_at', function () {
var encodedpath=google.maps.geometry.encoding.encodePath( polyline.getPath() );
SaveMyPath(encodedpath);
});
It's up to you to build the function SaveMyPath
I have following issue with drawing a polygon with google maps api. It looks like that there is to much fillColor. The center of the following polygon is not supposed to have fillColor.
Is it google maps API or is it me who has a bug?
Example: http://jsfiddle.net/zCA2u/
$(function(){
var shape;
var mapDiv = document.getElementById('map-canvas');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var coords = [
new google.maps.LatLng(31.50362, -70.0488),
new google.maps.LatLng(29.91685, -62.4023),
new google.maps.LatLng(22.91792, -56.42578),
new google.maps.LatLng(22.67484, -69.6972),
new google.maps.LatLng(27.29368, -74.8828),
new google.maps.LatLng(33.06392, -73.3007),
new google.maps.LatLng(34.23451, -66.0058),
new google.maps.LatLng(32.32427, -58.2714),
new google.maps.LatLng(26.35249, -56.4257),
new google.maps.LatLng(18.81271, -60.64453),
new google.maps.LatLng(20.13847, -69.4335)
];
shape = new google.maps.Polygon({
paths: coords,
strokeColor: '#ff0000',
strokeOpacity: 0.8,
strokeWeight: 2,
draggable: true,
fillColor: '#ff0000',
fillOpacity: 0.35
});
shape.setMap(map);
});
I have now tried the above in IE8 and it renders correct in IE8
If you want to make "holes" in polygons
they aren't supported by the drawing manager directly
you need to have separate paths (the polygon "paths" property takes an array)
the inner paths (the "holes") need to wind in the opposite direction from the inner path
simple example of a polygon with a hole (a donut)
fiddle with self intersection removed and hole
var coords = [
[ new google.maps.LatLng(27.29368, -74.8828),
new google.maps.LatLng(33.06392, -73.3007),
new google.maps.LatLng(34.23451, -66.0058),
new google.maps.LatLng(32.32427, -58.2714),
new google.maps.LatLng(26.35249, -56.4257),
new google.maps.LatLng(18.81271, -60.64453),
new google.maps.LatLng(20.13847, -69.4335)
],
[
new google.maps.LatLng(21.534847,-63.28125),
new google.maps.LatLng(30.221102,-59.677734),
new google.maps.LatLng(30.600094,-71.279297)
]
];
I am showing the tracking on map with marker points and line connecting them.
The problem is that i want to show the direction of travel on the links;
so I am not getting how to show the direction on the line between the marker points.
Is there any way to accomplish this task.
Showing the direction on the polyline can be accomplished with arrows.
There are some predefined paths that the google maps api3 provides.
See this section of the documentation -
SYMBOLS ON POLYLINE, that can be used other than an arrow.
Have a look at this fiddle that uses an arrow to indicate the direction on the polyline.
DEMO with a sigle symbol
You can also set the repeat property for the symbol so that it repeats for regular intervals.
DEMO with repeating symbols
JavaScript-
var iconsetngs = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};
var polylineoptns = {
path: markers,
strokeOpacity: 0.8,
strokeWeight: 3,
map: map,
icons: [{
icon: iconsetngs,
offset: '100%'}]
};
polyline = new google.maps.Polyline(polylineoptns);
The interesting feature of this predefined symbol(the forward arrow specially) is that the arrow points towards the exact direction of which your co-ordinates are located. So, that obviously serves the purpose of denoting the direction in a Tracking System.
UPDATE: Not sure about the point you are trying to tell in the comments. The markers can be displayed the same way. Here is the code that adds markers with a loop and also set the polyline with arrows:
DEMO WITH MARKERS AND POLYLINE
Javascript:
var polylineoptns = {
strokeOpacity: 0.8,
strokeWeight: 3,
map: map,
icons: [{
repeat: '70px', //CHANGE THIS VALUE TO CHANGE THE DISTANCE BETWEEN ARROWS
icon: iconsetngs,
offset: '100%'}]
};
polyline = new google.maps.Polyline(polylineoptns);
var z = 0;
var path = [];
path[z] = polyline.getPath();
for (var i = 0; i < markers.length; i++) //LOOP TO DISPLAY THE MARKERS
{
var pos = markers[i];
var marker = new google.maps.Marker({
position: pos,
map: map
});
path[z].push(marker.getPosition()); //PUSH THE NEWLY CREATED MARKER'S POSITION TO THE PATH ARRAY
}
I have a set of GPS tracker's data in a database. I wish to create traces on maps with different colors for different vehicles. Could any one assist me on how to create a route player on google maps or openstreet maps for static and/or dynamic maps.
For drawing the route you could use some function similar to this, you send routeVar to the function that constains the route's coordinates for the specific vehicle, you can choose the color at the Polyline var:
var route = null;
function drawRoute(mapa, routeVar, varBool){
if(!route){
var coordRoute = routeVar;
route= new google.maps.Polyline({
map: mapa,
path: coordRoute,
geodesic: true,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 3
});
}if(varBool){
route.setMap(mapa);
}else{
route.setMap(null);
}
}
I hope this helps