Googlemaps Does Not Load on Page Load

GoogleMaps does not load on page load

Make sure that initMap function is visible from the global scope or the parameter passed as callback to google maps.js is properly namespaced.
In your case, the quickest solution will be replacing:

function initMap(){
//..
}

to:

window.initMap = function(){
//...
}

or namespace version:

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBDucSpoWkWGH6n05GpjFLorktAzT1CuEc&callback=YOUR.NAMESPACE.initMap" async defer></script>

//Edit:

I see that in your code snippet you use some async module loading (require.js?) and the code in which you create window.initMap function does not get executed unless you call the module that contains this declaration. So you have not fulfilled the first condition that I've mentioned - the initMap must be visible from the global scope before you call google maps.js.

Google Map is not loading for the first time

Problems

First of all, why are you using jQuery Mobile? I don't see the point in your current example.

In this case jQuery Mobile is the main problem. Because jQuery Mobile is used everything will be loaded into the DOM. When you "navigate from the previous page" page is not refreshed and this line:

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

can't trigger. It will trigger only if you manually refresh the page.

Second thing, you cant use jQuery Mobile page events without having any page what so ever. In your code you have this part:

$(document).delegate('#content', 'pageinit', function () {
    navigator.geolocation.getCurrentPosition(initialize);
});

For it to initialize successfully div with an id content MUST have another attribute called data-role="page", like this:

<div id="content" data-role="page">

</div>

Third thing. Lets assume everything else is ok. Pageinit will not trigger from the HEAD. When jQuery Mobile loads pages it loads them into the DOM and only BODY part will be loaded. So for your map to work you need to move our javascript to the BODY (including a css). In you first example it didnt worked because you were triggering page even on a non-page div container.

And last thing, if you want to use jQuery Mobile properly you will need to take care correct version of jQuery is used with a correct version of jQuery Mobile. If you want to be safe use jQ 1.8.3 with jQM 1.2

Solution

Here's a working solution:

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>          
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>                  
    </head>
    <body>
        <style>
            #map-canvas {
                width: 300px;
                height: 300px;
            }
        </style>            
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>       
        <script type="text/javascript">
            function initialize() {     
                var myLatlng = new google.maps.LatLng(33.89342, -84.30715);

                var mapOptions = {
                  zoom: 10,
                  center: myLatlng,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: 'Location'
                });
            }

            //google.maps.event.addDomListener(window, 'load', initialize);
            
            $(document).on('pageshow', '#wrapper', function(e, data){       
                initialize();
            });             
        </script>   
        <div id="wrapper" data-role="page">
            <div class="header">
                <h3>Test</h3>
                <a href="index.html"><img src="images/logo-small.png" alt="logo"/></a>
            </div>
            <div id="content">
                <div id="map-canvas"></div>
            </div>
        </div>  
    </body>
</html>

Working examples and much more information regarding this topic can be found in this ARTICLE.

Google Maps with iframe doesn't work after page load

Using your code:

 <iframe id='iframe1' src="about:blank"></iframe>
 <script>
   window.addEventListener("load", function() {
     document.getElementById('iframe1').src = 'https://maps.google.com/maps?q=25.1954875,-111.6649204&hl=fa;z=14&ie=UTF8&output=embed&hl=en';
   });
 </script>

There is a message in the javscript console:

Refused to display 'https://www.google.com/maps?q=25.1954875,-111.6649204&hl=fa;z%3D14&ie=UTF8&output=embed&hl=en' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

However, if the <iframe> is created dynamically also, it works (note that the source is set before it is appended to the DOM):

 <script>
   window.addEventListener("load", function() {
     var iDiv = document.createElement('iframe');
     iDiv.id = 'iframe1';
     iDiv.src = 'https://maps.google.com/maps?q=25.1954875,-111.6649204&hl=fa;z=14&ie=UTF8&output=embed&hl=en';
     document.getElementById("anchor").appendChild(iDiv);
   });
 </script>

code snippet:

<div id="anchor"></div>
<script>  window.addEventListener("load", function() {    var iDiv = document.createElement('iframe');    iDiv.id = 'iframe1';    iDiv.src = 'https://maps.google.com/maps?q=25.1954875,-111.6649204&hl=fa;z=14&ie=UTF8&output=embed&hl=en';    document.getElementById("anchor").appendChild(iDiv);  });
</script>

Google place auto search on page load doesn't work with dot inside of the URL

Here is a working and simplified version of your code.

Triggering the focus and keydown on your input field from the map idle event is enough. No need to set timeouts, etc.

Also AFAIK, passing types=(cities) in the API URL is not valid.

So, if I call this page like this: map.php?local=52.6762,19.7582, the map centers on these coords and a marker is displayed.

<!DOCTYPE html>
<html>
<head>
  <title>test</title>
  <meta name="viewport" content="initial-scale=1.0">
  <meta charset="utf-8">
  <style>
    #mapindex {
      height: 400px;
      width: 100%;
    }
  </style>
  <!-- Google Maps API -->
  <script>
    function initialize() {

      var myLatLng = new google.maps.LatLng(52.015460, 18.498087); // Map is centered here
      var myOptions = {
        zoom: 6,
        center: myLatLng,
        mapTypeId: 'hybrid',
        clickableIcons: false
      };

      map = new google.maps.Map(document.getElementById("mapindex"), myOptions);

      // Create the search box and link it to the UI element.
      var input = document.getElementById('pac-input');
      var searchBox = new google.maps.places.SearchBox(input);
      map.controls[google.maps.ControlPosition.TOP_CENTER].push(input);

      // Bias the SearchBox results towards current map's viewport.
      map.addListener('bounds_changed', function() {
        searchBox.setBounds(map.getBounds());
      });

      var markers = [];
      // Listen for the event fired when the user selects a prediction and retrieve
      // more details for that place.
      searchBox.addListener('places_changed', function() {
        var places = searchBox.getPlaces();

        if (places.length == 0) {
          return;
        }

        // Clear out the old markers.
        markers.forEach(function(marker) {
          marker.setMap(null);
        });
        markers = [];

        // For each place, get the icon, name and location.
        var bounds = new google.maps.LatLngBounds();
        places.forEach(function(place) {
          if (!place.geometry) {
            console.log("Returned place contains no geometry");
            return;
          }
          var icon = {
            url: place.icon,
            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)
          };

          // Create a marker for each place.
          var image = 'http://www.instead.com.pl/target2.png';
          markers.push(new google.maps.Marker({
            map: map,
            icon: image,
            title: place.name,
            position: place.geometry.location
          }));

          if (place.geometry.viewport) {
            // Only geocodes have viewport.
            bounds.union(place.geometry.viewport);
          } else {
            bounds.extend(place.geometry.location);
          }
        });

        map.fitBounds(bounds);
      });

      // trigger tha autofocus function
      google.maps.event.addListenerOnce(map, 'idle', function() {
        input.focus();
        google.maps.event.trigger(input, 'keydown', {
          keyCode: 13
        })
      });
    }
  </script>
</head>
<body>
  <input id="pac-input" class="controls" type="text" placeholder="Enter location" onload="mouseEnter()" value="<?php if (isset ($_GET['local'])) {
      echo $_GET['local'];
    } ?>" />
  <div id="mapindex"></div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initialize" async defer></script>
</body>
</html>

Embedded Google Maps tiles not loading in Firefox second page load until zoomed

Fixed in Firefox 68.0.2, so try the updated one.

Googlemaps Does Not Load on Page Load