CODEWITHSUNDEEP
javascripthtmlgoogle-mapsgoogle-maps-api-3
Phillipe Dongwoo Han
Phillipe Dongwoo Han

Reputation: 23

Google Maps API Centered Marker + Geolocation

I tried to write variables to try and place a marker but it's not working. It should first ask to enable location services, then display the user's current location with a marker. I'm not sure whether I have to call the variable "marker" separately? Or is there something wrong with grammar?

What am I doing wrong?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>GMAP</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Google Maps API -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0}
      #map-canvas { height: 100%; margin-left:auto; margin-right:auto; }
    </style>

    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCUuNJkdVKOzHyIclOyTki6uHwrYpKxaeg&sensor=true">
    </script>

    <!-- GMaps GPS -->
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>

    <script type="text/javascript">
      function initialize() {
      var mapOptions = {
        zoom: 6
      };
      map = new google.maps.Map(document.getElementById('map-canvas'),
          mapOptions);

      // Try HTML5 geolocation
      if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition( function (position) {
          var pos = new google.maps.LatLng(position.coords.latitude,
                                           position.coords.longitude);

          var showPosition = function (position) {
            var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            var marker = new google.maps.Marker({
              position: userLatLng,
              title: 'Your Location',
              map: map
            });

            var infowindow = new google.maps.InfoWindow({
              map: map,
              position: pos,
            });

            map.setCenter(pos);
          };

        });
      }



      else {
        // Browser doesn't support Geolocation
        handleNoGeolocation(false);
      }
    }

        function handleNoGeolocation(errorFlag) {
          if (errorFlag) {
            var content = 'Error: The Geolocation service failed.';
          } else {
            var content = 'Error: Your browser doesn\'t support geolocation.';
          }

          var options = {
            map: map,
            position: new google.maps.LatLng(37.774929, -122.419416),
            content: content
          };

          var infowindow = new google.maps.InfoWindow(options);
          map.setCenter(options.position);
        }



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

    </script>
  </head>

<body>

    <!-- Current Location Google Map API -->
    <br />
    <div id="map-canvas" style="width: 30%; height: 30%"></div>

  </body>
</html>

Upvotes: 0

Views: 856

Answers (2)

Anto Jurković
Anto Jurković

Reputation: 11258

There are two errors.

Google Maps API is included two times so we get message: Warning: you have included the Google Maps API multiple times on this page. This may cause unexpected errors. One of included links has to be commented out.

The next one is missing call showPosition() function. Even if you put call there it will not work because variables are using pos and userLatLng which should be corrected. Here is changed code:

...
    navigator.geolocation.getCurrentPosition( function (position) {
        //var pos = new google.maps.LatLng(position.coords.latitude,
        //                                 position.coords.longitude);

        //var showPosition = function (position) {

            var userLatLng = new google.maps.LatLng(position.coords.latitude,
                                           position.coords.longitude);

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

            var infowindow = new google.maps.InfoWindow({
              // map: map,
              content: 'Info for this place',
              position: userLatLng
            });

            map.setCenter(userLatLng);
        //};

    }, function (err) {
        // message if user denied geolocation
        alert('Error(' + err.code + '): ' + err.message);
    });
} else {
...

Infowindow won't be opened because there is no event listener for marker.

Upvotes: 2

Jonathan
Jonathan

Reputation: 773

You need to call showPosition function, you are only declaring it at the moment.

Upvotes: 0

Related Questions