I'm trying to create polygon markers on a Google map by converting a string containing lat/lng positions into an array. I'm running into the following error:
mc {message: "at index 0: not a LatLng or LatLngLiteral: in property lat: not a number", name: "InvalidValueError"
When i inspect the array in the browser console it looks fine (index[0]):
lat:"12.3394541791301"
lng:"55.59020913559151"
The string has the following structure:
'12.3394541791301,55.59020913559151, 12.3444451791347,55.5930451355941, 12.3808361791686,55.6099911356099,
So first i replace every second comma with ;
When i use split(";") to create my array, which i when loop and push into a new array with the right keys:
s = s.replace(/([^,]+,[^,]+),/g,'$1;');
s = s.split(";");
for (var i = 0; i < s.length; i++) {
var lat = s[i].split(',')[0];
var lng = s[i].split(',')[1];
// Push to array which is used by Google Maps
denmarkLatLong.push({lat: lat, lng: lng})
}
Any suggestions to what could cause the problem?
Try to do this way:
These pluses will convert your string values of lat, lng to numeric. Or try parseFloat()
denmarkLatLong.push({lat: +lat, lng: +lng})
OR
denmarkLatLong.push({lat: parseFloat(lat), lng: parseFloat(lng)})
Problem that you have strings instead of numbers. Just convert, say if it helped.
lat:"12.3394541791301" // strings, convert to numbers
lng:"55.59020913559151"
I'm not sure what a polygon marker is but I suspect you meant marker.
If you look at the latlng documentation the value for key lat and lng are supposed to be Number not String. So to fix your problem you can use the api Number(...) to cast the string coordinates into numbers.
Example:
s = s.replace(/([^,]+,[^,]+),/g,'$1;');
s = s.split(";");
for (var i = 0; i < s.length; i++) {
var lat = s[i].split(',')[0];
var lng = s[i].split(',')[1];
// Push to array which is used by Google Maps
denmarkLatLong.push({lat: Number(lat), lng: Number(lng) })
}
References:
LatLng: https://developers.google.com/maps/documentation/javascript/examples/map-latlng-literal
Related
I'm having trouble creating a new circle on a Leaflet map with a variable as the latlng.
I have a form that contains and input for radius and a select box that contains a few locations with options looking like this:
<option value="52.10953576, -0.498735399999987">Place Name</option>
When the save button is clicked the following code is run:
$('#drawcircle').click(function() {
var radius = document.getElementById("circleRadius").value;
var e = document.getElementById("locationcoord");
var latlng = e.options[e.selectedIndex].value;
var radiusinmeters = cr * 1609.344;
var circle = L.circle([latlng], radiusnmeters).addTo(map);
drawnItems.addLayer(circle);
});
I have done some debugging with console.log and can see that the latlng variable does contain the correct information from the select box.
However, I get
Uncaught TypeError: Cannot read property 'lng' of null
The value you get from var latlng = e.options[e.selectedIndex].value; is a string, not a pair of coordinates.
Split this string to get your coordinates in an array, cast the values to numbers, and feed that to L.circle. For example,
var radiusinmeters = cr * 1609.344;
var latlng_string = e.options[e.selectedIndex].value;
var latlng_array = latlng_string
.split(/,\s*/) // split the value
.map(function(v) { return +v; }); // cast to numbers
var circle = L.circle(latlng_array, radiusnmeters).addTo(map);
In your code, the variable latlng is a string, and L.circle accepts a LatLng Object, i.e. one of these:
L.latLng(<Number> latitude, <Number> longitude)
L.latLng(<Array> coords) // [Number, Number]
L.latLng(<Object> coords) // {lat: Number, lng: Number}
Your latlng variable is ["52.10953576, -0.498735399999987"]
You have to parse your string to get the correct values
more info in the Circle Documentation
google.maps.event.addListener(map, 'idle', function (event)
{
var ne = map.getBounds().getNorthEast();
//northeast lat and long
var sw = map.getBounds().getSouthWest();
//southwest lat and long
var x = document.getElementById('hdnControl').value;
// x contains all the markers retrived from database
// code part to filter markers withing bounds
}
var x contains all the markers and I want to place markers that are within bounds.how can i filter the markers which are within bounds?
any help will be appreciated
x contains value as
[
{"Latitude":19.2094000000,"Longitude":73.0939000000},
{"Latitude":19.2244070000,"Longitude":73.1545760000},
{"Latitude":19.1659242536,"Longitude":82.2436523438},
{"Latitude":18.3336694458,"Longitude":80.4309082031}
]
//as it has been serialized with
//dt is datatable retrived from database
JavaScriptSerializer oSerializer = new JavaScriptSerializer();
var Result = (from c in dt.AsEnumerable()
select new
{
Latitude = c.Field<Decimal>("Latitude"),
Longitude = c.Field<Decimal>("Longitude")
}).ToList();
hdnControl.Value = oSerializer.Serialize(Result);
The LatLngBounds object comes with a contains() method which takes a LatLng point and returns true if the point happens to be within the bounds, or false if outside.
Here's a sample code to point if the marker is within the bound:
function check_is_in_or_out(marker){
return map.getBounds().contains(marker.getPosition());
}
Here's a related SO ticket which discuss how to use bounds.contains(): check if map markers are within selected bounds
I have a set of lat long points which i receive from the database for a specific event. I receive the co-ordinates in the below form:
18.9362430987942 72.8269794968548
19.0200931221883 72.8436302614116
19.0547926 72.8406549
I need to store this co-ordinates in the array and later push this array in waypoints to draw the route. But when i try to put the values in
var geoLatLong=new google.maps.LatLng(linkData);
After putting an alert for geoLatLong....I get (Nan,NaN)..Please Help.
Please find the code that i have tried for the co-ordinates i receieve from the database.
load : function(response)
{
for(var i=0;i<response.length;i++)
{
if(response[i].linkData!='undefined')
{
link=response[i].linkData;
alert(link);
var linkValue=link.split(" ");
var linkData=linkValue[0]+","+linkValue[1];
alert("linkdata"+linkData);
var geoLatLong=new google.maps.LatLng(linkData);
alert(geoLatLong);
geoLatLongArray.push(geoLatLong);
alert(geoLatLongArray);
}
}
}
You can't pass the lat/lon as string dataType to google.maps.LatLng. So you need to convert the dataType to float using parseFloat().
So change the code like
var lat = parseFloat(linkValue[0]); //convert string to float
var lon = parseFloat(linkValue[1]); //convert string to float
var geoLatLong=new google.maps.LatLng(lat, lon);
Now push it to the geoLatLongArray.
I have an array where my all polylines are stored.
var polyArrayCollection = [polyline1, polyline2, polyline3]
Now when I click on map I get LatLng values of that point.
Now I want to compare that point LatLng value with points which are in each polyline.
How can I do ?
You can get the points in a polyline using getLatLngs method of the polyline. Next, you can loop the resulting array and compare it elements with your LatLng. Something like this :
for (var pl in polyArrayCollection){
var pts = polyArrayCollection[pl].getLatLngs();
for (var pt in pts){
//compare it with your LatLng, assuming it is stored in myPt variable
if (pts[pt].equals(myPt)){
//do something if the points are equal
}
}
}
I was trying to follow this example http://code.google.com/p/gmaps-samples/source/browse/trunk/fusiontables/custom_markers.html?spec=svn2515&r=2515, to create custom markers.
I tried to change the example to use my data. The difference is that my data is already geocoded. I had trouble trying to figure why it didnt work when I changed the table id and the columns on the code.
So i printed the 'Address' on the original code and the one with my data.
The original code with the sample fusion-table, outputs the location like this
(37.4471132, -122.1602044)
Because my table is already geocoded I took away most of the function
function codeAddress(row) {
alert(row[1]);
var marker = new google.maps.Marker(
{
map : map,
position : row[1],
//this is where the magic happens!
icon : new google.maps.MarkerImage(icon: new google.maps.MarkerImage("http://www.google.com/images/icons/product/fusion_tables-32.png")
});
}
But the alert only diplays the coordinate a little bit different
<Point><coordinates>-78.423652,-0.203057,0.0</coordinates></Point>
So yeah, that is what I think it is not working
My opinion is that position : has to be followed by a google.maps.LatLng.
It looks like the row data is from KML, you need to extract the first two numbers to create the LatLng.
Mia DiLorenzo is right, the MarkerOption position expects a LatLng object.
Look at this example, which is very similar to yours, but it uses the Coordinates field to create the marker.
The example assumes, that the data in the Coordinates field is comma-separated "lat,lng"
e.g. 47.7672,-3.2022
But if your data happens to be in KML format then you can just extract the lat/lng values. The values are in order: longitude, latitude, and altitude (see the KML reference for details about KML coordinates):
function createLatLngObject(kmlString) {
//remove XML tags from input
var xmlRegEx = /<\/?\w+>/;
var kmlValue = kmlString.replace(xmlRegEx,'');
// now kmlValue contains e.g. -78.423652,-0.203057,0.0
//extract latitude and longitude
var coordinates = kmlValue.split(",");
var lat = coordinates[1];
var lng = coordinates[0];
return new google.maps.LatLng(lat, lng);
}
function createMarker(row) {
var latlng = createLatLngObject(row[1]);
var marker = new google.maps.Marker({
map: map,
position: latlng,
icon: new google.maps.MarkerImage("http://www.google.com/images/icons/product/fusion_tables-32.png")
});
}