title: Google Maps api not loading until refreshed JQM
body: <p>before you read my question I just want to say that I am very new to coding and I am here to learn from positive feedback. I have been on this site many times before and often see people making unnecessary negative comments. I know my code may be sloppy or unprofessional but I am still learning so please don't rip me apart. My focus is to learn from this community and other coders.</p>
  
  <p>I am using JQM and my problem is that and whenever I click to load this page from my home page the map does not load until I refresh the page. I am aware that this issue has been resolved before but I tried the solutions from many other posts that had the same error as me but none of the solutions worked. This has been a problem I have been trying to fix for some time now and really wanted to be able to fix it myself. But after putting in countless hours of trying to resolve the issue I am at a loss. My map gets the users location, then once a search is made it puts down markers in locations that are listed in my database (ideally the markers would load when the map loads). I also have a results box that is suppose to find the locations near the users current position (this aspect I am still having trouble with but I will resolve that later). </p>
  
  <p>My main focus is just to get my map to load so I do not have to refresh the page.</p>
  
  <p>Thank you for your time in advance it is greatly appreciated. </p>
  
  <p>Here is my current code. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;   
  &lt;style&gt;
      
      
      
        html {
          width: 100vw;
           background-color:#e67e22;
         }
         
         body {       
         padding-top: 3vh;
         
         }
         
            
        #map-canvas {
               position: relative;
         width: 90vw;
         height: 400px;
        margin-left: 10px;
              }
  
        .controls {
         margin-top: 16px;
         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);
                  }
  
        #pac-input {
          background-color: #fff;
          padding: 0 11px 0 13px;
          width: 400px;
          font-family: Roboto;
          font-size: 15px;
          font-weight: 300;
          text-overflow: ellipsis;
        }
  
        #pac-input:focus {
          border-color: #4d90fe;
          margin-left: -1px;
          padding-left: 14px;  /* Regular padding-left + 1. */
          width: 401px;
        }
  
        .pac-container {
          font-family: Roboto;
        }
  
        #type-selector {
          color: #fff;
          background-color: #4d90fe;
          padding: 5px 11px 0px 11px;
        }
  
        #type-selector label {
          font-family: Roboto;
          font-size: 13px;
          font-weight: 300;
        }
        
        #target {
          width: 345px;
        }
       
        #search {
        position: relative;
      
         }
       
        #home{
        background-color: #16a085;
        margin-left: 3vw;
        margin-right: 3vw;
        }
       
        #more {
          width: 100%;
          margin: 5px 0 0 0;
        }
  
         #listarea {
          font-family: 'Lucida Bright', Georgia, serif;
   font-size: 12px;
   position: relative;
          width: 80vw;
          height: 40vh;
          margin-left:5%;
          z-index: 5;
          background: #fff;
          border: 8px groove #6ADA6A;
        }
  
        
         #topfont { 
          background-color: #ffffff;
          font-family: 'Lucida Bright', Georgia, serif;
   font-size: 18px;
   font-style: normal;
   font-variant: normal;
   font-weight: 500;
   line-height: 26.3999996185303px;
   text-align:center;
         }
         
         div.logo {
         content:url(img/merge.png);
          position: relative;        
         width: 100%;
         height: 100%;
         }
        
        
        
      &lt;/style&gt;
     
      
      &lt;script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDjFCjdz-jvzIwtNyPF2Atluj_72vVGKvM&amp;libraries=places"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
   
  
    function makeRequest(url, callback) {
    
        var request;
    
        if (window.XMLHttpRequest) {
            request = new XMLHttpRequest(); // IE7+, Firefox, Chrome, Opera, Safari
        } else {
            request = new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5
        }
        request.onreadystatechange = function() {
            if (request.readyState == 4 &amp;&amp; request.status == 200) {
                callback(request);
            }
        }
        request.open("GET", url, true);
        request.send();
    }
    
    &lt;/script&gt;
       
       &lt;script type="text/javascript"&gt;
       
       
    
    // This example adds a search box to a map, using the Google Place Autocomplete
    // feature. People can enter geographical searches. The search box will return a
    // pick list containing a mix of places and predicted search terms.
    
    function initialize() {
        infowindow = new google.maps.InfoWindow(); 
      var initialLocation;
   
    
      var markers = [];
      var map = new google.maps.Map(document.getElementById('map-canvas'), {
        mapTypeId: google.maps.MapTypeId.ROADMAP
        
      });
    
      var defaultBounds = new google.maps.LatLngBounds(
          new google.maps.LatLng(-33.8902, 151.1759),
          new google.maps.LatLng(-33.8474, 151.2631));
      map.fitBounds(defaultBounds);
      
      
      var options = {enableHighAccuracy: true};
  
      
      if(navigator.geolocation) {
      var options = {enableHighAccuracy: true};
        browserSupportFlag = true;
        navigator.geolocation.getCurrentPosition(function(position, options) {
          initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
          map.setCenter(initialLocation);
        }, function() {
          handleNoGeolocation(browserSupportFlag);
        });
      }
      // Browser doesn't support Geolocation
      else {
        browserSupportFlag = false;
        handleNoGeolocation(browserSupportFlag);
      }
    
      function handleNoGeolocation(errorFlag) {
        if (errorFlag == true) {
          alert("Geolocation service failed, Please enable Geolocation on your browser or device.");
          initialLocation = defaultBounds;
        } else {
          alert("Please enable Geolocation on your browser or device");
          initialLocation = defaultBounds;
        }
        map.setCenter(initialLocation);
      }
    
      // Create the search box and link it to the UI element.
      var input = /** @type {HTMLInputElement} */(
          document.getElementById('pac-input'));
      map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
    
      var searchBox = new google.maps.places.SearchBox(
        /** @type {HTMLInputElement} */(input));
    
      // [START region_getplaces]
      // Listen for the event fired when the user selects an item from the
      // pick list. Retrieve the matching places for that item.
      google.maps.event.addListener(searchBox, 'places_changed', function() {
        var places = searchBox.getPlaces();
    
        
          if (places.length == 0) {
          return;
        }
        for (var i = 0, marker; marker = markers[i]; i++) {
          marker.setMap(null);
    
        }
    
    
        var content =   '&lt;div class="infoWindow"&gt;&lt;strong&gt;'  + location.name + '&lt;/strong&gt;'
                        + '&lt;br/&gt;'     + location.address
                        + '&lt;br/&gt;'     + location.description + '&lt;/div&gt;';
    
        // For each place, get the icon, place name, and location.
        markers = [];
        var bounds = new google.maps.LatLngBounds();
        for (var i = 0, place; place = places[i]; i++) {
          var image = {
            url: '/img/marker.png',
            size: new google.maps.Size(71, 71),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(17, 34),
            scaledSize: new google.maps.Size(25, 25)
          };
    
     function displayLocation(location) {
    var geocoder= new google.maps.Geocoder();
    
             
        var content =   '&lt;div class="infoWindow"&gt;&lt;strong&gt;'  + location.name + '&lt;/strong&gt;'
                        + '&lt;br/&gt;'     + location.address
                        + '&lt;br/&gt;'     + location.description + '&lt;/div&gt;';
         
        if (parseInt(location.lat) == 0) {
            geocoder.geocode( { 'address': location.address }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                     
                    var iconBase = '/img/marker.png';
                    var marker = new google.maps.Marker({
                        map: map, 
                        size: new google.maps.Size(71, 71),
                        icon: iconBase,
                        position: results[0].geometry.location,
                        title: location.name
                    });
                     
                    google.maps.event.addListener(marker, 'click', function() {
                        infowindow.setContent(content);
                        infowindow.open(map,marker);
                    });
                }
            });
        } else {
            var position = new google.maps.LatLng(parseFloat(location.lat), parseFloat(location.lon));
    
            var iconBase = '/img/marker.png';
            var marker = new google.maps.Marker({
                icon: iconBase,
                map: map, 
                size: new google.maps.Size(71, 71),
                position: position,
                title: location.name
            });
             
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.setContent(content);
                infowindow.open(map,marker);
            });
        }
    }
    
    makeRequest('get_locations.php', function(data) {
                 
            var data = JSON.parse(data.responseText);
             
            for (var i = 0; i &lt; data.length; i++) {
                displayLocation(data[i]);
            }
        });
        
          // Create a marker for each place.
          var marker = new google.maps.Marker({
            map: map,
            size: new google.maps.Size(71, 71),
            title: place.name,
            position: place.geometry.location
                }); 
    
          markers.push(marker);
    
          bounds.extend(place.geometry.location);
        }
    
        map.fitBounds(bounds);
      });
    
      // [END region_getplaces]
    
      // Bias the SearchBox results towards places that are within the bounds of the
      // current map's viewport.
      google.maps.event.addListener(map, 'bounds_changed', function() {
        var bounds = map.getBounds();
        searchBox.setBounds(bounds);
      });
    }
    
    google.maps.event.addDomListener(window, 'load', initialize);
     &lt;/script&gt;
        &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="topfont"&gt;&lt;/div&gt;
     &lt;div id="home"&gt;
       &lt;input id="pac-input" class="controls" type="text" placeholder="Search Box"&gt;
       &lt;div id="map-canvas"&gt;&lt;/div&gt;
        &lt;br&gt;&lt;br&gt;
           
  &lt;div id="listarea"&gt; &lt;/div&gt;
       &lt;/div&gt; 
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>