utility
GoogleMap APIでマップに円を書く
最終更新日: 2023年4月15日
ちょっとした案件である施設から半径1kmの圏域を示す円をGoogleMapに書くことになった。
コメントアウトやアトリビュートは適当に。
<script async src="https://maps.googleapis.com/maps/api/js?v=3&key=APIキー&callback=initMap"></script>
<script>
function initMap() {
"use strict";
var mapData = { pos: { lat: 35.68202052460928, lng: 139.766953138637 }, zoom: 14 };
var mapPosition = {lat: 35.68202052460928, lng: 139.766953138637};
var mapArea = document.getElementById('gmap');
var mapOptions = {
center: mapPosition,
zoom: 14,
mapTypeControl: false,
fullscreenControl: false,
streetViewControl: false,
styles: [
{
featureType: 'all',
elementType: 'labels.icon',
stylers: [
{visibility: 'off'},
],
},
{
featureType: 'transit',
elementType: 'labels',
stylers: [
{visibility: 'on'},
],
},
{
featureType: 'poi.attraction',
elementType: 'labels.icon',
stylers: [
{visibility: 'inherit'},
],
},
{
featureType: 'poi.park',
elementType: 'labels.icon',
stylers: [
{visibility: 'inherit'},
],
},
/*
{
featureType: 'poi.buisiness',
elementType: 'labels.icon',
stylers: [
{visibility: 'inherit'},
],
},*/
{
featureType: 'road',
elementType: 'labels',
stylers: [
{visibility: 'on'},
],
},
],
};
var map = new google.maps.Map(mapArea, mapOptions);
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
var markerOptions = {
map: map,
position: mapPosition,
};
var marker = new google.maps.Marker(markerOptions);
var mapcircle1 = {
a: {
center: {lat: 35.68202052460928, lng: 139.766953138637},
radius: 1000
},
};
for (var point in mapcircle1) {
var Circle = new google.maps.Circle({
strokeColor: 'rgba(255,153,0,1)',
strokeOpacity: 0.65,
strokeWeight: 1,
// fillColor: '#FF0000',
fillOpacity: 0,
map: map,
center: mapcircle1[point].center,
radius: mapcircle1[point].radius
});
}
var mapcircle2 = {
a: {
center: {lat: 35.68202052460928, lng: 139.766953138637},
radius: 2000
},
};
for (var point in mapcircle2) {
var Circle = new google.maps.Circle({
strokeColor: 'rgba(103,73,39,1)',
strokeOpacity: 0.65,
strokeWeight: 1,
// fillColor: '#FF0000',
fillOpacity: 0,
map: map,
center: mapcircle2[point].center,
radius: mapcircle2[point].radius
});
}
var mapcircle3 = {
a: {
center: {lat: 35.68202052460928, lng: 139.766953138637},
radius: 3000
},
};
for (var point in mapcircle3) {
var Circle = new google.maps.Circle({
strokeColor: 'rgba(0,0,0,1)',
strokeOpacity: 0.65,
strokeWeight: 1,
// fillColor: '#FF0000',
fillOpacity: 0,
map: map,
center: mapcircle3[point].center,
radius: mapcircle3[point].radius
});
}
var mapcircle4 = {
a: {
center: {lat: 35.68202052460928, lng: 139.766953138637},
radius: 4000
},
};
for (var point in mapcircle4) {
var Circle = new google.maps.Circle({
strokeColor: 'rgba(0,0,0,1)',
strokeOpacity: 0.65,
strokeWeight: 1,
// fillColor: '#FF0000',
fillOpacity: 0,
map: map,
center: mapcircle4[point].center,
radius: mapcircle4[point].radius
});
}
var mapcircle5 = {
a: {
center: {lat: 35.68202052460928, lng: 139.766953138637},
radius: 5000
},
};
for (var point in mapcircle5) {
var Circle = new google.maps.Circle({
strokeColor: 'rgba(0,0,0,1)',
strokeOpacity: 0.65,
strokeWeight: 1,
// fillColor: '#FF0000',
fillOpacity: 0,
map: map,
center: mapcircle5[point].center,
radius: mapcircle5[point].radius
});
}
};
</script>