I have some MultiPolygon data (the USA state of California) which I'm trying to display on a Google Map (v3 JavaScript API).
So I've tried to make it into some JSON data, and then display that MultiPolygon on a Google Map. It hangs and doesn't work.
Here's the jQuery I've used:
function getTestData() {
// Grab the California state data.
var request = $.getJSON("/Foo/Bar?format=json", function (results) {
// map it.
var polygon = createGeoJsonPolygon(results, "#FF7800", "#46461F");
polygon.setMap(map);
});
}
function createGeoJsonPolygon(geojson, strokeColour, fillColour) {
var coords = geojson.coordinates; // Array of polygons.
var paths = [];
$.each(coords, function (i, n) {
$.each(n, function (j, o) {
var path = [];
$.each(o, function (k, p) {
var ll = new google.maps.LatLng(p[1], p[0]);
path.push(ll);
});
paths.push(path);
});
});
return new google.maps.Polygon({
paths: paths,
strokeColor: strokeColour,
strokeOpacity: 1,
strokeWeight: 2,
fillColor: fillColour,
fillOpacity: 0.25
});
}
How can I draw my sample data on a Google Map? I'm not sure if my code is wrong or the data has been extracted incorrectly.
My post on Google Groups came to help save the day.
This is what was suggested :
function createGeoJsonPolygon(geojson, strokeColour, fillColour) {
var coords = geojson.coordinates; // Array of polygons.
var paths = [];
$.each(coords, function (i, n) {
var path = [];
$.each(n, function (j, p) {
var ll = new google.maps.LatLng(p[1], p[0]);
path.push(ll);
});
paths.push(path);
});
return new google.maps.Polygon({
paths: paths,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: "#FF0000",
fillOpacity: 0.35,
map: map
});
}
You made the polygon; you didn't add it to any map.
Assuming map is a variable of type google.maps.Map, do this:
var poly = createGeoJsonPolygon( arg1, arg2, arg3 );
poly.setMap( map );
Also, note that your data (which you link to) is not (as you state) an array of points; it's an array of arrays of arrays of points.
Without encoding polygon contours, you can use only one contour per polygon, see docs: http://code.google.com/intl/ru/apis/maps/documentation/javascript/v2/reference.html#GPolygon.
It accepts only an array of points, not contours.
Read about polygon encoding for google maps, there is a readymade js for that.
edit:
docs for v3:
http://code.google.com/intl/ru/apis/maps/documentation/javascript/reference.html#PolygonOptions
Related
I'm using google maps api v3 for my project and i'm using a set of polygon coordinates to highlight a region. But i'm highlighting 15 regions and each regions have more than 100 polygon coordinates. Is there any way i can create another file where i can put all the coordinates with their corresponding region's name and i can use those regions name in my html page.
Here is my code
var kerala = new google.maps.Polygon({
map: map,
paths: [
new google.maps.LatLng(12.758232,74.86084),
new google.maps.LatLng(12.736801,75.014648),
new google.maps.LatLng(12.329269,75.432129),
new google.maps.LatLng(12.093039,75.794678),
new google.maps.LatLng(11.942601,75.959473),
/* n number of coordinates */
],
strokeColor: '#873600',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#873600',
fillOpacity: 0.5
});
But i want something like this
var kerala = new google.maps.Polygon({
map: map,
paths: /* here i should give the name of a region, which will be defined with coordinates in another file */
});
Some one please help me with this , i don't even know how to define that polygon coordinate file, and which extension should that file be defined with.
make array of state name with latlng object and use as a path
example:
var maharashtraArray = [];
maharashtraArray.push(new google.maps.LatLng("latitude","longitude"))
then use this array as polygon path
var kerala = new google.maps.Polygon({
map: map,
paths: maharashtraArray
});
I'm using the Google Maps API to create some zones on a map. I stored the geodata in a database and I get it through Ajax.
Problem is that API wants the data as an object like :
var myHome = { "lat" : "44.767778" , "long" : "-93.2775" };
So I need to put in the array the {"lat" : and "long : ... };
How could I do that ?
Here is what I did with your help. I've got no error but nothing appears on the map. I used the example with BermudaTriangle from the API like a model : https://developers.google.com/maps/documentation/javascript/examples/polygon-autoclose
$.get(
"getZones.php", //Get geodata from database
function(data) {
locZone = data;
var reg=new RegExp("[/]+", "g"); //Separate points of the zone
var tableau=locZone.split(reg);
for (var i=0; i<tableau.length; i++) {
points = new google.maps.LatLng(tableau[i]);
coords.push(points);//Put the coordinates in a tab
}
var zone = new google.maps.Polygon({
paths: coords, //Use the tab like in the example from API
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35
});
zone.setMap(map);
}
);
That's okay I just rewrote the loop :
for (var i=0; i<tableau.length; i++) {
var b=tableau[i].split(","); //Separate lat & lng
points=new google.maps.LatLng(parseFloat(b[0]), parseFloat(b[1])); //Convert data into float type
coords.push(points);
}
Probably the easiest way (without seeing any example code of you) is by putting the values you get via ajax in a new variable. Let's say the object you get is called geoData. geoData should have the 2 values lat and long or however you called them.
Simpliest way would be:
var myHome = {
"lat": geoData.lat,
"long": geoData.long
}
That's it, hope this helps.
You can also create a LatLng object directly through google maps api:
var latlng = new google.maps.LatLng(44.767778, -93.2775);
That returns the object what you need to work with the maps.
In my cluster Table have cluster coordinates column name description,
i am directly storing coordinates in Json format like below is my cluster table ,using these coordinates i want to draw multiple cluster(polygons)
in google map,
id | description
----+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1 | {"points":[{"lat":14.232437996569354,"lng":76.409912109375},{"lat":13.336175186494927,"lng":77.1185302734375},{"lat":12.961735843534294,"lng":77.596435546875},{"lat":12.511665400971031,"lng":76.904296875}]}
2 | {"points":[{"lat":14.232437996569354,"lng":76.409912109375}, {"lat":13.336175186494927,"lng":77.1185302734375},{"lat":12.961735843534294,"lng":77.596435546875},{"lat":12.511665400971031,"lng":76.904296875}]}
I need to draw multiple polygon
but i am trying get this json into rails controller using
controller code
query="select id,description from clusters;
#result=ActiveRecord::Base.connection.execute(query);
The problem i am facing here how to pass this #result to javascript
to draw multiple polygon in google map.
if copy this json into one varible in js i able to draw cluster but problem i am facing how pass this json data from database reading in controller to javascript in rails
my google map code in javascript if hard code json into one varible it is working but i need take this json from database how to pass json with id from controller to javascript
var obj=i need json to store here //this how to fetch json from controller to js
polygons = [];
for(var i = 0; i < obj.length; ++i){
//do something with obj[i]
for(var ind in obj[i]) {
console.log(ind);
var arr = new google.maps.MVCArray();
for(var vals in obj[i][ind]){
console.log(vals, obj[i][ind][vals].lat );
arr.push( new google.maps.LatLng( obj[i][ind][vals].lat, obj[i][ind][vals].lng ) );
}
}
polygons.push(arr);
}
polygons.forEach( function(polyPath) {
var polygon = new google.maps.Polygon({
paths: polyPath,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
I would suggest an ajax-load for points. Then you can use the JSON-Output for rendering the action. It could be:
render json: #result
Other solution: When you have the googlemaps code in your view you could assign a json-string from the db to a javascript-variable:
var json_string = '<%= #results.raw %>';
I'm working with the Google Maps v3 API, placing some polygons on the map. I create a 'polyOptions' object which is used when creating the polygon.
This only works once. For all other polygons, I have to create another identical 'polyOptions' object. Which is fine, but a bit repetitive, and this webpage is big enough already without repeating myself.
Have I misunderstood the nature of this JS object?
//Create array for polygons
var polygons = [];
//first polygon
var myCoordinates = [new google.maps.LatLng(55.81362907119961, -2.054443359375) //long list of coordinates
var polyOptions = {
path: myCoordinates,
strokeWeight: 1,
fillColor: "white",
fillOpacity: 0.6
}
var poly1= new google.maps.Polygon(polyOptions);
poly1.setMap(map);
polygons.push(poly1);
//second polygon
var myCoordinates = [new google.maps.LatLng(54.94607621987403, -3.16131591796875) // long list of coordinates
var poly2 = new google.maps.Polygon(polyOptions); // doesn't work
poly2.setMap(map);
polygons.push(poly2);
You must update the path property of your polyOptions at every step. At the moment your second polygon is drawn on the first with same coordinates.
// second polygon
// your var myCoordinates is already defined above, now use it by its name
myCoordinates = [new google.maps.LatLng(54.94607621987403, -3.16131591796875) // long list of coordinates
polyOptions.path = myCoordinates; // here you set path to the new value
var poly2 = new google.maps.Polygon(polyOptions); // should work
poly2.setMap(map);
polygons.push(poly2);
Here is my code:
$.each(data, function (i, val) {
salesmanTrackPoints[val.id] = new Array();
var coords = new nokia.maps.geo.Coordinate(parseFloat(val.latitude), parseFloat(val.longitude));
salesmanTrackPoints[val.id] = new nokia.maps.map.Polyline(coords, {
polyline: {
pen: {
strokeColor: "#00F8",
lineWidth: 5
}
},
arrows: true
});
map.objects.add(salesmanTrackPoints[val.id]);
});
Above code is not working. Please help me if what is wrong.
To create the Polyline, you need to add the array of coordinates inside the loop, and then outside of the loop you can add a single mapobject to the Display e.g.:
var coords = [],
salesmanTrackPoints;
// Loop to add all the coordinates to an array
$.each(data, function (i, val) {
coords.push(parseFloat(val.latitude));
coords.push(parseFloat(val.longitude));
});
// Now create the Polyline
salesmanTrackPoints = new nokia.maps.map.Polyline(coords, {
pen: {
strokeColor: "#22CA",
lineWidth: 5
},
arrows: true
});
map.objects.add(salesmanTrackPoints);
Of course this may need to be altered depending upon the structure of your data. It is important to note that Polyline can take an Array of Coordinates or an Array of Numbers (as individual lat, longs) as you can see from the API Documentation.