title: How to make google maps api get user's current location to be stored it in the database?
body: <p>I have implemented a tutorial on how to make users select locations on the map and store it in the database, from <a href="https://developers.google.com/maps/documentation/javascript/info-windows-to-db" rel="nofollow noreferrer">google maps API</a>.</p>
  
  <p>However, there seems to be a problem that i cant fix, the map doesn't get the user's current location, it only provides a given coordinate which is to be defined in the code. For example the tutorial defines the map coordinates in California :</p>
  
  <pre><code>var map;
        var marker;
        var infowindow;
        var messagewindow;
  
        function initMap() {
          var california = {lat: 37.4419, lng: -122.1419};
          map = new google.maps.Map(document.getElementById('map'), {
            center: california,
            zoom: 13
          });
  
          infowindow = new google.maps.InfoWindow({
            content: document.getElementById('form')
          });
  
          messagewindow = new google.maps.InfoWindow({
            content: document.getElementById('message')
          });
  
          google.maps.event.addListener(map, 'click', function(event) {
            marker = new google.maps.Marker({
              position: event.latLng,
              map: map
            });
  
  
            google.maps.event.addListener(marker, 'click', function() {
              infowindow.open(map, marker);
            });
          });
        }
  
        function saveData() {
          var name = escape(document.getElementById('name').value);
          var address = escape(document.getElementById('address').value);
          var type = document.getElementById('type').value;
          var latlng = marker.getPosition();
          var url = 'phpsqlinfo_addrow.php?name=' + name + '&amp;address=' + address +
                    '&amp;type=' + type + '&amp;lat=' + latlng.lat() + '&amp;lng=' + latlng.lng();
  
          downloadUrl(url, function(data, responseCode) {
  
            if (responseCode == 200 &amp;&amp; data.length &lt;= 1) {
              infowindow.close();
              messagewindow.open(map, marker);
            }
          });
        }
  
        function downloadUrl(url, callback) {
          var request = window.ActiveXObject ?
              new ActiveXObject('Microsoft.XMLHTTP') :
              new XMLHttpRequest;
  
          request.onreadystatechange = function() {
            if (request.readyState == 4) {
              request.onreadystatechange = doNothing;
              callback(request.responseText, request.status);
            }
          };
  
          request.open('GET', url, true);
          request.send(null);
        }
  
        function doNothing () {
        }
  </code></pre>
  
  <p>The code above will show only the map of the coordinates defined in the code </p>
  
  <p>the HTML for code is : </p>
  
  <pre><code>&lt;div id="map" height="460px" width="100%"&gt;&lt;/div&gt;
      &lt;div id="form"&gt;
        &lt;table&gt;
        &lt;tr&gt;&lt;td&gt;Name:&lt;/td&gt; &lt;td&gt;&lt;input type='text' id='name'/&gt; &lt;/td&gt; &lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Address:&lt;/td&gt; &lt;td&gt;&lt;input type='text' id='address'/&gt; &lt;/td&gt; &lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Type:&lt;/td&gt; &lt;td&gt;&lt;select id='type'&gt; +
                   &lt;option value='bar' SELECTED&gt;bar&lt;/option&gt;
                   &lt;option value='restaurant'&gt;restaurant&lt;/option&gt;
                   &lt;/select&gt; &lt;/td&gt;&lt;/tr&gt;
                   &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;input type='button' value='Save' onclick='saveData()'/&gt;&lt;/td&gt;&lt;/tr&gt;
        &lt;/table&gt;
      &lt;/div&gt;
      &lt;div id="message"&gt;Location saved&lt;/div&gt;
  </code></pre>
  
  <p>I have tried to replace it with the following function which gets the current location but it didn't work out and the code stops showing me the map when i run the code : </p>
  
  <pre><code> if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function (p) {
          var LatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);
          var mapOptions = {
              center: LatLng,
              zoom: 13,
              mapTypeId: google.maps.MapTypeId.ROADMAP
  
          };
  
  
          var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
          var marker = new google.maps.Marker({
              position: LatLng,
              map: map,
              title: "&lt;div style = 'height:60px;width:200px'&gt;&lt;b&gt;Your location:&lt;/b&gt;&lt;br /&gt;Latitude: " + p.coords.latitude + "&lt;br /&gt;Longitude: " + p.coords.longitude
          });
          google.maps.event.addListener(marker, "click", function (e) {
              var infoWindow = new google.maps.InfoWindow();
              infoWindow.setContent(marker.title);
              infoWindow.open(map, marker);
          });
      });
  } else {
      alert('Geo Location feature is not supported in this browser.');
  }
  </code></pre>
  
  <p>HTML for this code will be :    <code>&lt;div id="dvMap" style="width: 400px; height: 300px"&gt;&lt;/div&gt;</code> </p>
  
  <p>and for sure the API source code : </p>
  
  <pre><code>&lt;script async defer
      src="https://maps.googleapis.com/maps/api/js?key=YOURAPI"&gt;
      &lt;/script&gt;
  </code></pre>
  
  <p>When I try each code separately each will give me a different output, so the first code will give me the same output of the google tutorial which has a map of a city . and the second code will give me a map that gets me the current location but if I tried to merge both it will not work. </p>
  
  <p>could someone please tell me how can I get the map to function the same way in google maps tutorial plus the feature of making the map go straight to the user's location so he can store it easily instead of looking for it in a map of an entire city or country?</p>