A Pen by Mark Lvov

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Mark Lvov</title>
  <title>Place Autocomplete Address Form</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
<script type="text/javascript" src="http://аллое.рф/assets/mobileapp/js/jquery-1.10.1.min.js"></script>


  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="locationField">
      <input id="autocomplete" placeholder="Enter your address" type="text"></input>
</div>
  
  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/neverfan/a-pen-by-mark-lvov-OVQdBe */
html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
#locationField, #controls {
        position: relative;
        width: 480px;
      }
      #autocomplete {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 99%;
      }
      .label {
        text-align: right;
        font-weight: bold;
        width: 100px;
        color: #303030;
      }
      #address {
        border: 1px solid #000090;
        background-color: #f0f0ff;
        width: 480px;
        padding-right: 2px;
      }
      #address td {
        font-size: 10pt;
      }
      .field {
        width: 99%;
      }
      .slimField {
        width: 80px;
      }
      .wideField {
        width: 200px;
      }
      #locationField {
        height: 20px;
        margin-bottom: 2px;
      }


/*Downloaded from https://www.codeseek.co/neverfan/a-pen-by-mark-lvov-OVQdBe */
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.
$(document).ready(function(){
  initialize();
});
var placeSearch, autocomplete;

function initialize() {
var defaultBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(60.72, 29.58),
  new google.maps.LatLng(59.48, 30.95));
  
  autocomplete = new google.maps.places.Autocomplete((document.getElementById('autocomplete')),
{ 
    //types: ['address', 'airport', 'park', 'stadium'],
    types: ['geocode'],
    language: 'ru',
    componentRestrictions: {country: 'ru'},
    bounds: defaultBounds
 });

  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    var place = autocomplete.getPlace();
  $('#autocomplete').val(place.name);
  });
}

Comments