A Pen by Lokesh Suthar

Thumbnail
This awesome code was written by magnus16, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright magnus16 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Lokesh Suthar</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <script src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false&callback=initMap"
    async defer></script>                  
<input type="text" id="input--search-location" class="form-control" placeholder="Try searching for a place..." />
<button id ="logbtn">log</button>
<div id="gmap"></div>                <h4 id="label--sa-radius"></h4>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/magnus16/a-pen-by-lokesh-suthar-MmzNPO */
 #gmap {
        height: 500px;
    }
    #label--sa-radius {
        margin-bottom: 0;
    }

/*Downloaded from https://www.codeseek.co/magnus16/a-pen-by-lokesh-suthar-MmzNPO */
var map, serviceAreaCircle, autocomplete, mapInit = false;
var g;
function initMap() {
  var mapOptions = {
    
    center: new google.maps.LatLng(19.07752136261317,72.82200592760614),
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    streetViewControl: false
  };
  //these are the input ids on the original form corresponding to autocomplete details
  var componentForm = {
    locality: "long_name",
    administrative_area_level_1: "long_name",
    country: "long_name",
    postal_code: "long_name"
  };
  map = new google.maps.Map(document.getElementById("gmap"), mapOptions);
g= google;
  serviceAreaCircle = new google.maps.Circle({
    strokeColor: "#FF0000",
    strokeOpacity: 0,
    strokeWeight: 2,
    fillColor: "#3498db",
    fillOpacity: 0.35,
    map: map,
    center: map.getCenter(),
    radius: 20647,
    draggable: true,
    editable: true
  });

  google.maps.event.addListener(
    serviceAreaCircle,
    "radius_changed",
    function() {
      $("#label--sa-radius").text(
        "Radius: " + this.getRadius().toFixed(0) + " mtrs"
      );
    }
  );

  var address = document.getElementById("input--search-location");
  var autocomplete = new google.maps.places.Autocomplete(address);
  autocomplete.setTypes(["geocode"]);
  google.maps.event.addListener(autocomplete, "place_changed", function() {
    map.setCenter(autocomplete.getPlace().geometry.location);
    serviceAreaCircle.setCenter(autocomplete.getPlace().geometry.location);
  });
}

$("#logbtn").on("click", function() {
  var btn = $(this),
    serviceAreaId = $("#input--servicearea-id").val(),
    lat = serviceAreaCircle.getCenter().lat(),
    lng = serviceAreaCircle.getCenter().lng(),
    radius = serviceAreaCircle.getRadius().toFixed(0);
  $("#label--sa-radius").after(
    "<h4>Latitude=" + lat + ",  Longitude=" + lng + "  ,RadiusInMeters=" + radius + "<h4>"
  );
});

Comments