I have copied this code from the official example… I just replaced the api key, and the coordinates.
What am I doing wrong?
The map displays OK,,, but the polygon does not…
Any help will be apreciated …
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Polygon Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=AIzaSyAdL-4IAZxpfEjgVUHOTOHnPMAeD8KECNI&sensor=true"></script>
<script type="text/javascript">
function initialize() {
var myLatLng = new google.maps.LatLng(-34.921127, -57.952709);
var myOptions = {
zoom: 13,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var bermudaTriangle;
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var triangleCoords = [
new google.maps.LatLng(-57.980518,-34.922787),
new google.maps.LatLng(-57.953396,-34.942068),
new google.maps.LatLng(-57.953224,-34.942771),
new google.maps.LatLng(-57.928677,-34.920395),
new google.maps.LatLng(-57.955799,-34.900124)
];
// Construct the polygon
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: "#dddddd",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#dddddd",
fillOpacity: 0.50
});
bermudaTriangle.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
Your code works fine, but you have your latitudes and longitudes mixed up. When setting your viewport, you have what I presume to be the correct order (centered over La Plata, Argentina), but when defining your paths you have the order switched. So the polygon is being drawn deep in the South Atlantic Ocean.