title: Uncaught ReferenceError: getLocation is not defined
body: <p>I'm working on a website and now stuck with an error. I want to get my current latitude and longitude when my page is loaded. But the function with that code is not running when the page is loaded and it shows an error "Uncaught ReferenceError: getLocation is not defined".</p>
  
  <p>This is my HTML part</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
   &lt;head&gt;
  &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt;
  &lt;meta charset="utf-8"&gt;   
  &lt;script async defer
  src="https://maps.googleapis.com/maps/api/js?key=(mykey)&amp;callback=initialize"&gt;
  &lt;/script&gt;
  &lt;style&gt;
    #map {
      height: 100%;
      width: 100%;    
  &lt;/style&gt;
  &lt;/head&gt;
   &lt;body&gt;
   &lt;div id="map"&gt;&lt;img src="adminpanel/images/loader.gif" width="3%" height="5%"/&gt;&amp;nbsp;&lt;b&gt;Loading Map&lt;/b&gt;&lt;/div&gt;  
   &lt;/body&gt;
  &lt;/html&gt;  
  </code></pre>
  
  <p>This is java script </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    getLocation();
    var x = document.getElementById("demo");
    function getLocation() {
       if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(showPosition);
       } else { 
          x.innerHTML = "Geolocation is not supported by this browser.";
       }
    }
    function showPosition(position) {
       window.location.href="search-product.php?Lat=" + position.coords.latitude + "&amp;Lng=" + position.coords.longitude;
     }
  
  var map;
  var Markers = {};
  var infowindow;
  var locations = [
  &lt;?php for($i=0;$i&lt;sizeof($locations);$i++) { $j=$i +1; ?&gt;
  [
    'hi ',
    '&lt;a href="map_location_check.php?shop_id=&lt;?php echo $locations[$i]['shop_id']; ?&gt;" title="Click Here"&gt;&lt;?php echo $locations[$i]['shop_name'].'&lt;br&gt;'.$locations[$i]['shop_address']; ?&gt;&lt;/a&gt;',
    &lt;?php echo $locations[$i]['map_latitude']; ?&gt;,
    &lt;?php echo $locations[$i]['map_longitude']; ?&gt;,
    0
  ] &lt;?php if($j!=sizeof($locations)) echo ",";  } ?&gt;
  ];
  
  var origin = new google.maps.LatLng(locations[0][2],locations[0][3]);
  function initialize () {
   var mapOptions = {
    zoom:12,
    center:origin
   };
   map = new google.maps.Map(document.getElementById('map'),mapOptions);
   infowindow = new google.maps.InfoWindow();
   for(i=0;i&lt;locations.length;i++) {
    var position = new google.maps.LatLng(locations[i][2], locations[i][3]);
    var marker = new google.maps.Marker({
      position:position,
      map:map,
    });
    google.maps.event.addListener(marker, 'click', (function(marker, i){
    return function() {
      infowindow.setContent(locations[i][1]);
      infowindow.setOptions({maxWidth: 200});
      infowindow.open(map, marker);
    }
  }) (marker, i));
  Markers[locations[i][4]] = marker;
  }
  locate(0);
  }
  
  function locate(marker_id){
   var myMarker = Markers[marker_id];
   var markerPosition = myMarker.getPosition();
   map.setCenter(markerPosition);
   google.maps.event.trigger(myMarker, 'click');
  } 
  &lt;/script&gt;
  </code></pre>
  
  <p>Thanks for your help..!</p>