<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyDUZgjcLfmsJUX7oKmJhG_jqJK_gK0xkng"></script>
<body onload="initialize();">
<?php
$geocode=file_get_contents('http://maps.google.com/maps/api/geocode/json?address='.urlencode($imovel->endereco).'&sensor=false');
$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,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("mapa"), myOptions);
marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: "imagens/flag.png"
});
var infowindow = new google.maps.InfoWindow({
content: "<?php echo $imovel->endereco; ?>"
});
google.maps.event.addListener(marker, 'click', function(){
infowindow.open(map,marker);
});
}
</script>
<?php } ?>
<div id="mapa"></div>
</body>
-
3Qual a sua dificuldade neste código? Seria interessante editar a pergunta e fornecer mais detalhes.– user28595Commented 16/06/2017 às 14:25
-
No código em si não há nenhum erro. Porém não quero que o mapa tenha um ponto de localização específico, mas tenha um raio de mais ou menos 2 kg em volta da localização que será indicada.– Beatriz de AlmeidaCommented 16/06/2017 às 14:40
-
1Coloque essa explicação do comentário no texto da sua pergunta descrevendo o que você já tentou e se possível uma imagem do resultado final no mapa. Isso aumenta suas chances de resposta. Aproveite para corrigir a unidade de distância que parece ser "Km" =)– PagottiCommented 16/06/2017 às 17:14
-
Obrigada! Já havia tentado editar a pergunta e o meu comentário, mas não está editando :/– Beatriz de AlmeidaCommented 16/06/2017 às 17:46
-
O comentário você não conseguirá editar (depois de um tempo ele só pode ser apagado), já, a pergunta, esta pode ser editada clicando aqui.– DanielCommented 16/06/2017 às 18:18
|
Mostrar mais 1 comentário
2 Respostas
Basicamente você precisar criar um Circle
simples, como mostra na documentação, e definir um valor para a propriedade radius
. Para 2km, precisa colocar 2000 que é equivalente a 2 mil metros. Veja:
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},
radius: (2 * 1000)
});
<!DOCTYPE html>
<html>
<head>
<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;
padding: 0;
}
</style>
</head>
<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.
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},
radius: (1 * 1000)
});
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDfXgMUO82be1sHgJlXHdg4JkTgN7qtm-M&callback=initMap">
</script>
</body>
</html>
Você precisa adicionar um objeto do tipo google.maps.Circle.
O exemplo abaixo demonstra esta funcionalidade:
function initialize() {
var map = new google.maps.Map(document.getElementById("map_canvas"),
{
zoom: 13,
center: new google.maps.LatLng(-22.91711261458102, -43.16944599151611),
mapTypeId: google.maps.MapTypeId.SATELLITE
});
var circulo = new google.maps.Circle(
{
map: map,
center: new google.maps.LatLng(-22.91711261458102, -43.16944599151611),
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>
<body onload="initialize()">
<div id="map_canvas" style="height: 100vh; width:100vw"></div>
</body>