Develop Reference

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

Unable to reuse polyOptions for new polygon

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

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

OpenLayers circle always appears at origin

So I have managed to create a circle in OpenLayers on click. However, the circle always appears at the origin of the map, I want it to appear wherever I click. This is my code -
circleStyle = {
strokeColor: "#FF0000",
strokeOpacity: 1,
strokeWidth: 3,
fillOpacity: 0.8
}
lon = mapApp.get("mapModel").get("mouse").get("longitude")
lat = mapApp.get("mapModel").get("mouse").get("latitude")
circleLayer = new OpenLayers.Layer.Vector "Alpr GeoSearch"
circle = new OpenLayers.Geometry.Polygon.createRegularPolygon(
new OpenLayers.Geometry.Point(100,100),
10000,
60
)
feature = new OpenLayers.Feature.Vector(circle,testPoint,circleStyle)
circleLayer.addFeatures(feature)
console.log(circleLayer)
mapApp.map.openLayersMap.addLayer circleLayer

Am I missing something here, this line...
new OpenLayers.Geometry.Point(100,100),
Should surely be
new OpenLayers.Geometry.Point(lon,lat)
Or the other way round (lat,lon), I can never remember. As far as I can see the code you are using is creating at point at coordinates '100,100', and you are never using your lon and lat variables you have grabbed.

google maps insertAt

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