I am trying to find a better way to center my google map.
I've already written code to add in Markers to Outline and area squarely of which is being store in an array: Coords[i], in-which when returning to the map after save, it centers the map window based on the "first marker" lat/lng coordinates Coords[0].
I am trying to figure out a better way to center the map where there is adequate space around my outline area.
I've try doing it on Dragend, which works somewhat:
google.maps.event.addListener(this.map, 'dragend', function(mapEvent) {
var lat = mapEvent.getCenter() .lat(),
lng = mapEvent.getCenter() .lng(),
console.log(lat + " " + lng + " " + this);
});
But it keeps throwing an error saying:
"Unable to get property 'getCenter' of undefined or null reference"
Can someone tell me what I am doing wrong OR tell be a better way to achieve what I'm trying to do?
As, another option
It would be nice if possible if I can keep the first marker [0] the centering marker as it is already, But don't allow it to outline... just the markers 1 + and on .... But I don't know how to modify my code to do that.
Just looking for a solution that works.
My complete Code is here:
http://pastiebin.com/embed/593d6d809e2f0
You can use a LatLngBounds object. Loop through your Polygons if you have more than one and extend your bounds object with each path coordinates.
LatLngBounds
You can then make your map fit the bounds object so it will zoom and center accordingly by using map.fitBounds().
fitBounds
If you use multi-paths Polygon, make sure you use getPaths method instead of getPath as in the code below.
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var polygon = new google.maps.Polygon({
editable: true,
strokeOpacity: 0,
strokeWeight: 0,
fillColor: '#00FF00',
fillOpacity: .6,
paths: [
new google.maps.LatLng(39, 4),
new google.maps.LatLng(34, 24),
new google.maps.LatLng(43, 24),
new google.maps.LatLng(39, 4)],
map: map
});
// Create the bounds object
var bounds = new google.maps.LatLngBounds();
// Get paths from polygon and set event listeners for each path separately
polygon.getPath().forEach(function (path, index) {
bounds.extend(path);
});
// Fit Polygon path bounds
map.fitBounds(bounds);
}
initialize();
#map-canvas {
height: 200px;
}
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
Ok I just figured out a way!
I simply grabbed the lat/lng coordinates of the center of the polygon drawn and centered my whole map with that.
var bounds = new google.maps.LatLngBounds();
var i;
//Get Center of Saved Coordinates of the drawn polygons
for (var i = 0; i < values["coords"].length; i++) {
bounds.extend(values["coords"][i]);
}
var movemaplat = bounds.getCenter().lat();
var movemaplng= bounds.getCenter().lng();
console.log("MY MAP CENTER " + movemaplat + ", " + movemaplng);
Thanks to #Daniel Vassallo's answer here: How to get the center of a polygon in google maps v3?
I'm building an application using MEAN Stack and Google Maps Api and I'm having a little problem when it comes to draw Polygons and LineStrings.
I have a collection of geometries (Points, Polygons and LineStrings) and each time I find one of them I need to add it properly to the map.
I have no problem when it comes to render Markers but I have issues when it comes to Polygons and LineStrings.
Here's my code which contains the logic of initializing the map.
// Initializes the map
function initialize(latitude, longitude, filter) {
// If map has not been created...
if (!map) {
// Create a new map and place in the index.html page
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: new google.maps.LatLng(vm.selectedLat, vm.selectedLong)
});
}
// Loop through each location in the array and place a geometry
locations.forEach(function (n) {
if(n.type === 'LineString'){
console.log('LineString '+JSON.stringify(n.coords));
var linestring = new google.maps.Polyline({
position: n.coords,
map: map,
geodesic: true,
strokeColor: '#0404B4',
strokeOpacity: 1.0,
strokeWeight: 2
});
// For each linestring created, add a listener
google.maps.event.addListener(linestring, 'click', function () {
// When clicked, open the selected linestring's message
n.message.open(map, linestring);
});
linestring.setMap(map);
}
if(n.type === 'Polygon'){
console.log('Polygon '+JSON.stringify(n.coords));
var polygon = new google.maps.Polygon({
path: n.coords,
geodesic: true,
strokeColor: '#0404B4',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#0404B4',
fillOpacity: 0.35
});
// For each polygon created, add a listener
google.maps.event.addListener(polygon, 'click', function () {
// When clicked, open the selected polygon's message
n.message.open(map, polygon);
});
polygon.setMap(map);
}
});
};
Here are the screenshots of the two console.log() of the coordinates
As you can see from the screenshot I also get
InvalidValueError: at index 0: not a LatLng or LatLngLiteral: in property lat: not a number
I tried, unsuccessfully, to find a solution to that.
Why can't I draw these geometries? How can I solve the InvalidValueError?
Thanks in advance.
Issues:
A google.maps.Polyline doesn't have a position property, it has a path property which takes an array of google.maps.LatLngLiterals (which looks like what you are passing in to the position property).
A google.maps.Polygon has a paths property which takes an array of google.maps.LatLngLiterals, but your data is not formatted correctly (and you are using path not paths). It is an array of {lat: [46.774, -48.19], lng: [46.466, -29.119]}, neither lat nor lng are Numbers, they are arrays.
Here is the code I have so far:
function initialize() {
var mapOptions = {
center: { lat: 21.9072222, lng: -47.715},
zoom: 3
};
var map = new google.maps.Map(document.getElementById('derby-to-lima'),
mapOptions);
var line = new google.maps.Polyline({
path: [new google.maps.LatLng(53.9834124, -1.5863153), new google.maps.LatLng(-12.0553442, -77.0451853)],
strokeColor: "#008CBA",
geodesic: true,
strokeOpacity: 0.5,
strokeWeight: 5,
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
I want to draw another line on top of the existing one that stops at the point in between the two points, which can be changed by percentage. It's kind of hard to explain, but imagine the first point is the start, and the last is the end. You are given how far a runner currently is by the percentage of the way through they are. Now show how far they are (assuming they ran in a straight line).
Thanks, I've been stuck on this for a while.
As suggested by #Dr.Molle load the geometry library and use the method interpolate.
var startPoint = new google.maps.LatLng(53.9834124, -1.5863153);
var endPoint = new google.maps.LatLng(-12.0553442, -77.0451853);
var percentage = 0.5;
var middlePoint = new google.maps.geometry.spherical.interpolate(startPoint, endPoint, percentage);
FIDDLE
i am working on google map for my project. i need to draw multiple lines between two place(points). I don't know, is it possible?. please any one help me.
There is no multi line support in google maps API ... but you can do it with javascript.
A polyline example:
https://developers.google.com/maps/documentation/javascript/examples/polyline-simple
The API:
https://developers.google.com/maps/documentation/javascript/reference?hl=pt-BR#Polyline
More examples:
https://developers.google.com/maps/documentation/javascript/examples/
To draw line between two points using the following function to which I pass the map and lat and long in the first point and second point.
var mapOptions = {
zoom: zoom,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas_'+id), mapOptions);
function poliLines(map, latPointBefore, lonPointBefore, latPointAfter, lonPointAfter){
var routes = [
new google.maps.LatLng(latPointBefore, lonPointBefore)
,new google.maps.LatLng(latPointAfter, lonPointAfter)
];
var polyline = new google.maps.Polyline({
path: routes
, map: map
, strokeColor: '#ff0000'
, strokeWeight: 5
, strokeOpacity: 0.5
, clickable: false
});
}
the following code is used to draw a polyline on Google Maps using V3 API, but sometimes is draws the polyline and most of times doesn't despite there are point (as I can show the points on the map as markers) but no polyline appears
update 2 : I am using openstreetmap layer over Google maps. does that cause the problem when drawing the polyilne ?
w variable contains data as string , for example :
w= 35.1212,55.2333\n36.32366,56.3333
Real data sample for w : [this code can draw markers for the following points but can't draw a polyline ]
34.440501,31.515222
34.441933,31.514346
34.44247,31.514013
34.442603,31.51394
34.443607,31.513423
34.4445,31.512926
34.444762,31.512772
34.445186,31.512523
34.445257,31.512481
34.445311,31.512449
34.445614,31.512264
34.446244,31.511867
34.446939,31.511429
34.447351,31.511193
34.448081,31.512174
34.448241,31.512357
34.448576,31.512741
34.449147,31.513185
34.4499,31.513723
34.450894,31.514401
34.451925,31.515362
34.452905,31.516176
34.454194,31.517266
34.455337,31.518236
34.456215,31.51898
34.456987,31.519646
34.457583,31.520166
34.458298,31.520772
34.458989,31.52139
34.459659,31.521959
34.460476,31.522653
34.461192,31.523228
34.461869,31.523788
34.46256,31.524376
34.463302,31.525015
34.464062,31.525668
34.464433,31.525986
34.464737,31.526246
34.465247,31.526683
34.465498,31.526907
34.466666,31.52792
34.46722,31.528404
34.467327,31.528495
34.468014,31.529081
34.468379,31.52939
34.469296,31.530177
34.469771,31.530583
34.470152,31.53091
34.470951,31.531597
34.471617,31.532172
34.472388,31.532838
34.472664,31.533076
34.47295,31.533397
34.473422,31.533653
34.474028,31.534065
34.474844,31.534629
34.475725,31.535253
34.476083,31.535517
34.476697,31.535947
34.477105,31.536209
34.477627,31.536477
34.478,31.536742
34.478398,31.536989
34.478935,31.537325
34.480044,31.537975
34.480985,31.538529
34.481362,31.53878
34.481416,31.538819
34.482407,31.539419
34.482682,31.539109
34.483132,31.538603
34.483341,31.538368
34.483917,31.537753
34.484202,31.537449
34.484288,31.537357
34.484944,31.536587
34.485118,31.536383
34.485205,31.536304
34.485648,31.535903
34.485984,31.535598
34.486246,31.535381
34.486445,31.535291
34.486533,31.535254
34.486607,31.535282
34.486706,31.535354
34.486869,31.535526
34.487012,31.535692
34.487212,31.535923
34.487273,31.536006
34.487767,31.53571
34.488336,31.535395
34.48883,31.535148
34.489078,31.535032
34.489354,31.534901
34.48955,31.534788
34.489756,31.535011
34.489831,31.535097
34.490268,31.534748
34.49065,31.534473
34.490857,31.53436
34.491044,31.534319
34.491352,31.534248
34.491458,31.534237
34.491548,31.534304
34.491879,31.534209
34.492227,31.534203
34.492457,31.534214
34.492042,31.533636
34.492162,31.533542
note : I have reversed lng and lat when creating a point for some purpose
where a is array that has the points to represent as a polyine
code
var mypolyline = new google.maps.Polyline({
strokeColor: "#FF0000",
strokeOpacity: .6,
strokeWeight: 3,
clickable: true
});
// var bounds2 = new google.maps.LatLngBounds();
var a=w.split("\n");
for(var i=0;i<a.length;i++)
{
var zz=a[i].split(",");
var lat=zz[0];
var lng=zz[1];
var path = [];
var path = mypolyline.getPath();
var point = new google.maps.LatLng(parseFloat(lng),parseFloat(lat));
createMarker(i,name,point,icon[1],2);
// alert(path.length);
path.push(point);
mypolyline.setPath(path);
mypolyline.setMap(map);
}
CreateMarker() function
function createMarker(id,name,point,icon,type) {
// var marker = new google.maps.Marker(point, customIcons[type]);
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon
});
markersArray.push(marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow = new google.maps.InfoWindow({ content: name });
infowindow.open(map, marker);
map.panTo(point);
});
return marker;
}
So you create an array, then you ignore that and recreate it as an MVCArray using the getPath() function. Get rid of the first line (this isn't the cause of the problems though).
var path = [];
var path = mypolyline.getPath();
Just a thought - is the path a required attribute when you first create the polyline?
It seems to me that you initially create the mypolyline without any path. So when you then do this on the first iteration, it's not going to work, because all you're passing to .setPath() is one point, but I assume a path can only work when there's at least 2 points.
path.push(point);
mypolyline.setPath(path);
Update: I think the thing to do would be to just start out with an empty array, loop over your coordinates adding them into the array. Then after the loop, create the polyline, rather than trying to update it each time you iterate over the loop. For instance:
var a=w.split("\n");
var path = [];
for(var i=0;i<a.length;i++)
{
var zz=a[i].split(",");
var lat=zz[0];
var lng=zz[1];
var point = new google.maps.LatLng(parseFloat(lng),parseFloat(lat));
createMarker(i,name,point,icon[1],2);
path.push(point);
}
var mypolyline = new google.maps.Polyline({
path: path,
map: map,
strokeColor: "#FF0000",
strokeOpacity: .6,
strokeWeight: 3,
clickable: true
});