/src
YOUR_API_KEY
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization"></script>
app.js
const apiKey = 'YOUR_API_KEY';
$ python -m SimpleHTTPServer 8000
{ "geometry": { "type": "Point", "coordinates": [-0.1428115, 51.5125168 ] }, "type": "Feature", "properties": { "category": "patisserie", "hours": "10am - 6pm", "description": "Modern twists on classic pastries. We're part of a larger chain of patisseries and cafes.", "name": "Josie's Patisserie Mayfair", "phone": "+44 20 1234 5678", "storeid": "01" } }
{
"geometry": {
"type": "Point",
"coordinates": [-0.1428115,
51.5125168
]
},
"type": "Feature",
"properties": {
"category": "patisserie",
"hours": "10am - 6pm",
"description": "Modern twists on classic pastries. We're part of a larger chain of patisseries and cafes.",
"name": "Josie's Patisserie Mayfair",
"phone": "+44 20 1234 5678",
"storeid": "01"
}
geometry
coordinates
properties
initMap
lat:
lng:
function initMap() { // Create the map. const map = new google.maps.Map(document.getElementById('map'), { zoom: 7, center: {lat: 52.632469, lng: -1.689423}, });
function initMap() {
// Create the map.
const map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {lat: 52.632469, lng: -1.689423},
});
const input = document.createElement('input'); const options = { types: ['address'], componentRestrictions: {country: 'gb'}, fields: ['address_components', 'geometry', 'name'], }; const autocomplete = new google.maps.places.Autocomplete(input, options);
const input = document.createElement('input');
const options = {
types: ['address'],
componentRestrictions: {country: 'gb'},
fields: ['address_components', 'geometry', 'name'],
};
const autocomplete = new google.maps.places.Autocomplete(input, options);
fields
index.html
<div id="map"></div>
<script>
stores.json
