Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I am trying to put textbox within the infowindow which is working fine in order to get direction and route. And now i want to make textbox autocomplete for google api places. I have ref this link "autocomplete in google api for places": I am trying to put autocomplete in google API V3 but some error of a is null {main,places}.js following are my code: Find way #directions-panel { height: 100%; float: right; width: 390px; overflow: auto; }

  #map-canvas {
    margin-right: 400px;

  #control {
    background: #fff;
    padding: 5px;
    font-size: 14px;
    font-family: Arial;
    border: 1px solid #ccc;
    box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
    display: none;

  @media print {
    #map-canvas {
      height: 500px;
      margin: 0;

    #directions-panel {
      float: none;
      width: auto;
<script type="text/javascript" src=""></script>
<script type="text/javascript">
  var directionDisplay;

  var directionsService = new google.maps.DirectionsService();
  var myLatlng = new google.maps.LatLng(17.539405168731662,73.89980615615843);
   var input = document.getElementById('start');
  var windowText='<table border=0><br>'+
  '<tr><td colspan="2"><b>Direction To ME</b></tr>'+
  '<tr><td width="350">&nbsp; <b>From :</b>&nbsp;'+'<input type="text" id="start" size="30" onchange="calcRoute();" /></td></tr>'+
  '<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>To :</b>&nbsp;Dadar, Mumbai</td><td rowspan="2" valign="bottom"><img src="hcg.png"/></td></tr></table>';
  function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var myOptions = {
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControlOptions: {
  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
      center: new google.maps.LatLng(18.539405168731662,73.89980615615843)

    var map = new google.maps.Map(document.getElementById('map_canvas'),

    var infowindow = new google.maps.InfoWindow({
    content: windowText,
    maxWidth: 500

     var marker = new google.maps.Marker({
position: myLatlng,
    map: map,
title:"My Marker"

}); /Auto complete/

    var autocomplete = new google.maps.places.Autocomplete(input);

    autocomplete.bindTo('bounds', map);
  var control = document.getElementById('control'); = 'block';

    google.maps.event.addListener(autocomplete, 'place_changed', function() {
        var place = autocomplete.getPlace();



  function calcRoute() {
    var start = document.getElementById('start').value;
    var end = "Dadar, Mumbai";
    var request = {
      origin: start,
      destination: end,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {

  google.maps.event.addDomListener(window, 'load', initialize);

Start:</strong> End:</strong> -->

can any one please tell me weather i am going right. and what correction i need to do for same.

share|improve this question

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.