How do I display a map with a proximation circumference?

Asked

Viewed 1,865 times

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

google-maps maps-javascript-api angular-google-maps
  • 3

    What is your difficulty in this code? It would be interesting to edit the question and provide more details.

  • In the code itself there is no error. But I don’t want the map to have a specific location, but it has a radius of about 2 kg around the location that will be indicated.

  • 1

    Put this comment explanation in the text of your question describing what you have already tried and if possible an image of the final result on the map. This increases your chances of response. Take the opportunity to fix the drive distance that seems to be "Km" =)

  • Thanks! I had already tried to edit the question and my comment, but is not editing :/

  • The comment you will not be able to edit (after a while it can only be deleted), already, the question, this can be edited by clicking here.

  • Your image made the question clear @Beatriz, but did you try something that could strengthen your question? A code or some example. Welcome to Stackoverflow, I recommend reading on tour to understand a little more how the site works.

Show 1 more comment

2 answers

4

Basically you need to create a Circle simple, as it shows in the documentation, and set a value for the property radius. 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},
            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


You need to add an object of the type google.maps.Circle.

The example below demonstrates this feature:

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>

Browser other questions tagged google-maps maps-javascript-api angular-google-maps

You are not signed in. Login or sign up in order to post.