Issue with google.maps.event.trigger(map, “resize”) in jquery tabs

Question

I have a button named update details.On clicking the button a dialog is created which contains 3 tabs.In the third tab a field named map is there where users can select their location in map.I have 2 hidden fields which contain latitude and longitude of user stored in database.If the values are null,I need to show marker to their current location.My code is as follows.

<script>
$(document).ready(function(){
var directionsDisplay,
directionsService,
map;
$("#tabs").tabs({
     show: function(e, ui) {
        if (ui.index == 2) {
            google.maps.event.trigger(map, "resize");//for showing google  
                                                      //map in tabs
        }
    }
});

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&' +
    'callback=initialize';
   document.body.appendChild(script);
 }
 else{
   initialize();
 }
});
</script>


<script>

//var directionsDisplay,
//directionsService,
//map;

function initialize() {
   //var directionsService = new google.maps.DirectionsService();
   //directionsDisplay = new google.maps.DirectionsRenderer(); 
if(($("#latitude_val").val().length >3) ||   ($("#longitude_val").val().length>3))
 {
     var chicago =  new google.maps.LatLng($("#latitude_val").val(),   $("#longitude_val").val());  
 }
 else
   { 
      geocoder = new google.maps.Geocoder();
      geocoder.geocode( { 'address': 'Dubai internet city'}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK)
      {
          console.log("Latitude: "+results[0].geometry.location.lat());
          console.log("Longitude: "+results[0].geometry.location.lng());
      }
      else
      {
          console.log("Geocode was not successful for the following reason: " + status);
      }
            //console.log("latitude"+position.coords.latitude+'longitude='+position.coords.longitude);
      });
     }
    //chicago = new google.maps.LatLng(51.508742, -0.120850); 
     var mapOptions = { zoom:16, mapTypeId: google.maps.MapTypeId.ROADMAP, center: chicago }
     map = new google.maps.Map(document.getElementById("googlemap"), mapOptions);  
    var marker=new google.maps.Marker({
           position:chicago,
           map:map,
           draggable:true,
           animation: google.maps.Animation.DROP
     });
      marker.setMap(map);
         google.maps.event.addListener(
           marker,
           'drag',
            function() {
              document.getElementById('latitude_val').value = marker.position.lat();
              document.getElementById('longitude_val').value = marker.position.lng();
              console.log($("#latitude_val").val());
console.log($("#longitude_val").val());
    }

);
   //directionsDisplay.setMap(map);
  }
   function fail(){
     alert('navigator.geolocation failed, may not be supported');
  } 
  </script>

When I run this code,it showing the following error.

ReferenceError: google is not defined
google.maps.event.trigger(map, "resize");

Answer 1

You're calling google.maps.event.trigger before you've added the call to load the google maps javascript. Maybe just swap the two parts of what's going on in your document.ready

$(document).ready(function(){
    var directionsDisplay,
    directionsService,
    map;

    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&' +
        'callback=initialize';
       document.body.appendChild(script);
     }
     else{
       initialize();
     }

    $("#tabs").tabs({
         show: function(e, ui) {
            if (ui.index == 2) {
                google.maps.event.trigger(map, "resize");//for showing google  
                                                          //map in tabs
            }
        }
    });
});