3
<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>

inserir a descrição da imagem aqui

6
  • 3
    Qual a sua dificuldade neste código? Seria interessante editar a pergunta e fornecer mais detalhes.
    – user28595
    Commented 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. Commented 16/06/2017 às 14:40
  • 1
    Coloque 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" =)
    – Pagotti
    Commented 16/06/2017 às 17:14
  • Obrigada! Já havia tentado editar a pergunta e o meu comentário, mas não está editando :/ Commented 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.
    – Daniel
    Commented 16/06/2017 às 18:18

2 Respostas 2

4

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>

3

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>

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .