Google Places API Parsing

Developer
Tom Markart
Size
3,357 Kb
Views
18,216
  1. Google Places API Parsing Previews
  2. Google Places API Parsing HTML Codes
  3. Google Places API Parsing CSS Codes
  4. Google Places API Parsing JS Codes

How do I make an google places api parsing?

What is a google places api parsing? How do you make a google places api parsing? This script and codes were developed by Tom Markart on 04 December 2022, Sunday.

Google Places API Parsing Previews
IQ Test

Google Places API Parsing - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Google Places API Parsing</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://www.buildersmutual.com/css/bmico6.css'>
<link rel='stylesheet prefetch' href='https://7e22b7a7096a4cf18619fd5b1e3498dd.production.codepen.plumbing/css/less/presentation.processed.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>
<body>
<form action="#" id="fnol-form-auto-03" method="post" name="fnol-form-auto-03"> <h3 class="element-spacing-sm">Witness Information</h3> <div id="locationField" class="form-group"> <label for="accident-address">Address</label> <input type="text" name="autocomplete" id="autocomplete" class="form-control required" placeholder="" onFocus="geolocate()"></input> <!-- address field pased into two separate fields --> <input type="hidden" name="street_number" id="street_number" class="form-control required width-10" /> <input type="hidden" name="route" id="route" class="form-control required" /> </div> <div class="form-group"> <label for="accident-city">City</label> <input type="text" name="accident-city" id="locality" class="form-control required" /> </div> <div class="form-group"> <label for="accident-state">State</label> <select name="accident-state" id="administrative_area_level_1" class="form-control required"> <option selected="selected" value=""></option> <option value="DC">District of Columbia</option> <option value="FL">Florida</option> <option value="GA">Georgia</option> <option value="MD">Maryland</option> <option value="MS">Mississippi</option> <option value="NC">North Carolina</option> <option value="SC">South Carolina</option> <option value="TN">Tennessee</option> <option value="VA">Virginia</option> </select> </div> <div class="form-group"> <label for="accident-zip">Zip Code</label> <input type="text" name="accident-zip" id="postal_code" class="form-control required width-10" /> </div>
</form>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCGmV8yTddvqBDF3wDhftpqsY1muhI1tGo&libraries=places&callback=initAutocomplete" async defer></script>
</body>
</html> <script src="js/index.js"></script>
</body>
</html>

Google Places API Parsing - Script Codes CSS Codes

body { margin: 50px;
}

Google Places API Parsing - Script Codes JS Codes

// This example displays an address form, using the autocomplete feature of the Google Places API to help users fill in the information.
// This example requires the Places library. Include the libraries=places parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
var placeSearch, autocomplete;
var componentForm = { street_number: 'short_name', // street number route: 'long_name', //street name locality: 'long_name', // city administrative_area_level_1: 'short_name', // state //country: 'long_name', // country postal_code: 'short_name' //zip code
};
function initAutocomplete() { // Create the autocomplete object, restricting the search to geographical location types. autocomplete = new google.maps.places.Autocomplete( /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')), {types: ['geocode']}); // When the user selects an address from the dropdown, populate the address fields in the form. autocomplete.addListener('place_changed', fillInAddress);
}
function fillInAddress() { // Get the place details from the autocomplete object. var place = autocomplete.getPlace(); for (var component in componentForm) { document.getElementById(component).value = ''; document.getElementById(component).disabled = false; } // Get each component of the address from the place details and fill the corresponding field on the form. for (var i = 0; i < place.address_components.length; i++) { var addressType = place.address_components[i].types[0]; if (componentForm[addressType]) { var val = place.address_components[i][componentForm[addressType]]; document.getElementById(addressType).value = val; } }
}
// Bias the autocomplete object to the user's geographical location, as supplied by the browser's 'navigator.geolocation' object.
function geolocate() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var geolocation = { lat: position.coords.latitude, lng: position.coords.longitude }; var circle = new google.maps.Circle({ center: geolocation, radius: position.coords.accuracy }); autocomplete.setBounds(circle.getBounds()); }); }
}
Google Places API Parsing - Script Codes
Google Places API Parsing - Script Codes
Home Page Home
Developer Tom Markart
Username tmarkart
Uploaded December 04, 2022
Rating 3
Size 3,357 Kb
Views 18,216
Do you need developer help for Google Places API Parsing?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tom Markart (tmarkart) Script Codes
Name
Story Detail - expand secondary asset inline
Story Card Expand Details
BMIC - Claim Form UI
CSS truncation with ellipsis
Select2
Slide out nav
McClatchy svg logos
Template - responsive story detail
Election static page
Story Detail 1.0
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!