title: Yii: google map api(Place Autocomplete and Directions ) not working
body: <p>Hi i am a yiibie and i am trying to implement <code>Place Autocomplete and Directions(google map Api)</code>, for that i have obtained the google map Api and have also enabled <code>Google Maps Directions API, Google Maps JavaScript API, Google Places API Web Service</code>. When i implement the given code in my view file (which i have copied from here: <a href="https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-directions" rel="nofollow">https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-directions</a>) and run my project only a small part of the map appears on my screen for few seconds and then disappears. What could be the problem, here is the code of my view file.</p>
  
  <pre><code>&lt;?php
  /* @var $this NgoController */
  /* @var $model Ngo */
  /* @var $form BSActiveForm */
  ?&gt;
  
  &lt;?php $form=$this-&gt;beginWidget('bootstrap.widgets.BsActiveForm', array(
      'id'=&gt;'ngo-form',
      // Please note: When you enable ajax validation, make sure the corresponding
      // controller action is handling ajax validation correctly.
      // There is a call to performAjaxValidation() commented in generated controller code.
      // See class documentation of CActiveForm for details on this.
      'enableAjaxValidation'=&gt;false,
  )); ?&gt;
  
      &lt;p class="help-block"&gt;Fields with &lt;span class="required"&gt;*&lt;/span&gt; are required.&lt;/p&gt;
  
      &lt;?php echo $form-&gt;errorSummary($model); ?&gt;
  
      &lt;?php echo $form-&gt;textFieldControlGroup($model,'ngo_name',array('maxlength'=&gt;45)); ?&gt;
      &lt;?php echo $form-&gt;textFieldControlGroup($model,'email',array('maxlength'=&gt;45)); ?&gt;
      &lt;?php echo $form-&gt;textFieldControlGroup($model,'address',array('maxlength'=&gt;45)); ?&gt;
      &lt;?php echo $form-&gt;textFieldControlGroup($model,'image',array('maxlength'=&gt;45)); ?&gt;
  
      &lt;!--code for map starts here--&gt;
  
  
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Place Autocomplete&lt;/title&gt;
      &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;style&gt;
        html, body {
          height: 100%;
          margin: 0;
          padding: 0;
        }
        #map {
          height: 100%;
        }
  .controls {
    margin-top: 10px;
    border: 1px solid transparent;
    border-radius: 2px 0 0 2px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    height: 32px;
    outline: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  }
  
  #origin-input,
  #destination-input {
    background-color: #fff;
    font-family: Roboto;
    font-size: 15px;
    font-weight: 300;
    margin-left: 12px;
    padding: 0 11px 0 13px;
    text-overflow: ellipsis;
    width: 200px;
  }
  
  #origin-input:focus,
  #destination-input:focus {
    border-color: #4d90fe;
  }
  
  #mode-selector {
    color: #fff;
    background-color: #4d90fe;
    margin-left: 12px;
    padding: 5px 11px 0px 11px;
  }
  
  #mode-selector label {
    font-family: Roboto;
    font-size: 13px;
    font-weight: 300;
  }
  
  
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;input id="origin-input" class="controls" type="text"
          placeholder="Enter an origin location"&gt;
  
      &lt;input id="destination-input" class="controls" type="text"
          placeholder="Enter a destination location"&gt;
  
      &lt;div id="mode-selector" class="controls"&gt;
        &lt;input type="radio" name="type" id="changemode-walking" checked="checked"&gt;
        &lt;label for="changemode-walking"&gt;Walking&lt;/label&gt;
  
        &lt;input type="radio" name="type" id="changemode-transit"&gt;
        &lt;label for="changemode-transit"&gt;Transit&lt;/label&gt;
  
        &lt;input type="radio" name="type" id="changemode-driving"&gt;
        &lt;label for="changemode-driving"&gt;Driving&lt;/label&gt;
      &lt;/div&gt;
  
      &lt;div id="map"&gt;&lt;/div&gt;
  
      &lt;script&gt;
  function initMap() {
    var origin_place_id = null;
    var destination_place_id = null;
    var travel_mode = google.maps.TravelMode.WALKING;
    var map = new google.maps.Map(document.getElementById('map'), {
      mapTypeControl: false,
      center: {lat: -33.8688, lng: 151.2195},
      zoom: 13
    });
    var directionsService = new google.maps.DirectionsService;
    var directionsDisplay = new google.maps.DirectionsRenderer;
    directionsDisplay.setMap(map);
  
    var origin_input = document.getElementById('origin-input');
    var destination_input = document.getElementById('destination-input');
    var modes = document.getElementById('mode-selector');
  
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(origin_input);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(destination_input);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(modes);
  
    var origin_autocomplete = new google.maps.places.Autocomplete(origin_input);
    origin_autocomplete.bindTo('bounds', map);
    var destination_autocomplete =
        new google.maps.places.Autocomplete(destination_input);
    destination_autocomplete.bindTo('bounds', map);
  
    // Sets a listener on a radio button to change the filter type on Places
    // Autocomplete.
    function setupClickListener(id, mode) {
      var radioButton = document.getElementById(id);
      radioButton.addEventListener('click', function() {
        travel_mode = mode;
      });
    }
    setupClickListener('changemode-walking', google.maps.TravelMode.WALKING);
    setupClickListener('changemode-transit', google.maps.TravelMode.TRANSIT);
    setupClickListener('changemode-driving', google.maps.TravelMode.DRIVING);
  
    function expandViewportToFitPlace(map, place) {
      if (place.geometry.viewport) {
        map.fitBounds(place.geometry.viewport);
      } else {
        map.setCenter(place.geometry.location);
        map.setZoom(17);
      }
    }
  
    origin_autocomplete.addListener('place_changed', function() {
      var place = origin_autocomplete.getPlace();
      if (!place.geometry) {
        window.alert("Autocomplete's returned place contains no geometry");
        return;
      }
      expandViewportToFitPlace(map, place);
  
      // If the place has a geometry, store its place ID and route if we have
      // the other place ID
      origin_place_id = place.place_id;
      route(origin_place_id, destination_place_id, travel_mode,
            directionsService, directionsDisplay);
    });
  
    destination_autocomplete.addListener('place_changed', function() {
      var place = destination_autocomplete.getPlace();
      if (!place.geometry) {
        window.alert("Autocomplete's returned place contains no geometry");
        return;
      }
      expandViewportToFitPlace(map, place);
  
      // If the place has a geometry, store its place ID and route if we have
      // the other place ID
      destination_place_id = place.place_id;
      route(origin_place_id, destination_place_id, travel_mode,
            directionsService, directionsDisplay);
    });
  
    function route(origin_place_id, destination_place_id, travel_mode,
                   directionsService, directionsDisplay) {
      if (!origin_place_id || !destination_place_id) {
        return;
      }
      directionsService.route({
        origin: {'placeId': origin_place_id},
        destination: {'placeId': destination_place_id},
        travelMode: travel_mode
      }, function(response, status) {
        if (status === google.maps.DirectionsStatus.OK) {
          directionsDisplay.setDirections(response);
        } else {
          window.alert('Directions request failed due to ' + status);
        }
      });
    }
  }
  
      &lt;/script&gt;
      &lt;script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAtvEXUyjEkGlAVhwVm9Nr-hCrW2L2MkmU&amp;signed_in=true&amp;libraries=places&amp;callback=initMap"
          async defer&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  
  
  
      &lt;?php echo BsHtml::submitButton('Submit', array('color' =&gt; BsHtml::BUTTON_COLOR_PRIMARY)); ?&gt;
  
  &lt;?php $this-&gt;endWidget(); ?&gt;
  </code></pre>