I cant find any useful answer for my questions. I exported points from kml. now i must connect this point with line on google maps api v3. how can i do it?
Like this (gLine is a global var, gTheMap is the Google map object);
// draw a line connecting the points
var Endpoints = [marker1.position, marker2.position];
if (gLine == null)
{
gLine = new google.maps.Polyline(
{ path: Endpoints,
strokeColor: "#FFFF00",
strokeOpacity: 1.0,
strokeWeight: 2,
map: gTheMap
});
}
else
gLine.setPath(Endpoints);
I blogged about this here.
Related
I want to create boundaries of a zipcode using google map places api but unable to find the boundary coordinates.
I noticed when I search a zipcode on maps.google.com it shows a dotted boundary of that particular zipcode. How can I achieve this using google services?
You can do it with DDS (Data-driven styling) if zipcode is available in the country/countries you are after (check coverage).
Note this feature is still in Preview (Pre-GA) at this time.
Below is an example drawing the boundaries of a random postal code in Italy (10123 Torino, Italy).
To reproduce, you need to create a new map ID and map style in your Google Maps Platform console and select the appropriate feature layer(s). All information is here.
let map;
let featureLayer;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 45.064335, lng: 7.688176 },
zoom: 13,
mapId: "8ec1ff859561face", // You need to create your own map ID
});
featureLayer = map.getFeatureLayer("POSTAL_CODE");
// Define the styling options
const featureStyleOptions = {
strokeColor: "#00FF00",
strokeOpacity: 1,
strokeWeight: 1,
fillColor: '#519400',
fillOpacity: 1,
};
// Apply the style to a single boundary.
featureLayer.style = (options) => {
if (options.feature.placeId == "ChIJ_7qz12VtiEcRcKS3k4DmBRw") {
// Above Place ID is zipcode 10123 Torino, Italy
return featureStyleOptions;
}
};
}
#map {
height: 180px;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=beta" defer></script>
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'm trying to display a tractor's route in google maps and having the following problem (I like to call it "The Guinea Problem":
http://i901.photobucket.com/albums/ac215/MigerusanTTE/coordserrorfinal.jpg
In the pic you can see that the starting point of my polyline starts from lat 0, long 0. I dont know why this is happening because on my while loop I put an alert when it starts and the latlng values are correct when it begins...
Here you have a portion of the code for markers and polylines:
//If i==0 (my FOR variable for looping), coords_prev=coords.
//alert(coords); //alert I put to see what was happening D:
var marker = new google.maps.Marker(
{
position: coords,
map: map,
icon:direccion_ico
});
}
//contructing the line
var line = [coords_prev, coords];
var polyline = new google.maps.Polyline({
path: line,
strokeColor: color,
strokeOpacity: 0.6,
strokeWeight: 3
});
linesArray.push(polyline);
polyline.setMap(map);
coords_prev = coords; //I equal these for the next loop
Tell me what you think...and If I forgot to mention something important too.
On the line
var line = [coords_prev, coords];
This is fine for the second point, but for the very first point, you won't have anything in coords_prev. Thus, for the very first segment, it will start at 0,0 and go to coords.
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
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);