# How do I create a map with a proximate circumference? [closed]

Posted on

#### Question :

``````<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyDUZgjcLfmsJUX7oKmJhG_jqJK_gK0xkng"></script><bodyonload="initialize();">
<?php
\$output= json_decode(\$geocode);
if(\$output->status === 'ZERO_RESULTS'){
} else {
\$lat = \$output->results[0]->geometry->location->lat;
\$long = \$output->results[0]->geometry->location->lng;
?>
<script type="text/javascript">
var marker;
function initialize() {
var myLatlng = new google.maps.LatLng(<?php echo \$lat; ?>, <?php echo \$long; ?>);
var myOptions = {
zoom: 15,
center: myLatlng,
scrollwheel: false,
}
var map = new google.maps.Map(document.getElementById("mapa"), myOptions);
position: myLatlng,
map: map,
icon: "imagens/flag.png"
});
content: "<?php echo \$imovel->endereco; ?>"
});
infowindow.open(map,marker);
});
}
</script>
<?php } ?>
<div id="mapa"></div>
</body>
``````

The following example demonstrates this functionality:

``````function initialize() {
{
zoom: 13,
});

{
map: map,
radius: 1000, // 1000 metros = 1k.
strokeColor: "black",
fillColor: "white",
fillOpacity: 0.25,
});
}``````
``````<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script><bodyonload="initialize()">
<div id="map_canvas" style="height: 100vh; width:100vw"></div>
</body>``````

Basically you need to create a simple `Circle` , as shown on documentation , and set a value for the `radius` property. For 2km, you need to put 2000 which is equivalent to 2 thousand meters. See:

`````` var cityCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: {lat: -23.560362, lng: -46.587773},
});
``````

``````<!DOCTYPE html>
<html>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Circles</title>
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
}
</style>
<body>
<div id="map"></div>
<script>
var citymap = {
sampa: {
center: {lat: -23.560362, lng: -46.587773}
}
};

function initMap() {
// Cria o mapa
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: {lat: -23.560362, lng: -46.587773},
mapTypeId: 'terrain'
});

// Construct the circle for each value in citymap.
// Note: We scale the area of the circle based on the population.
for (var city in citymap) {
// Add the circle for this city to the map.
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: {lat: -23.560362, lng: -46.587773},