I am working on a project in which I want to make a circle around the location of an item on a google map. In my below code if I click show tab then it should show circle around item's location on a google map:
<div class="tab-pane" id="show">
<p>
<span class="heading_size">show:</span>
</p>
<p class="text-justify mb-0 pb-5">
<!-- <? php echo strtolower($data['item']->item_address); ?> -->
<div id="map" style="width:100%;height:500px"></div>
<script>
function myMap() {
var amsterdam = new google.maps.LatLng(52.395715,4.888916);
var mapCanvas = document.getElementById("map");
var mapOptions = {center: amsterdam, zoom: 7};
var map = new google.maps.Map(mapCanvas,mapOptions);
var myCity = new google.maps.Circle({
center: amsterdam,
radius: 50000,
strokeColor: "#0000FF",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#0000FF",
fillOpacity: 0.4
});
myCity.setMap(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
</p>
</div>
Problem Statement:
Below is the item details that gets printed out when I print item_address as shown in the above code (commented at this moment) using echo. So I need to use below data to make a circle around city field in the below json. For example: in the below json - city field is ottawa so it should make circle around ottawa city. As of now I can make circle around a particular lat/long but instead if I have a city name, then how can I make a circle around that city? Is this possible to do?
{
"address_id": 115,
"country": "canada",
"state": "ontario",
"city": "ottawa",
"street": "riverside drive",
"number": "1750",
"postal": "k1g 3t6"
}
You need to use Gecoding to find out position of city on the map. You can take a look at working example below.
I have created following function which allows you to draw circle around any city that you pass to the function:
google.maps.event.addDomListener(window, "load", function() {
myMap();
});
function myMap() {
//add global geocoder
window.geocoder = new google.maps.Geocoder();
var mapCanvas = document.getElementById("map_div");
var mapOptions = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(33.808678, -117.918921)
};
window.map = new google.maps.Map(mapCanvas, mapOptions);
drawCircleAroundCity('ottawa');
}
function drawCircleAroundCity(cityName) {
if (!cityName) return;
if (!window.geocoder) throw "Geocoder is not loaded";
window.geocoder.geocode({
'address': cityName
}, function(results, status) {
if (status == 'OK') {
addCircle(results[0].geometry.location, true);
} else {
throw 'Unable to find address: ' + address;
}
});
}
function addCircle(position, recenter) {
if (typeof(position) != 'object') return;
if (!window.map) throw "Map is not loaded";
var myCity = new google.maps.Circle({
center: position,
radius: 50000,
strokeColor: "#0000FF",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#0000FF",
fillOpacity: 0.4
});
myCity.setMap(window.map);
if (recenter)
window.map.setCenter(position);
}
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<div id="map_div" style="height: 400px;"></div>
Use the Google Maps Geocoding API and construct the appropriate request from your JSON fields. The API will return a JSON object containing the the latitude and longitude values.
Your API request will be in the form of:
https://maps.googleapis.com/maps/api/geocode/json?address=1750+riverside+drive,ottawa,ontario,canada&key=YOUR_API_KEY
Translating a city to LatLon can't be too hard but here's some code I could copy blindly without thinking too much. HTH.
var circleOptions = {
clickable: true,
draggable: true,
editable: true,
visible: false,
strokeColor: 'gray',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: 'gray',
fillOpacity: 0.35,
center: marker.getPosition()
};
radarCircle = new radarView(new google.maps.Circle(circleOptions));
google.maps.event.addDomListener(radarCircle, 'center_changed', reScope);
google.maps.event.addDomListener(radarCircle, 'radius_changed', reScope);
function radarView(superBase)
{
this.__proto__ = superBase;
if (this instanceof google.maps.Circle) {
augmentCircle.apply(this);
} else if (this instanceof google.maps.Rectangle) {
augmentRectangle.apply(this);
} else {
Tier3Toolbox.reportError({header:"Internal error",
message:"Inheriting from unknown object"});
}
this.doX = function(x){return "x is>" + x;};
return this;
}
function augmentCircle()
{
this.moveBorder = function()
{
google.maps.event.trigger(radarCircle,"center_changed");
}
}
function augmentRectangle()
{
this.moveBorder = function()
{
google.maps.event.trigger(radarRectangle,"bounds_changed");
}
}
function reScope() {
var searchReq = {'cmd':'search', 'scopeVintage':scopeVintage};
if (radarShape.getCenter) {
searchReq.checker = 0;
var currCenter = radarCircle.getCenter();
searchReq.centerLat = currCenter.lat();
searchReq.centerLng = currCenter.lng();
searchReq.radius = radarCircle.getRadius();
} else {
searchReq.checker = 1;
searchReq.SWLat = radarShape.getBounds().getSouthWest().lat();
searchReq.SWLng = radarShape.getBounds().getSouthWest().lng();
searchReq.NELat = radarShape.getBounds().getNorthEast().lat();
searchReq.NELng = radarShape.getBounds().getNorthEast().lng();
}
facFinder.postMessage(searchReq);
}
Related
I´m creating a map out of polygons to show the different districts of a city. Each polygon (district) should be clickable to another website (a sub-page with information about this area). I already added an add.listener and I can see that there is a link behind a polygon when I hover over the polygon but it is not clickable.
This is what I have so far for one polygon:
<body>
<h1>Headline</h1>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center:{lat:52.516754,lng:13.415202},
mapTypeId: 'terrain'
});
//Define the LatLng coordinates for the polygon's path DistrictOne
var DistrictOneCoords = [
{lat:52.528198300, lng:13.424935300},
{lat:52.527989500, lng:13.423905300},
{lat:52.525065200, lng:13.420386300},
{lat:52.522819700, lng:13.426480300},
{lat:52.521148500, lng:13.429141000},
{lat:52.519111700, lng:13.427596100},
{lat:52.528198300, lng:13.424935300}
];
// Construct the polygon.
var DistrictOne = new google.maps.Polygon({
paths: DistrictOneCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
DistrictOne.setMap(map);
}
// link
google.maps.event.addListener(DistrictOne, "click", function(event) { window.location.href = "https://www.berlin.de" });
</script>
As I already mentioned I'm not able to click the link.
With the posted code, I get a javascript error:
Uncaught ReferenceError: google is not defined
Your "click" listener is outside of the initMap function, so it is executing before the Google Maps Javascript API v3 has loaded.
Move if inside the initMap function:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center:{lat:52.516754,lng:13.415202},
mapTypeId: 'terrain'
});
//Define the LatLng coordinates for the polygon's path DistrictOne
var DistrictOneCoords = [
{lat:52.528198300, lng:13.424935300},
{lat:52.527989500, lng:13.423905300},
{lat:52.525065200, lng:13.420386300},
{lat:52.522819700, lng:13.426480300},
{lat:52.521148500, lng:13.429141000},
{lat:52.519111700, lng:13.427596100},
{lat:52.528198300, lng:13.424935300}
];
// Construct the polygon.
var DistrictOne = new google.maps.Polygon({
paths: DistrictOneCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
DistrictOne.setMap(map);
// link
google.maps.event.addListener(DistrictOne, "click", function(event) {
window.location.href = "https://www.berlin.de"
});
}
proof of concept fiddle
code snippet:
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {
lat: 52.516754,
lng: 13.415202
},
mapTypeId: 'terrain'
});
//Define the LatLng coordinates for the polygon's path DistrictOne
var DistrictOneCoords = [{
lat: 52.528198300,
lng: 13.424935300
},
{
lat: 52.527989500,
lng: 13.423905300
},
{
lat: 52.525065200,
lng: 13.420386300
},
{
lat: 52.522819700,
lng: 13.426480300
},
{
lat: 52.519111700,
lng: 13.427596100
},
{
lat: 52.521148500,
lng: 13.429141000
},
{
lat: 52.528198300,
lng: 13.424935300
}
];
// Construct the polygon.
var DistrictOne = new google.maps.Polygon({
paths: DistrictOneCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
DistrictOne.setMap(map);
// link
google.maps.event.addListener(DistrictOne, "click", function(event) {
console.log('click, set window.location.href = "https://www.berlin.de"');
// uncomment the line below to make it redirect
// window.location.href = "https://www.berlin.de"
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
As per your given code. I am implemented polygon in my local.
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center:{lat:52.516754,lng:13.415202},
mapTypeId: 'terrain'
});
//Define the LatLng coordinates for the polygon's path DistrictOne
var DistrictOneCoords = [
{lat:52.528198300, lng:13.424935300},
{lat:52.527989500, lng:13.423905300},
{lat:52.525065200, lng:13.420386300},
{lat:52.522819700, lng:13.426480300},
{lat:52.521148500, lng:13.429141000},
{lat:52.519111700, lng:13.427596100},
{lat:52.528198300, lng:13.424935300}
];
// Construct the polygon.
var DistrictOne = new google.maps.Polygon({
paths: DistrictOneCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
DistrictOne.setMap(map);
addEventFunction(DistrictOne);
}
// link
function addEventFunction(DistrictOne) {
google.maps.event.addListener(DistrictOne, "click", function(event) { window.location.href = "https://www.berlin.de" });
}
initMap();
This question already has an answer here:
Google Maps Waypoints not showing whole path
(1 answer)
Closed 5 years ago.
I'm using the Google Map API. I want to show the dotted routes in map. If I add polylineDotted object to google.maps.DirectionsRenderer, it will miss some path on the map. Between point A and point B route is missing(please check my jsfiddle).
I had tried not using polylineDotted, it will be OK.
var polylineDotted = new google.maps.Polyline({
strokeColor: '#9966ff',
strokeOpacity: 0,
fillOpacity: 0,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '10px'
}],
});
Example code
My wish features must in could:
List item
Color #9966ff
Dotted routes
Multiple waypoints
polylineDotted should be a PolylineOptions object, not a Polyline.
This:
var polylineDotted = new google.maps.Polyline({
strokeColor: '#9966ff',
strokeOpacity: 0,
fillOpacity: 0,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '10px'
}],
})
should be:
var polylineDotted = {
strokeColor: '#9966ff',
strokeOpacity: 0,
fillOpacity: 0,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '10px'
}],
};
proof of concept fiddle
code snippet:
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var infoWindow = new google.maps.InfoWindow();
function initialize() {
var lineSymbol = {
path: google.maps.SymbolPath.CIRCLE,
fillOpacity: 1,
scale: 3
};
var polylineDotted = {
strokeColor: '#9966ff',
strokeOpacity: 0,
fillOpacity: 0,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '10px'
}],
};
var rendererOptions = {
map: map,
suppressMarkers: false,
polylineOptions: polylineDotted
};
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var center = new google.maps.LatLng(0, 0);
var myOptions = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: center
};
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
directionsDisplay.setMap(map);
var start = "Lafayette Avenue 212, New York City";
var end = "Myrtle Avenue 11612, New York City";
var method = 'DRIVING';
var request = {
origin: start,
waypoints: [{
location: "Jackie Robinson Pkwy Brooklyn, New York City",
stopover: true
}],
destination: end,
travelMode: google.maps.DirectionsTravelMode[method]
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var iwContent = response['routes'][0].legs[0].distance.text + '<br />' + response['routes'][0].legs[0].duration.text;
infoWindow.setContent(iwContent);
}
});
google.maps.event.addListener(polylineDotted, 'click', function(event) {
infoWindow.setPosition(event.latLng);
infoWindow.open(map, this);
});
google.maps.event.addListener(map, 'click', function() {
infoWindow.close();
});
}
initialize();
#map-canvas {
height: 400px;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>
I am trying to fill an area that is bordered by polylines that are snapped to roads. Here is my code:
var pos = new google.maps.LatLng(29.744860,-95.361302);
var myOptions = {
zoom: 12,
center: pos,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), myOptions);
map.setCenter(pos);
roadTrip1 = [
new google.maps.LatLng(29.692093, -95.377307),
new google.maps.LatLng(29.813047,-95.399361),
new google.maps.LatLng(29.692093, -95.377307)
];
var traceroadTrip1 = new google.maps.Polyline({
path: roadTrip1,
strokeColor: "red",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
});
var service1 = new google.maps.DirectionsService(),traceroadTrip1,snap_path=[];
traceroadTrip1.setMap(map);
for(j=0;j<roadTrip1.length-1;j++){
service1.route({origin: roadTrip1[j],destination: roadTrip1[j+1],travelMode: google.maps.DirectionsTravelMode.DRIVING},function(result, status) {
if(status == google.maps.DirectionsStatus.OK) {
snap_path = snap_path.concat(result.routes[0].overview_path);
traceroadTrip1.setPath(snap_path);
}
});
}
I'm not too familiar with javascript and I'm hoping it's easy to create a polygon from polylines that are snapped to roads. Once I have a polygon I'd like to color the area.
Thanks for any and all help.
Change the google.maps.Polyline to a google.maps.Polygon.
var traceroadTrip1 = new google.maps.Polygon({
path: roadTrip1,
strokeColor: "red",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
proof of concept fiddle
code snippet:
function initialize() {
var pos = new google.maps.LatLng(29.813047, -95.399361);
var myOptions = {
zoom: 11,
center: pos,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), myOptions);
map.setCenter(pos);
roadTrip1 = [
new google.maps.LatLng(29.692093, -95.377307),
new google.maps.LatLng(29.813047, -95.399361),
new google.maps.LatLng(29.692093, -95.377307)
];
var traceroadTrip1 = new google.maps.Polygon({
path: roadTrip1,
strokeColor: "red",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
var service1 = new google.maps.DirectionsService(),
traceroadTrip1, snap_path = [];
var bounds = new google.maps.LatLngBounds();
traceroadTrip1.setMap(map);
for (j = 0; j < roadTrip1.length - 1; j++) {
service1.route({
origin: roadTrip1[j],
destination: roadTrip1[j + 1],
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
snap_path = snap_path.concat(result.routes[0].overview_path);
traceroadTrip1.setPath(snap_path);
for (var i = 0; i < traceroadTrip1.getPath().getLength(); i++) {
bounds.extend(traceroadTrip1.getPath().getAt(i));
}
map.fitBounds(bounds);
}
});
}
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
I have a Google Map. When a user clicks, it places a "start" marker. The second click yields a polyline between the first click and the second click, and adds an "end" marker. The third click adds another data point to the polyline, and moves the "end" marker to the most recent click. Nothing special:
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 13
});
map.addListener('click', insertDataPoint);
polyline = new google.maps.Polyline({
strokeColor: '#000000',
strokeOpacity: 0.7,
strokeWeight: 3
});
polyline.setMap(map);
plots = [];
... // Bunch of other code that isn't important
function insertDataPoint(e) {
var path = polyline.getPath();
path.push(e.latLng);
// Logic to set up marker or circle
if (plots.length == 0) {
// Case: first click
startMarker.setPosition(e.latLng);
startMarker.setMap(map);
plots.push(startMarker);
} else {
if (plots.length != 1) {
// Case: we have intermediate points between start and end
var plot = plots.pop();
var marker = new google.maps.Marker({
position: plot.getPosition(),
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillColor: '#ffffff',
fillOpacity: 0.6,
strokeColor: '#ffffff',
strokeOpacity: 0.8,
strokeWeight: 2,
scale: 3
}
});
marker.setMap(map);
plots.push(marker);
}
// Case: add an end marker
endMarker.setPosition(e.latLng);
if (plots.length == 1) {
endMarker.setMap(map);
}
plots.push(endMarker);
}
}
I'd like to get the plotted points in GeoJSON format. I know Google recently released the Data layer API with the .toGeoJson() call, but, naturally, the data is empty because it was not added to the Data layer:
map.data.toGeoJson( function(data) {
alert(JSON.stringify(data)); // {"type":"FeatureCollections", "features":[]}
So the question is how do I add my data -- the markers and polyline -- to the Data layer so I can get that sweet GeoJSON?
Note -- I understand that the Data layer has functionality that allows users to draw on the map, but I need to do it my way.
This will create geoJSON representing the polyline and add it to the data layer:
function exportGeoJson() {
var geoJson = {
"type": "FeatureCollection",
"features": []
};
var polylineFeature = {
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": []
},
"properties": {}
};
for (var i = 0; i < polyline.getPath().getLength(); i++) {
var pt = polyline.getPath().getAt(i);
polylineFeature.geometry.coordinates.push([
pt.lng(), pt.lat()]);
}
geoJson.features.push(polylineFeature);
document.getElementById('geojson').value = JSON.stringify(geoJson);
polyline.setPath([]);
map.data.addGeoJson(geoJson);
// Set the stroke width, and fill color for each polygon
map.data.setStyle({
strokeColor: 'green',
strokeWeight: 2
});
map.data.toGeoJson( function(data) {
document.getElementById('exported').value=JSON.stringify(data)
});
}
proof of concept fiddle
code snippet:
var polyline, map;
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 13
});
map.addListener('click', insertDataPoint);
polyline = new google.maps.Polyline({
strokeColor: '#000000',
strokeOpacity: 0.7,
strokeWeight: 3
});
polyline.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
plots = [];
// Bunch of other code that isn't important
function insertDataPoint(e) {
var path = polyline.getPath();
path.push(e.latLng);
// Logic to set up marker or circle
if (plots.length == 0) {
// Case: first click
startMarker.setPosition(e.latLng);
startMarker.setMap(map);
plots.push(startMarker);
} else {
if (plots.length != 1) {
// Case: we have intermediate points between start and end
var plot = plots.pop();
var marker = new google.maps.Marker({
position: plot.getPosition(),
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillColor: '#ffffff',
fillOpacity: 0.6,
strokeColor: '#ffffff',
strokeOpacity: 0.8,
strokeWeight: 2,
scale: 3
}
});
marker.setMap(map);
plots.push(marker);
}
// Case: add an end marker
endMarker.setPosition(e.latLng);
if (plots.length == 1) {
endMarker.setMap(map);
}
plots.push(endMarker);
}
}
function exportGeoJson() {
var geoJson = {
"type": "FeatureCollection",
"features": []
};
var polylineFeature = {
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": []
},
"properties": {}
};
for (var i = 0; i < polyline.getPath().getLength(); i++) {
var pt = polyline.getPath().getAt(i);
polylineFeature.geometry.coordinates.push([
pt.lng(), pt.lat()
]);
}
geoJson.features.push(polylineFeature);
document.getElementById('geojson').value = JSON.stringify(geoJson);
polyline.setPath([]);
map.data.addGeoJson(geoJson);
// Set the stroke width, and fill color for each polygon
map.data.setStyle({
strokeColor: 'green',
strokeWeight: 2
});
map.data.toGeoJson(function(data) {
document.getElementById('exported').value = JSON.stringify(data)
});
}
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?"></script>
<input type="button" onclick="exportGeoJson()" value="export GeoJson" />
<div id="map" style="border: 2px solid #3872ac;"></div>
<textarea id="geojson" rows="10" cols="70"></textarea>
<br><b>Exported</b>
<br>
<textarea id="exported" rows="10" cols="70"></textarea>
I am using cartodb(google map) to draw polylines and then inserting a polygon in google maps.
The problem is, two maps load, on top of each other. One with the cartodb polylines and one with the polygon. I need them to be on the same map. Not sure what I am doing wrong.
function main() {
var map;
var sql; // sql query object for querying CartoDB SQL API
var sublayers = [];
// create google maps map
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(26.178347,50.6116694),
mapTypeId: google.maps.MapTypeId.HYBRID,
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.TOP_RIGHT
},
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
// create layer and add to the map, then add some interactive elements
cartodb.createLayer(map, 'http://zbahrain.cartodb.com/api/v2/viz/f5073bec-b841-11e4-b79c-0e4fddd5de28/viz.json')
.addTo(map)
.on('done', function(layer) {
var subLayerOptions = {
sql: "SELECT * FROM roadscomplete where block = '525'"}
var sublayer = layer.getSubLayer(0);
sublayer.set(subLayerOptions);
sublayers.push(sublayer);
sublayer.on('error', function(err) {
cartodb.log.log('error: ' + err);
});
})
.on('error', function() {
cartodb.log.log("some error occurred");
});
map = new google.maps.Map(document.getElementById('map'), mapOptions);
// Define the LatLng coordinates for the polygon's path.
var triangleCoords = [ new google.maps.LatLng(26.1750729378,50.5527011926),new google.maps.LatLng(26.1750278514,50.5528370586),new google.maps.LatLng(26.1749037197,50.5527864969),new google.maps.LatLng(26.1749497896,50.5526475251),new google.maps.LatLng(26.1750711189,50.5526969966),new google.maps.LatLng(26.1750729378,50.5527011926), ];
// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FFF',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#EA4A38',
fillOpacity: 0.75
});
bermudaTriangle.setMap(map);
map.setMap(map);
}
window.onload = main;
My mistake.
map = new google.maps.Map(document.getElementById('map'), mapOptions);
Was there twice.