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

<div id="map"></div>

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.

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8
});

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.

zoom: 8

index.html

<html>    
    <head>
        <title>Google Location Search</title>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
    </head>
    <body><br />
        <input id="searchTextField" type="text" size="50"/>
        <div id="output"></div><br /><br />     
        <div id="map" style="width: 500px;height: 400px;"></div> 
    </body>
</html>
<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="js/autocomplete.js"></script>
<script type="text/javascript" src="js/google-map-marker.js"></script>
Google Map & Location Autocomplete

Google Map & Location Autocomplete

autocomplete.js

    var map;
    
    //-----------------------GOOGLE AUTOCOMPLETE PLACE SEARCH------------------------//
    
    function initialize() {    
        var input = document.getElementById('searchTextField');        
        var autocomplete = new google.maps.places.Autocomplete(input);
        
        google.maps.event.addListener(autocomplete, 'place_changed', function() {
              var place = autocomplete.getPlace();
              var lat = place.geometry.location.lat();
              var lng = place.geometry.location.lng();
              var formatted_address = place.formatted_address;
              document.getElementById("output").innerHTML = "Lat: "+lat+"<br />Lng: "+lng+"<br/>Address: " + formatted_address;
              generateGEO(lat, lng, formatted_address);
           }
        );
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    
    //---------------------LOAD MAP IN MAP_CANVAS CONTAINER---------------------------//
    
    function loadMap(lat, lng) {  
        
        var deffaultCenter = new google.maps.LatLng(lat, lng)
        var mapOptions = {
           zoom: 3, 
           center: deffaultCenter ,
           panControl:false,
           zoomControl:true,
           mapTypeControl:false,
           scaleControl:false,
           streetViewControl:false,
           overviewMapControl:false,
           rotateControl:false,  
           scrollwheel: false,
           draggable: true,	
       }
       map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
   }
   google.maps.event.addDomListener(window, 'load', loadMap(51.5072, 0.1275));
    
   //-------------------ADD LOCATION POINTER DYNAMICALLY IN MAP--------------------------//
       
   function generateGEO(lat, lng, address) {
    
        loadMap(lat, lng)
        
        var latlng = new google.maps.LatLng(lat, lng);
        var iconImg = "map-marker.png";
        var marker_size = new google.maps.Size(15,20);
        var anchor_point = new google.maps.Point(20, 40);
        
        var iconImg = new SVGMarker({
                     map: map,
                     position: latlng,
                     icon: {
                       anchor: anchor_point,
                       size: marker_size,
                       url: iconImg
                     }
                  })

      var marker = new google.maps.Marker({ map: map, title: address, icon: iconImg });
            
      markers.push(marker);
   }
   
   //---------------------------------------------------------------------------------------//
Google Map Marker

Google Map Marker

google-map-marker.js

SVGMarker.prototype = new google.maps.OverlayView();

/** @constructor */
function SVGMarker(options) {
  var default_ = {
    icon: {
      anchor: new google.maps.Point(0, 0),
      size: new google.maps.Size(40, 300),
      url: ''
    },
    map: '',
    opacity: 1,
    position: '',
    title: '',
    visible: true,
    zindex: ''
  }

  // Merge options with default
  for(var key in options) {
    if(typeof default_[key] === 'object') {
      for(var key2 in options[key]) {
        console.log(key, key2);
        if(options[key].hasOwnProperty(key2)) {
          default_[key][key2] = options[key][key2];
        }
      }
    } else {
      console.log(key);
      if(options.hasOwnProperty(key)) {
        default_[key] = options[key];
      }
    }
  }
  this.options_ = default_;

  // Define div container
  this.div_ = null;

  // Explicitly call setMap on this overlay
  if('map' in options) {
    this.setMap(options.map);
  }
}

/**
 * onAdd is called when the map's panes are ready and the overlay has been
 * added to the map.
 */
SVGMarker.prototype.onAdd = function() {
  var self = this;

  // Create container with no visible styles
  this.div_ = document.createElement('div');
  this.div_.style.border = 'none';
  this.div_.style.borderWidth = '0px';
  this.div_.style.position = 'absolute';

  // Set if marker is visible when added
  if(this.options_.visible === false) {
    this.div_.style.visibility = 'hidden';
  }

  // Set marker opacity
  if(this.options_.opacity >= 0 && this.options_.opacity <= 1) {
    this.div_.style.opacity = this.options_.opacity;
  }

  // Add click event to container
  if(this.options_.clickable === true) {
    google.maps.event.addDomListener(this.div_, 'click', function() {
      google.maps.event.trigger(self, 'click');
    });
  }

  // Add drag start and end to container
  if(this.options_.draggable === true) {
    // TODO: Add draggable
  }

  // Create the img element
  var img = document.createElement('img');
  img.src = this.options_.icon.url;
  img.style.width = this.options_.icon.size.width+'px';
  img.style.height = this.options_.icon.size.height+'px';
  img.setAttribute('alt', this.options_.title);

  // Attach image to div
  this.div_.appendChild(img);

  // Add the element to the "overlayImage" pane.
  var panes = this.getPanes();
  panes.overlayImage.appendChild(this.div_);
};

SVGMarker.prototype.draw = function() {
  var overlayProjection = this.getProjection();
  var coords = overlayProjection.fromLatLngToDivPixel(this.options_.position);

  console.log(this.options_);
  this.div_.style.left = (coords.x - this.options_.icon.anchor.x) + 'px';
  this.div_.style.top = (coords.y - this.options_.icon.anchor.y) + 'px';

  this.div_.style.cursor = 'pointer'; // TODO: Only set this if clickable. Change if draggable.
};

SVGMarker.prototype.onRemove = function() {
  this.div_.parentNode.removeChild(this.div_);
  this.div_ = null;
};

// Set the visibility to 'hidden' or 'visible'.
SVGMarker.prototype.hide = function() {
  if (this.div_) {
    // The visibility property must be a string enclosed in quotes.
    this.div_.style.visibility = 'hidden';
  }
};

SVGMarker.prototype.show = function() {
  if (this.div_) {
    this.div_.style.visibility = 'visible';
  }
};

SVGMarker.prototype.toggle = function() {
  if (this.div_) {
    if (this.div_.style.visibility === 'hidden') {
      this.show();
    } else {
      this.hide();
    }
  }
};

// Detach from map
SVGMarker.prototype.toggleDOM = function() {
  if (this.getMap()) {
    // Note: Calls onRemove()
    this.setMap(null);
  } else {
    // Note: Calls onAdd()
    this.setMap(this.options_.map);
  }
};

 



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.