Hi i have a problem with rotating a mark, roation works fine but it changes its position when its rotated, is there any way to fix this
const image = {
path: "M14 8.947L22 14v2l-8-2.526v5.36l3 1.666V22l-4.5-1L8 22v-1.5l3-1.667v-5.36L3 16v-2l8-5.053V3.5a1.5 1.5 0 0 1 3 0v5.447z",
fillColor: "#ffd400",
fillOpacity: 1,
strokeColor: "000",
strokeOpacity: 0.4,
scale: 1,
rotation: 0,
};
const aircraft = new google.maps.Marker({
position: { lat: 51.9189046, lng: 19.1343786 },
map,
icon: image,
});
The rotation for an SVG symbol is around the anchor position. The default anchor for an SVG Symbol is the upper left corner. To rotate the marker around the center, set the anchor to be the center of the image, which for your icon is:
anchor: new google.maps.Point(13, 13)
complete marker definition:
const image = {
path: "M14 8.947L22 14v2l-8-2.526v5.36l3 1.666V22l-4.5-1L8 22v-1.5l3-1.667v-5.36L3 16v-2l8-5.053V3.5a1.5 1.5 0 0 1 3 0v5.447z",
fillColor: "#ffd400",
fillOpacity: 1,
strokeColor: "000",
strokeOpacity: 0.4,
scale: 1,
rotation: 0,
anchor: new google.maps.Point(13, 13)
};
const aircraft = new google.maps.Marker({
position: { lat: 51.9189046, lng: 19.1343786 },
map,
icon: image,
});
proof of concept fiddle
code snippet:
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 51.9189046, lng: 19.1343786 },
zoom: 15,
});
var ptMarker = new google.maps.Marker({
position: map.getCenter(),
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)
}
});
const image = {
path: "M14 8.947L22 14v2l-8-2.526v5.36l3 1.666V22l-4.5-1L8 22v-1.5l3-1.667v-5.36L3 16v-2l8-5.053V3.5a1.5 1.5 0 0 1 3 0v5.447z",
fillColor: "#ffd400",
fillOpacity: 1,
strokeColor: "000",
strokeOpacity: 0.4,
scale: 1,
rotation: 0,
anchor: new google.maps.Point(13, 13)
};
const aircraft = new google.maps.Marker({
position: { lat: 51.9189046, lng: 19.1343786 },
map,
icon: image,
});
var angle = 0;
setInterval(function() {
angle += 10;
var image = aircraft.getIcon();
image.rotation = angle;
aircraft.setIcon(image);
}, 500)
}
window.initMap = initMap;
/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
height: 100%;
}
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map"></div>
<!--
The `defer` attribute causes the callback to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises
with https://www.npmjs.com/package/#googlemaps/js-api-loader.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=weekly"
defer
></script>
</body>
</html>
Related
I am new to Google Maps and I need to receive an alert when the marker moves outside the circles, I have already created the map and added some circles to represent the areas in which the marker can stay, outside of them I need to show a alert announcing that this is not a coverage area.
My code is the following:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=places&v=weekly" defer></script>
<script type="text/javascript">
const citymap = {
escalon: {
center: { lat: 13.701984532461921, lng: -89.23395010808454 },
},
};
const citymap1 = {
matriz: {
center: { lat: 13.699526, lng: -89.196691 },
},
};
const citymap2 = {
plaza: {
center: { lat: 13.699581, lng: -89.189770 },
},
};
const citymap3 = {
ahuachapan: {
center: { lat: 13.920266, lng: -89.847658 },
},
};
const citymap4 = {
sanMiguel: {
center: { lat: 13.484937, lng: -88.177339 },
},
};
const citymap5 = {
santaAna: {
center: { lat: 13.993704, lng: -89.556913 },
},
};
const citymap6 = {
sonsonate: {
center: { lat: 13.720177, lng: -89.727801 },
},
};
function initialize() {
// Creating map object
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 12,
center: new google.maps.LatLng(13.701277, -89.224468),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var vMarker = new google.maps.Marker({
position: new google.maps.LatLng(13.701277, -89.224468),
draggable: true
});
google.maps.event.addListener(vMarker, 'dragend', function (evt) {
$("#txtLat").val("https://www.google.es/maps/dir/" + evt.latLng.lat().toFixed(6) + ", " + evt.latLng.lng().toFixed(6));
map.panTo(evt.latLng);
});
for (const city in citymap) {
// Add the circle for this city to the map.
const vMarker = new google.maps.Marker({
position: new google.maps.LatLng(13.701277, -89.224468),
draggable: true
});
}
for (const city in citymap) {
// Add the circle for this city to the map.
const cityCircle = new google.maps.Circle({
strokeColor: "#0066cc",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#0066cc",
fillOpacity: 0.35,
map,
center: citymap[city].center,
radius: 8000,
});
}
for (const city in citymap1) {
// Add the circle for this city to the map.
const cityCircle = new google.maps.Circle({
strokeColor: "#0066cc",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#0066cc",
fillOpacity: 0.35,
map,
center: citymap1[city].center,
radius: 5000,
});
}
for (const city in citymap2) {
// Add the circle for this city to the map.
const cityCircle = new google.maps.Circle({
strokeColor: "#0066cc",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#0066cc",
fillOpacity: 0.35,
map,
center: citymap2[city].center,
radius: 5000,
});
}
for (const city in citymap3) {
// Add the circle for this city to the map.
const cityCircle = new google.maps.Circle({
strokeColor: "#0066cc",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#0066cc",
fillOpacity: 0.35,
map,
center: citymap3[city].center,
radius: 7000,
});
}
for (const city in citymap4) {
// Add the circle for this city to the map.
const cityCircle = new google.maps.Circle({
strokeColor: "#0066cc",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#0066cc",
fillOpacity: 0.35,
map,
center: citymap4[city].center,
radius: 7000,
});
}
for (const city in citymap5) {
// Add the circle for this city to the map.
const cityCircle = new google.maps.Circle({
strokeColor: "#0066cc",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#0066cc",
fillOpacity: 0.35,
map,
center: citymap5[city].center,
radius: 7000,
});
}
for (const city in citymap6) {
// Add the circle for this city to the map.
const cityCircle = new google.maps.Circle({
strokeColor: "#0066cc",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#0066cc",
fillOpacity: 0.35,
map,
center: citymap6[city].center,
radius: 7000,
});
}
// centers the map on markers coords
map.setCenter(vMarker.position);
// adds the marker on the map
vMarker.setMap(map);
}
</script>
</head>
<body onload="initialize();">
<div id='map_canvas' style='width: auto; height: 500px;'></div>
</body>
</html>
I have left you this example code in order to have a broader panorama of my problem, because precisely what I am trying to do is a type of home delivery and the areas in blue marked on the map are the areas in which If there is coverage of my home delivery, but if the marker is located outside of them, or if the client moves them outside of them, I need the alert to be displayed to warn that it cannot be, I appreciate all the support, greetings.
You can do this by getting the bounds getBounds() of the circle and check if the location of the marker is within those bounds like so:
function init() {
var
contentCenter = '<span class="infowin">Center Marker (draggable)</span>',
contentA = '<span class="infowin">Marker A (draggable)</span>',
contentB = '<span class="infowin">Marker B (draggable)</span>';
var
latLngCenter = new google.maps.LatLng(37.081476, -94.510574),
latLngCMarker = new google.maps.LatLng(37.0814, -94.5105),
latLngA = new google.maps.LatLng(37.2, -94.1),
latLngB = new google.maps.LatLng(38, -93),
map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: latLngCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
}),
markerCenter = new google.maps.Marker({
position: latLngCMarker,
title: 'Location',
map: map,
draggable: true
}),
infoCenter = new google.maps.InfoWindow({
content: contentCenter
}),
markerA = new google.maps.Marker({
position: latLngA,
title: 'Location',
map: map,
draggable: true
}),
infoA = new google.maps.InfoWindow({
content: contentA
}),
markerB = new google.maps.Marker({
position: latLngB,
title: 'Location',
map: map,
draggable: true
}),
infoB = new google.maps.InfoWindow({
content: contentB
})
// exemplary setup:
// Assumes that your map is signed to the var "map"
// Also assumes that your marker is named "marker"
,
circle = new google.maps.Circle({
map: map,
clickable: false,
// metres
radius: 100000,
fillColor: '#fff',
fillOpacity: .6,
strokeColor: '#313131',
strokeOpacity: .4,
strokeWeight: .8
});
// attach circle to marker
circle.bindTo('center', markerCenter, 'position');
var
// get the Bounds of the circle
bounds = circle.getBounds()
// Note spans
,
noteA = jQuery('.bool#a'),
noteB = jQuery('.bool#b');
noteA.text(bounds.contains(latLngA));
noteB.text(bounds.contains(latLngB));
// get some latLng object and Question if it's contained in the circle:
google.maps.event.addListener(markerCenter, 'dragend', function() {
latLngCenter = new google.maps.LatLng(markerCenter.position.lat(), markerCenter.position.lng());
bounds = circle.getBounds();
noteA.text(bounds.contains(latLngA));
noteB.text(bounds.contains(latLngB));
});
google.maps.event.addListener(markerA, 'dragend', function() {
latLngA = new google.maps.LatLng(markerA.position.lat(), markerA.position.lng());
noteA.text(bounds.contains(latLngA));
});
google.maps.event.addListener(markerB, 'dragend', function() {
latLngB = new google.maps.LatLng(markerB.position.lat(), markerB.position.lng());
noteB.text(bounds.contains(latLngB));
});
google.maps.event.addListener(markerCenter, 'click', function() {
infoCenter.open(map, markerCenter);
});
google.maps.event.addListener(markerA, 'click', function() {
infoA.open(map, markerA);
});
google.maps.event.addListener(markerB, 'click', function() {
infoB.open(map, markerB);
});
google.maps.event.addListener(markerCenter, 'drag', function() {
infoCenter.close();
noteA.html("draggin…");
noteB.html("draggin…");
});
google.maps.event.addListener(markerA, 'drag', function() {
infoA.close();
noteA.html("draggin…");
});
google.maps.event.addListener(markerB, 'drag', function() {
infoB.close();
noteB.html("draggin…");
});
};
body {
margin: 0;
padding: 0
}
html,
body,
#map {
height: 100%;
font-family: Arial, sans-serif;
font-size: .9em;
color: #fff;
}
#note {
text-align: center;
padding: .3em; 10px;
background: #009ee0;
}
.bool {
font-style: italic;
color: #313131;
}
.info {
display: inline-block;
width: 40%;
text-align: center;
}
.infowin {
color: #313131;
}
#title,
.bool{
font-weight: bold;
}
<div id="note">
<span id="title">»Inside the circle?«</span>
<hr />
<span class="info">Marker <strong>A</strong>:
<span id="a" class="bool"></span>
</span> ←♦→
<span class="info">Marker <strong>B</strong>:
<span id="b" class="bool"></span>
</span>
</div>
<div id="map">test</div>
<script src="https://maps.googleapis.com/maps/api/js?callback=init&libraries=&v=weekly&key=YOUR_API_KEY" async></script>
I want to change the black line with a dotted line in this code or how can I set opacity:0 for line:
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 20.291, lng: 153.027},
zoom: 6,
mapTypeId: 'terrain'
});
var lineSymbol = {
path: google.maps.SymbolPath.CIRCLE,
scale: 8,
strokeColor: '#393'
};
property.
var line = new google.maps.Polyline({
path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
icons: [{
icon: lineSymbol,
offset: '100%'
}],
map: map
});
animateCircle(line);
}
// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line) {
var count = 0;
window.setInterval(function() {
count = (count + 1) % 200;
var icons = line.get('icons');
icons[0].offset = (count / 2) + '%';
line.set('icons', icons);
}, 20);
}
</script>
this is reference from google maps :
google maps sample
how can i change that line with dotted line
Make the strokeOpacity of the lineSymbol 1 (or greater than 0).
var lineSymbol = {
path: google.maps.SymbolPath.CIRCLE,
scale: 8,
strokeColor: '#393',
strokeOpacity: 1
};
proof of concept fiddle
code snippet:
// This example adds an animated symbol to a polyline.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 20.291,
lng: 153.027
},
zoom: 6,
mapTypeId: 'terrain'
});
// Define the symbol, using one of the predefined paths ('CIRCLE')
// supplied by the Google Maps JavaScript API.
var lineSymbol = {
path: google.maps.SymbolPath.CIRCLE,
scale: 8,
strokeColor: '#393',
strokeOpacity: 1,
};
// Define a symbol using SVG path notation, with an opacity of 1.
var dashedLineSymbol = {
path: 'M 0,-1 0,1',
strokeOpacity: 1,
scale: 4
};
// Create the polyline and add the symbol to it via the 'icons' property.
var line = new google.maps.Polyline({
path: [{lat: 22.291,lng: 153.027}, {lat: 18.291,lng: 153.027}],
strokeOpacity: 0,
icons: [{
icon: lineSymbol,
offset: '100%'
}, {
icon: dashedLineSymbol,
offset: '0',
repeat: '20px'
}],
map: map
});
animateCircle(line);
}
// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line) {
var count = 0;
window.setInterval(function() {
count = (count + 1) % 200;
var icons = line.get('icons');
icons[0].offset = (count / 2) + '%';
line.set('icons', icons);
}, 20);
}
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
update the style for google lineSymbol to following to make your line dotted.
var lineSymbol = {
path: 'M 0,-1 0,1',
strokeOpacity: 1,
scale: 4
};
How to remove Drawing layer menu options?
I am using the script below but I want remove the highlighted options in the image below.
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?v=3.21&sensor=false&libraries=drawing"></script>
I want these only, but the map shows more then three.
var RECTANGLE = google.maps.drawing.OverlayType.RECTANGLE;
var CIRCLE = google.maps.drawing.OverlayType.CIRCLE;
var POLYGON = google.maps.drawing.OverlayType.POLYGON;
remove highlighted option
You can't (easily) remove the hand (if you want to do that, you need to make your own custom control).
To only show the three you want, plus the hand, in the API control only include the ones you want in the drawingModes property of the drawingControlOptions for the map:
code snippet: (based off the example in the documentation)
// This example requires the Drawing library. Include the libraries=drawing // parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
});
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [google.maps.drawing.OverlayType.CIRCLE, google.maps.drawing.OverlayType.POLYGON, google.maps.drawing.OverlayType.RECTANGLE]
},
markerOptions: {
icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
drawingManager.setMap(map);
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing&callback=initMap" async defer></script>
Problem:
Adding multiple characters to markers using Google Maps API.
Minimal Working Example (MWA):
In the example below I map a line between two airports (PEK and FRA) but the markers don't seem to allow for multiple characters.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Polyline</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var flightPath;
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {lat: 39.782, lng: 116.387},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var flightPathCoordinates = [
{lat: 39.782, lng: 116.387},
{lat: 50.026, lng: 8.543}
];
var myPEK = {lat: 39.782, lng: 116.387};
var myFRA = {lat: 50.026, lng: 8.543};
flightPath = new google.maps.Polyline({
path: flightPathCoordinates,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
addLine();
var marker = new google.maps.Marker({
position: myPEK,
map: map,
label: 'PEK',
title: 'Beijing'
});
var marker = new google.maps.Marker({
position: myFRA,
map: map,
label: 'FRA',
title: 'Frankfurt'
});
}
function addLine() {
flightPath.setMap(map);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCrI9AcuDk0DxHVFjbAsSZz2DMm4zqsdCA&callback=initMap">
</script>
</body>
</html>
Desired output:
Get markers to work with multiple characters.
Add labels that allow for at least 3 characters.
Any other solution that would show the IATA code for the airports.
If you need a map Label you can use an extension library called google-maps utility libraries v3 map label ..
You can find the code at : https://github.com/googlemaps/js-map-label
add this library to your
aMapLabel = new MapLabel({
text: 'Your Text',
position: mapLabelCenter,
strokeColor: '#FFFFFF',
fontColor: '#FFFFFF',
map: map,
fontSize: 24,
strokeWeight: 0,
align: 'left'
});
marker.bindTo('map', aMapLabel);
marker.bindTo('position', aMapLabel);
or you can use also https://github.com/googlemaps/v3-utility-library/tree/master/markerwithlabel
These two are the better solution for manage label (or markers with label) in google maps
Working solution (not optimised):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<title>TravelTools Google Map</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://googlemaps.github.io/js-map-label/src/maplabel-compiled.js"></script>
<script>
var flightPath;
var map;
function init() {
var myLatlng = new google.maps.LatLng(39.782, 116.387);
var myOptions = {
zoom: 3,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var flightPathCoordinatesPEKFRA = [
{lat: 39.782, lng: 116.387},
{lat: 50.026, lng: 8.543}
];
var flightPathCoordinatesPEKCDG = [
{lat: 39.782, lng: 116.387},
{lat: 49.012, lng: 2.55}
];
flightPathPEKFRA = new google.maps.Polyline({
path: flightPathCoordinatesPEKFRA,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPathPEKCDG = new google.maps.Polyline({
path: flightPathCoordinatesPEKCDG,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
var map = new google.maps.Map(document.getElementById('map'), myOptions);
flightPathPEKFRA.setMap(map);
flightPathPEKCDG.setMap(map);
// PEK
var myPEK = new MapLabel({
text: 'PEK',
position: new google.maps.LatLng(39.782, 116.387),
map: map,
fontSize: 11,
align: 'center'
});
myPEK.set('position', new google.maps.LatLng(39.782, 116.387));
var marker = new google.maps.Marker();
marker.bindTo('map', myPEK);
marker.bindTo('position', myPEK);
// FRA
var myFRA = new MapLabel({
text: 'FRA',
position: new google.maps.LatLng(50.026, 8.543),
map: map,
fontSize: 11,
align: 'center'
});
myFRA.set('position', new google.maps.LatLng(50.026, 8.543));
var marker = new google.maps.Marker();
marker.bindTo('map', myFRA);
marker.bindTo('position', myFRA);
// CDG
var myCDG = new MapLabel({
text: 'CDG',
position: new google.maps.LatLng(49.012, 2.55),
map: map,
fontSize: 11,
align: 'center'
});
myCDG.set('position', new google.maps.LatLng(49.012, 2.55));
var marker = new google.maps.Marker();
marker.bindTo('map', myCDG);
marker.bindTo('position', myCDG);
marker.setDraggable(true);
}
google.maps.event.addDomListener(window, 'load', init);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
I'm drawing multiple radius circles on my map with the following code:
function drawRadius(size){
var circle = new google.maps.Marker({
position: map.getCenter(),
zIndex: 1,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: size,
strokeOpacity: 0.65,
strokeWeight: 4,
fillColor: '#FEFCF3',
fillOpacity: 0.08,
strokeColor: '#efe8b2'
},
map: map
});
}
This method is called multiple times with different size parameters, it results in the the following image:
Unfortunately, I can't move the map anymore, because - as far as I can tell - the events are now fired on the circles and not on the map.
How can I fix this? I just want to be able to normally drag/move the map.
Thank you!
If you don't need to click on the circles (markers), set clickable: false on them, that prevents the markers from receiving mouse events.
From the documentation:
clickable boolean If true, the marker receives mouse and touch events. Default value is true.
function drawRadius(size){
var circle = new google.maps.Marker({
position: map.getCenter(),
zIndex: 1,
clickable: false,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: size,
strokeOpacity: 0.65,
strokeWeight: 4,
fillColor: '#FEFCF3',
fillOpacity: 0.08,
strokeColor: '#efe8b2'
},
map: map
});
}
proof of concept fiddle
code snippet:
var geocoder;
var map;
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
for (var size = 100; size < 600; size += 100) {
drawRadius(size);
}
}
google.maps.event.addDomListener(window, "load", initialize);
function drawRadius(size) {
var circle = new google.maps.Marker({
position: map.getCenter(),
zIndex: 1,
clickable: false,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: size,
strokeOpacity: 0.65,
strokeWeight: 4,
fillColor: '#FEFCF3',
fillOpacity: 0.08,
strokeColor: '#000000'
},
map: map
});
}
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>