2

Google Place Autocomplete with Map

This documentation is designed for people familiar with JavaScript programming and object-oriented programming concepts. You should also be familiar with Google Maps from a user’s point of view. There are many JavaScript tutorials available on the Web.

This conceptual documentation is designed to let you quickly start exploring and developing applications with the Google Maps JavaScript API. Google also publish the Google Maps JavaScript API Reference.

 

 

Google Map & Autocomplete for Addresses and Search

Google Map & Autocomplete for Addresses and Search

Even in this simple example, there are a few things to note:

  1. We declare the application as HTML5 using the <!DOCTYPE html> declaration.
  2. We create a div element named “map” to hold the Map.
  3. We define a JavasScript function that creates a map in the div.
  4. We load the Maps JavaScript API using a script tag.

Libraries

When loading the Maps JavaScript API via the URL you may optionally load additional libraries through use of the libraries URL parameter. Libraries are modules of code that provide additional functionality to the main Maps JavaScript API but are not loaded unless you specifically request them. For more information, see Libraries in the Maps JavaScript API.

Synchronously Loading the API

In the script tag that loads the Maps JavaScript API, it is possible to omit the async attribute and the callback parameter. This will cause the loading of the API to block until the API is downloaded.

This will probably slow your page load. But it means you can write subsequent script tags assuming that the API is already loaded.

Map DOM Elements

For the map to display on a web page, we must reserve a spot for it. Commonly, we do this by creating a named div element and obtaining a reference to this element in the browser’s document object model (DOM).

In the example above, we used CSS to set the height of the map div to “100%”. This will expand to fit the size on mobile devices. You may need to adjust the width and height values based on the browser’s screensize and padding. Note that divs usually take their width from their containing element, and empty divs usually have 0 height. For this reason, you must always set a height on the <div> explicitly.

Map Options

There are two required options for every map: center and zoom.

Zoom Levels

The initial resolution at which to display the map is set by the zoom property, where zoom 0 corresponds to a map of the Earth fully zoomed out, and larger zoom levels zoom in at a higher resolution.

index.html

Google Map & Location Autocomplete

Google Map & Location Autocomplete

autocomplete.js

Google Map Marker

Google Map Marker

google-map-marker.js

 

Save

 

Prakash S

Prakash S

I would like to introduce myself as a Software professional opting for the career in software industry. I'm Prakash S, a MCA graduate and trained as industry level practice for Software technology. Basically I am a PHP Developer but now days exploring more in HTML5, CSS, AngularJS and jQuery libraries.


  • Jimmy

    Hello, I read your blog regularly. Your writing style is awesome, keep up the good work!