google maps insertAt - javascript

In V3 of the javascript api for the polygon array there is a function insertAt(), does anyone have an example of how this is used?

You need to create your MVCArray object:
pathCoords = new google.maps.MVCArray();
Then set up your map:
myPoly = new google.maps.Polyline({
path: pathCoords,
strokeColor: '#000000',
strokeOpacity: 1,
strokeWeight: 2
});
myPoly.setMap(map);
You can then insert latLng objects:
myPoly.getPath().insertAt(pathCoordinates.length, latLng);

http://code.google.com/apis/maps/documentation/javascript/maptypes.html#MapTypeInterface
http://code.google.com/apis/maps/documentation/javascript/examples/maptype-overlay.html

Related

How to declare an object and assign its properties later

I have the example below that creates a google maps Rectangle Object. I want to only declare the Object, something like 'rectangle = new google.maps.Rectangle()' and then access its properties like 'rectangle.bounds' but seem that this doesn't work
rectangle = new google.maps.Rectangle({
bounds: bounds,
editable: true,
draggable: true
});
bounds is not a property, but a parameter of constructor. CMIIW.
According to the documentation, you can get the bounds property with method getBounds()
This should work. I haven't tried.
var bounds = rectangle.getBounds()
According to the docs the Rectangle class accepts an optional parameter of type google.maps.RectangleOptions This is the object which actually holds the properties like bounds, editable, and so on.
If you instantiate a new instance of Rectangle like
rectangle = new google.maps.Rectangle({
bounds: bounds,
editable: true,
draggable: true
});
only the three properties you defined actually exist. Furthermore the bounds property will be undefined since it's assigned a bounds variable which does not exist.
Unfortunately Google doesn't offer a direct way to create such a RectangleOptions object.
So the proper way would be to create a new general object with all those properties available for a RectangleOptions object and feed those to the constructor of Rectangle.
var options = {
bounds: new google.maps.LatLngBounds(),
clickable: true,
draggable: false,
editable: false,
fillColor: '#FF0000',
fillOpacity: 1,
map: new google.maps.Map(""),
strokeColor: '#FF0000',
strokeOpacity: 1,
strokePosition: google.maps.StrokePosition.CENTER,
strokeWeight: 1,
visible: true,
zIndex: 1
}
var rectangle = new google.maps.Rectangle(options);
console.log(rectangle.bounds);
var rectangle = {}
rectangle = new google.maps.Rectangle({
bounds: bounds,
editable: true,
draggable: true
});
try like above, pls

Google Maps Set LatLng Bounds with more than 2 inputs (not se,nw)

I'm trying to create boundaries for an LA map (let's call it 'losAngelesBoundaries') and I'd like to add more than 2 LatLng coordinates, since the map will NOT be a perfect square. Thus, using simply (sw,ne) coordinates will not work.
I know Google maps (for JS) wants me to do something like this:
var losAngelesBoundaries = new google.maps.LatLngBounds(
new google.maps.LatLng(swLat,swLng),
new google.maps.LatLng(neLat,neLng)
);
But I'd like to create a custom map with several spots, like so:
var losAngelesBoundaries = new google.maps.LatLngBounds(
new google.maps.LatLng(lat[0],lng[0]),
new google.maps.LatLng(lat[1],lng[1]),
new google.maps.LatLng(lat[2],lng[2]),
new google.maps.LatLng(lat[3],lng[3]),
.........
new google.maps.LatLng(lat[0],lng[0]),
);
Is there a 'polygon' function or something I can use to create Bounds to create a boundary with more than just 2 sets of coordinates?
Note - Needs to be for web/javascript. I see there's a way to do it on Android.
You can create a shape/polygon on your map with more than 2 boundaries using javascript. Look at the API guide.
To work on your example:
Instead of calling
var losAngelesBoundaries = new google.maps.LatLngBounds();
you can call
var triangleCoords = [
{lat: 25.774, lng: -80.190},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757},
{lat: 25.774, lng: -80.190}
];
var losAngelesPolygon= new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});

How to link polygons from different file to google maps api v3

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
});

how to convert a string to a polyline path in google map javascript

i have a String variable:
var street= "33.87928761152994,35.486247539520264,33.86875861815386, 35.486247539520264,33.86008146647083, 35.48592567443848";
i want it to be converted to a polyline path:
road = new google.maps.Polyline({
path: convertedStreet,
geodesic: true,
strokeColor:color,
strokeOpacity: 1.3,
strokeWeight:HW
});
road.setMap(map);
You need to prepare path as below.
convertedStreet.push(new google.maps.LatLng(lat, lng));
Loop through your values and push it in convertedStreet variable.
You can split your string and use it in above example:
var arr=street.split(',');
In your Question i am considering after split by , odd number is lat and even number value is lng.
for(var i=0;i<arr.length;i+=2)
{
convertedStreet.push(new google.maps.LatLng(parseFloat(arr[i]),parseFloat(arr[i+1] ));
}
road = new google.maps.Polyline({
path: convertedStreet,
geodesic: true,
strokeColor:color,
strokeOpacity: 1.3,
strokeWeight:HW
});
road.setMap(map);
working fiddle

How can I display this polygon on a Google Map?

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

Categories

Resources