title: Google map not showing in php page
body: <p>I am implementing a google map in my webpage. On clicking a update button in index.php, I am showing a dialog box which contains google map for users to locate their location. Map is not showing properly. Please help me!</p>
  
  <p>My js:</p>
  
  <pre><code>if(!window.google||!window.google.maps){
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3&amp;' +
      'callback=initialize';
  document.body.appendChild(script);
  }
  else{
    initialize();
  }
  
  
   &lt;script&gt;
      var directionsDisplay,
      directionsService,
      map;
  
      function initialize() {
           var directionsService = new google.maps.DirectionsService();
          directionsDisplay = new google.maps.DirectionsRenderer();
          var chicago = new google.maps.LatLng(51.508742,-0.120850);
          var mapOptions = { zoom:3, mapTypeId: google.maps.MapTypeId.ROADMAP, center: chicago }
          map = new google.maps.Map(document.getElementById("googlemap"), mapOptions);
          var marker=new google.maps.Marker({
             position:chicago,
    });
          directionsDisplay.setMap(map);
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div name="mapdetail" value="" id="googlemap" style="width:350px;height:300px;"class="" &gt;
  </code></pre>
  
  <p></p>
  
  <p>The output:
  <a href="https://i.stack.imgur.com/XEhN8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XEhN8.png" alt="screenshot"></a></p>