I'm writing a code which will:
-- Load a map and center it on a KML
-- Draw a polygon based on the bounds of the map.
Here below the code. I get an error
Uncaught TypeError: Cannot call method 'getNorthEast' of undefined
function initialize()
{
var mapOptions =
{
zoom: 19,
mapTypeId: google.maps.MapTypeId.ROADMAP //higer zoom
};
var KML1 = new google.maps.KmlLayer(
{
clickable: false,
url: 'https://s3.amazonaws.com/navizon.its.fp/1001/f43l9uvts1_a.kml' //kml link for the floor-plan
});
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
KML1.setMap(map);
var bounds = new google.maps.LatLngBounds();
bounds = map.getBounds();
var ne = bounds.getNorthEast();
var sw = bounds.getSouthWest();
var QLat = Math.abs((ne.lat()-sw.lat())/5);
var QLng = Math.abs((sw.lng()-ne.lng())/5);
var swLat = sw.lat()+QLat;
var swLng = sw.lng()+QLng;
var neLat = ne.lat()-QLat;
var neLng = ne.lng()-QLng;
ne = new google.maps.LatLng(neLat,neLng);
sw = new google.maps.LatLng(swLat,swLng);
var Coords = [
ne, new google.maps.LatLng(ne.lat(), sw.lng()),
sw, new google.maps.LatLng(sw.lat(), ne.lng()), ne
];
surface = new google.maps.Polygon(
{
paths: Coords,
strokeColor: '#00AAFF',
strokeOpacity: 0.6,
strokeWeight: 2,
fillColor: '#00CC66',
fillOpacity: 0.15,
editable: true,
draggable: true,
geodesic:true
});
surface.setMap(map);
google.maps.event.addListener(surface, 'mousemove', ciao) //add listener for changes
//$("#results").append(coordinates[0]);
//Let's update area and price as the poly changes
function ciao(event)
{
var vertices = this.getPath();
// Iterate over the vertices.
for (var i =0; i < vertices.getLength(); i++) {
var xy = vertices.getAt(i);
Coords = []
Coords.push(xy);
};
}
}
Any Suggestion?
Thanks,
Daniele
You need to put all the code that depends on the map bounds inside the event listener.
var surface = null;
function initialize()
{
var mapOptions =
{
zoom: 19,
mapTypeId: google.maps.MapTypeId.ROADMAP //higer zoom
};
var KML1 = new google.maps.KmlLayer(
{
clickable: false,
url: 'https://s3.amazonaws.com/navizon.its.fp/1001/f43l9uvts1_a.kml' //kml link for the floor-plan
});
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
KML1.setMap(map);
google.maps.event.addListener(map,'bounds_changed', function()
{
var bounds = new google.maps.LatLngBounds();
bounds = map.getBounds();
var ne = bounds.getNorthEast();
var sw = bounds.getSouthWest();
var QLat = Math.abs((ne.lat()-sw.lat())/5);
var QLng = Math.abs((sw.lng()-ne.lng())/5);
var swLat = sw.lat()+QLat;
var swLng = sw.lng()+QLng;
var neLat = ne.lat()-QLat;
var neLng = ne.lng()-QLng;
ne = new google.maps.LatLng(neLat,neLng);
sw = new google.maps.LatLng(swLat,swLng);
var Coords = [
ne, new google.maps.LatLng(ne.lat(), sw.lng()),
sw, new google.maps.LatLng(sw.lat(), ne.lng()), ne
];
surface = new google.maps.Polygon(
{
paths: Coords,
strokeColor: '#00AAFF',
strokeOpacity: 0.6,
strokeWeight: 2,
fillColor: '#00CC66',
fillOpacity: 0.15,
editable: true,
draggable: true,
geodesic:true
});
surface.setMap(map);
}); // end of listener callbck
google.maps.event.addListener(surface, 'mousemove', ciao) //add listener for changes
//$("#results").append(coordinates[0]);
//Let's update area and price as the poly changes
function ciao(event)
{
var vertices = this.getPath();
// Iterate over the vertices.
for (var i =0; i < vertices.getLength(); i++) {
var xy = vertices.getAt(i);
Coords = []
Coords.push(xy);
};
}
} // end of initialize
Related
I have two sets of points coordinates that I need to connect on google map, like this, just much larger:
var start = ['42.81405, 12.4886861111', '32.7994444444, 20.506775', '44.8062644989, 20.5005495758'];
var end = ['47.81405, 18.4886861111', '33.7994444444, 21.506775', '39.8062644989, 16.5005495758'];
The first coordinate from "start" needs to be connected to the first coord from "end", and so on, until the end. Got that, but now I need to make "start" and "end" points more recognizable, put some kind of dots in a different color on them. What I have:
var geocoder;
var map;
function initialize() {
var center = new google.maps.LatLng(51.97559, 4.12565);
map = new google.maps.Map(document.getElementById('map'), {
center: center,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var bounds = new google.maps.LatLngBounds();
var start = ['42.81405, 12.4886861111', '32.7994444444, 20.506775', '44.8062644989, 20.5005495758'];
var end = ['47.81405, 18.4886861111', '33.7994444444, 21.506775', '39.8062644989, 16.5005495758'];
var paths = [];
for (var i=0; i < end.length; i++){
var startCoords = start[i].split(",");
var startPt = new google.maps.LatLng(startCoords[0],startCoords[1]);
var endCoords = end[i].split(",");
var endPt = new google.maps.LatLng(endCoords[0],endCoords[1]);
paths.push([startPt, endPt]);
bounds.extend(startPt);
bounds.extend(endPt);
}
map.fitBounds(bounds);
var polyline = new google.maps.Polygon({
paths: paths,
strokeColor: 'red',
strokeWeight: 2,
strokeOpacity: 1
});
polyline.setMap(map);
}
google.maps.event.addDomListener(window, "load", initialize);
Any kind of help is welcomed.
The simplest thing you can just create markers for start and end points. Like the following code
for (var i=0; i < end.length; i++){
var startCoords = start[i].split(",");
var startPt = new google.maps.LatLng(startCoords[0],startCoords[1]);
var endCoords = end[i].split(",");
var endPt = new google.maps.LatLng(endCoords[0],endCoords[1]);
paths.push([startPt, endPt]);
bounds.extend(startPt);
bounds.extend(endPt);
//Create start and end markers
var markerStart = new google.maps.Marker({
position: startPt,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 3,
fillColor: 'blue',
strokeColor: 'blue'
},
draggable: true,
map: map
});
var markerEnd = new google.maps.Marker({
position: endPt,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 3,
fillColor: 'green',
strokeColor: 'green'
},
draggable: true,
map: map
});
}
It will give you something like
Code snippet
var map;
function initMap() {
var center = new google.maps.LatLng(51.97559, 4.12565);
map = new google.maps.Map(document.getElementById('map'), {
center: center,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var bounds = new google.maps.LatLngBounds();
var start = ['42.81405, 12.4886861111', '32.7994444444, 20.506775', '44.8062644989, 20.5005495758'];
var end = ['47.81405, 18.4886861111', '33.7994444444, 21.506775', '39.8062644989, 16.5005495758'];
var paths = [];
for (var i=0; i < end.length; i++){
var startCoords = start[i].split(",");
var startPt = new google.maps.LatLng(startCoords[0],startCoords[1]);
var endCoords = end[i].split(",");
var endPt = new google.maps.LatLng(endCoords[0],endCoords[1]);
paths.push([startPt, endPt]);
bounds.extend(startPt);
bounds.extend(endPt);
//Create start and end markers
var markerStart = new google.maps.Marker({
position: startPt,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 3,
fillColor: 'blue',
strokeColor: 'blue'
},
draggable: true,
map: map
});
var markerEnd = new google.maps.Marker({
position: endPt,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 3,
fillColor: 'green',
strokeColor: 'green'
},
draggable: true,
map: map
});
}
map.fitBounds(bounds);
var polyline = new google.maps.Polygon({
paths: paths,
strokeColor: 'red',
strokeWeight: 2,
strokeOpacity: 1
});
polyline.setMap(map);
}
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap"
async defer></script>
So far I have been trying to implement a simulation for aircraft trip on GMaps.But I encountered an error or a logic (whatever you call) that I couldn't figure out.
In my project briefly I made an database connection to get Runway coordinates then I recieved succesfully and got them to write in labels after then I tried to reach labels through javascript to get coordinates again to enter GMaps but It didn't work.(Map is not opening)
I would be very pleasent,If you could help me.
Thanks in Advance
<script>
var latstrt = 0;
var longtstrt = 0;
function Load()
{
latstrt = document.getElementById("<%=Label6.ClientID %>").innerHTML;
longstrt = document.getElementById("<%=Label7.ClientID %>").innerHTML;
window.alert(latstrt);
}
window.onload = function () {
Load();
initialize();
};
window.alert(latstrt);
var myCenter = new google.maps.LatLng(latstrt,longtstrt);
var elaziz = new google.maps.LatLng(38.608334, 39.291668);
function initialize() {
var mapProp = {
center: myCenter,
zoom: 8,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var marker = new google.maps.Marker({
position: myCenter,
draggable: true,
});
var myTrip = [myCenter,elaziz];
var flightPath = new google.maps.Polyline({
path: myTrip,
strokeColor: "#0000FF",
strokeOpacity: 0.8,
strokeWeight: 2
});
marker.setMap(map);
flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Here's a slightly modified version of your code which should work:
function initialize() {
var latstrt = document.getElementById("<%=Label6.ClientID %>").innerHTML;
var longstrt = document.getElementById("<%=Label7.ClientID %>").innerHTML;
var myCenter = new google.maps.LatLng(latstrt,longtstrt);
var elaziz = new google.maps.LatLng(38.608334, 39.291668);
var mapProp = {
center: myCenter,
zoom: 8,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var marker = new google.maps.Marker({
position: myCenter,
draggable: true,
map: map
});
var myTrip = [myCenter,elaziz];
var flightPath = new google.maps.Polyline({
path: myTrip,
strokeColor: "#0000FF",
strokeOpacity: 0.8,
strokeWeight: 2,
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
I have this marker that moves along a google map http://jsfiddle.net/t43kaeyr/ but i need it to draw its path on the map as it moves.
This is the javascript that creates the map
var map,marker;
var startPos = [42.42679066670903, -83.29210638999939];
var speed = 150; // km/h
var delay = 100;
// If you set the delay below 1000ms and you go to another tab,
// the setTimeout function will wait to be the active tab again
// before running the code.
// See documentation :
// https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout#Inactive_tabs
function animateMarker(marker, coords, km_h)
{
var target = 0;
var km_h = km_h || 50;
coords.push([startPos[0], startPos[1]]);
function goToPoint()
{
var lat = marker.position.lat();
var lng = marker.position.lng();
var step = (km_h * 1000 * delay) / 3600000; // in meters
var dest = new google.maps.LatLng(
coords[target][0], coords[target][1]);
var distance =
google.maps.geometry.spherical.computeDistanceBetween(
dest, marker.position); // in meters
var numStep = distance / step;
var i = 0;
var deltaLat = (coords[target][0] - lat) / numStep;
var deltaLng = (coords[target][1] - lng) / numStep;
function moveMarker()
{
lat += deltaLat;
lng += deltaLng;
i += step;
if (i < distance)
{
marker.setPosition(new google.maps.LatLng(lat, lng));
setTimeout(moveMarker, delay);
}
else
{ marker.setPosition(dest);
target++;
if (target == coords.length){ target = 0; }
setTimeout(goToPoint, delay);
}
}
moveMarker();
}
goToPoint();
}
function initialize()
{
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(42.425175091823974, -83.2943058013916),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
marker = new google.maps.Marker({
position: new google.maps.LatLng(startPos[0], startPos[1]),
icon: 'assets/images/c.png',
map: map
});
google.maps.event.addListenerOnce(map, 'idle', function()
{
animateMarker(marker, [
// The coordinates of each point you want the marker to go to.
// You don't need to specify the starting position again.
[42.42666395645802, -83.29694509506226],
[42.42300508749226, -83.29679489135742],
[42.42304468678425, -83.29434871673584],
[42.424882066428424, -83.2944130897522],
[42.42495334300206, -83.29203128814697]
], speed);
});
}
initialize();
I tried drawing the path and the path is drawn correctly but the object does not move any more. This is the code
var map,marker;
var startPos = [42.42679066670903, -83.29210638999939];
var speed = 150; // km/h
var delay = 100;
// If you set the delay below 1000ms and you go to another tab,
// the setTimeout function will wait to be the active tab again
// before running the code.
// See documentation :
// https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout#Inactive_tabs
function animateMarker(marker, coords, km_h)
{
var target = 0;
var km_h = km_h || 50;
coords.push([startPos[0], startPos[1]]);
function goToPoint()
{
var lat = marker.position.lat();
var lng = marker.position.lng();
var step = (km_h * 1000 * delay) / 3600000; // in meters
var dest = new google.maps.LatLng(
coords[target][0], coords[target][1]);
var distance =
google.maps.geometry.spherical.computeDistanceBetween(
dest, marker.position); // in meters
var numStep = distance / step;
var i = 0;
var deltaLat = (coords[target][0] - lat) / numStep;
var deltaLng = (coords[target][1] - lng) / numStep;
function moveMarker()
{
lat += deltaLat;
lng += deltaLng;
i += step;
if (i < distance)
{
marker.setPosition(new google.maps.LatLng(lat, lng));
setTimeout(moveMarker, delay);
}
else
{ marker.setPosition(dest);
target++;
if (target == coords.length){ target = 0; }
setTimeout(goToPoint, delay);
}
}
moveMarker();
}
goToPoint();
}
function initialize()
{
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(42.425175091823974, -83.2943058013916),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
marker = new google.maps.Marker({
position: new google.maps.LatLng(startPos[0], startPos[1]),
icon: 'assets/images/c.png',
map: map
});
var flightPlanCoordinates = [
{lat: 42.42666395645802, lng: -83.29694509506226},
{lat: 42.42300508749226, lng: -83.29679489135742},
{lat: 42.42304468678425, lng: -83.29434871673584},
{lat: 42.424882066428424, lng: -83.2944130897522},
{lat: 42.42495334300206, lng: -83.29203128814697}
];
google.maps.event.addListenerOnce(map, 'idle', function()
{
animateMarker(marker, [
// The coordinates of each point you want the marker to go to.
// You don't need to specify the starting position again.
flightPlanCoordinates
], speed);
});
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
initialize();
How can i make the marker to draw its path as it moves on the map?.
Maybe you want create a Polyline with a Line with multiple points, which represents each position of the marker:
provide a global variable:
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {lat: 0, lng: -180},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var polylineCoords = [];
var path = new google.maps.Polyline({
path: polylineCoords,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
path.setMap(map);
//To add a Point on the polyline call
function addCoord(lat, lng) {
var point = new google.maps.LatLng(lat, lng);
var coords = path.getPath();
coords.push(point);
}
JSFiddle
I have implemented Google Maps API V3 on a page and for some reason the position of the mouse is off.
In the image, my mouse is in the red circle but the map thinks it's where the blue circle is.
This issue also affects the dragable points when using the directions service.
I build the map using the following:
var center = new google.maps.LatLng(53.42263, -7.9541);
var latlngbounds = new google.maps.LatLngBounds( );
var map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng( 53.42263, -7.9541 ),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var clusters = [];
var oms = new OverlappingMarkerSpiderfier(map);
var iw = new google.maps.InfoWindow();
var spiderIcon = new google.maps.MarkerImage (
'http://www.irishcottageholidays.com/images/cottage1.png',
new google.maps.Size(32,32),
new google.maps.Point(0,0),
new google.maps.Point(16,20)
)
oms.addListener('click', function(marker, event) {
load_content(map, marker, iw, marker.id)
});
oms.addListener('spiderfy', function(markers) {
for(var i = 0; i < markers.length; i ++) {
markers[i].setIcon(spiderIcon);
}
iw.close();
});
for (var i = 0; i < data.locations.length; i++) {
var dataPhoto = data.locations[i];
var latLng = new google.maps.LatLng(dataPhoto.latitude,dataPhoto.longitude);
latlngbounds.extend( latLng );
var marker = new google.maps.Marker({
position: latLng,
icon: 'http://www.irishcottageholidays.com/images/cottage1.png',
map: map,
id: dataPhoto.mID,
title: dataPhoto.name
});
clusters.push(marker);
oms.addMarker(marker);
}
var mcStyles = [
{
textColor: 'deeppink',
textSize: 18,
anchor: [17,0],
url: '/assets/cms/images/cottage_cluster.png',
height: 50,
width: 50
}
]
var mcOptions = {
styles: mcStyles,
gridSize: 5,
maxZoom: 15
}
var markerCluster = new MarkerClusterer(map, clusters, mcOptions);
map.fitBounds( latlngbounds );
There is an issue with Firefox 39.0 and v=3.exp.
issue 8278 in the issue tracker
I am trying to render shapes on Google Maps (using V3 of the API), which contain the same shape, just smaller inside. Basically a box within a box or a polygon within a polygon.
For the rectangle I have the following code, which works:
var drawEdgesRectangle = function (shape) {
// shape is the original, parent rectangle
var NE, SW, childNE, childSW, padding, diagonal, inner;
// set padding constant to 1 (i.e. 1m distance all around)
padding = 1;
// get diagonal distance from corner
diagonal = Math.sqrt(2) * padding;
// get NE of parent
NE = shape.bounds.getNorthEast();
// get SW of parent
SW = shape.bounds.getSouthWest();
// get child NE, SW
childNE = google.maps.geometry.spherical.computeOffset(NE, diagonal, 225);
childSW = google.maps.geometry.spherical.computeOffset(SW, diagonal, 45);
// render inner shape
inner = new google.maps.Rectangle({
strokeColor: 'white',
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: 'black',
fillOpacity: 0.35,
map: map,
bounds: new google.maps.LatLngBounds(
childSW,
childNE
)
});
}
Of course, doing this for a polygon is a different kettle of fish. I know I can use getPaths() to get the attributes of each line, but working out how to place the inner lines, and indeed, work out where 'inside' is is proving to be conceptually quite difficult for me.
I would like to know if what I want to achieve is possible given the Google API.
One option if you polygons are "simple" (the center is "inside" the polygon and there are no concave sides), would be to do something similar to what you did with the rectangle (which is a four sided polygon that meets those criteria):
Using the geometry library:
To include it:
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry"></script>
Code (assumes global "poly" and others):
var drawEdgesPoly = function() {
// shape is the original, parent polygon
var shape = poly;
// set padding constant to 1 (i.e. 1m distance all around)
padding = 50;
var vertices = shape.getPath();
var polybounds = new google.maps.LatLngBounds();
for (var i = 0; i < vertices.getLength(); i++) {
polybounds.extend(vertices.getAt(i));
}
var center = polybounds.getCenter();
if (centerMarker && centerMarker.setMap) {
centerMarker.setMap(null);
}
centerMarker = new google.maps.Marker({
position: center,
map: map,
icon: {
url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
size: new google.maps.Size(7, 7),
anchor: new google.maps.Point(4, 4)
}
});
if (polylines && (polylines.length > 0)) {
for (var i = 0; i < polylines.length; i++) {
polylines[i].setMap(null);
}
}
polylines = [];
var newPath = [];
for (var i = 0; i < vertices.getLength(); i++) {
polylines.push(new google.maps.Polyline({
path: [center, vertices.getAt(i)],
map: map,
strokeWidth: 2,
strokeColor: 'red'
}));
newPath[i] = google.maps.geometry.spherical.computeOffset(vertices.getAt(i),
padding,
google.maps.geometry.spherical.computeHeading(vertices.getAt(i), center));
}
if (inner && inner.setMap)
inner.setMap(null);
// render inner shape
inner = new google.maps.Polygon({
strokeColor: 'white',
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: 'black',
fillOpacity: 0.35,
map: map,
editable: false,
path: newPath
});
};
proof of concept fiddle
Play with the polygon in the code snippet or the jsfiddle to see the constraints.
var map;
var infoWindow;
var poly;
var inner;
var polylines = [];
var centerMarker;
var paths = [
[
new google.maps.LatLng(38.872886, -77.054720),
new google.maps.LatLng(38.872602, -77.058046),
new google.maps.LatLng(38.870080, -77.058604),
new google.maps.LatLng(38.868894, -77.055664),
new google.maps.LatLng(38.870598, -77.053346)
]
];
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(38.8714, -77.0556),
zoom: 15
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
poly = new google.maps.Polygon({
paths: paths,
strokeWeight: 3,
fillColor: '#55FF55',
fillOpacity: 0.5,
editable: true
});
poly.setMap(map);
drawEdgesPoly();
google.maps.event.addListener(poly.getPath(), 'insert_at', drawEdgesPoly);
google.maps.event.addListener(poly.getPath(), 'remove_at', drawEdgesPoly);
google.maps.event.addListener(poly.getPath(), 'set_at', drawEdgesPoly);
// Define an info window on the map.
infoWindow = new google.maps.InfoWindow();
}
google.maps.event.addDomListener(window, 'load', initialize);
var drawEdgesPoly = function() {
// shape is the original, parent polygon
var shape = poly;
// set padding constant to 1 (i.e. 1m distance all around)
padding = 50;
var vertices = shape.getPath();
var polybounds = new google.maps.LatLngBounds();
for (var i = 0; i < vertices.getLength(); i++) {
polybounds.extend(vertices.getAt(i));
}
var center = polybounds.getCenter();
if (centerMarker && centerMarker.setMap) {
centerMarker.setMap(null);
}
centerMarker = new google.maps.Marker({
position: center,
map: map,
icon: {
url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
size: new google.maps.Size(7, 7),
anchor: new google.maps.Point(4, 4)
}
});
if (polylines && (polylines.length > 0)) {
for (var i = 0; i < polylines.length; i++) {
polylines[i].setMap(null);
}
}
polylines = [];
var newPath = [];
for (var i = 0; i < vertices.getLength(); i++) {
polylines.push(new google.maps.Polyline({
path: [center, vertices.getAt(i)],
map: map,
strokeWidth: 2,
strokeColor: 'red'
}));
newPath[i] = google.maps.geometry.spherical.computeOffset(vertices.getAt(i),
padding,
google.maps.geometry.spherical.computeHeading(vertices.getAt(i), center));
}
if (inner && inner.setMap)
inner.setMap(null);
// render inner shape
inner = new google.maps.Polygon({
strokeColor: 'white',
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: 'black',
fillOpacity: 0.35,
map: map,
editable: false,
path: newPath
});
};
html,
body,
#map-canvas {
height: 100%;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry"></script>
<div id="map-canvas" style="height:100%; width:100%;"></div>