How to change Google Maps info window to a geolocation marker

Question

I followed a tutorial by Google https://developers.google.com/maps/documentation/javascript/geolocation so I could display the users position on a map. It currently looks like this with an info window:

However I would like to display a geolocation marker instead of the info window:

Here is my code:

function initialize() {

var mapOptions = {
    center: new google.maps.LatLng(52.520008, 13.404954)
    };
          infoWindow = new google.maps.InfoWindow;
          map = new google.maps.Map(document.getElementById("map"), mapOptions);

        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var pos = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };

            infoWindow.setPosition(pos);
            infoWindow.setContent('Location found.');
            infoWindow.open(map);
            map.setCenter(pos);
          }, function() {
            handleLocationError(true, infoWindow, map.getCenter());
          });
        } else {
          // Browser doesn't support Geolocation
          handleLocationError(false, infoWindow, map.getCenter());
        }
      }

      function handleLocationError(browserHasGeolocation, infoWindow, pos) {
        infoWindow.setPosition(pos);
        infoWindow.setContent(browserHasGeolocation ?
                              'Error: The Geolocation service failed.' :
                              'Error: Your browser doesn\'t support geolocation.');
        infoWindow.open(map);
      }

Any help on how to change it from an info window to geolocation marker would be great. Thanks in advance.

related question: [google maps api add button to pan back to user location using geolocationmarker-compiled.js](https://stackoverflow.com/questions/27198120/google-maps-api-add-button-to-pan-back-to-user-location-using-geolocationmarker) — geocodezip, Jan 20 '20 at 15:34
You need to create a Marker within the `getCurrentPosition` callback. There is no ready made *geolocation marker* within the API. You can create a [custom Marker](https://developers.google.com/maps/documentation/javascript/custom-markers). If you intend to also get the device orientation, you will need to implement it by yourself. [This](https://stackoverflow.com/questions/16048514/can-i-use-javascript-to-get-the-compass-heading-for-ios-and-android) might help. — MrUpsidown, Jan 20 '20 at 15:49

score -1 · Answer 1 · answered Jan 20 '20 at 14:48

To display location with marker in Google maps, you can try this:

var map = new google.maps.Map(document.getElementById("map"), {
    center: {lat: 52.520008, lng: 13.404954},
    zoom: 8,
    mapTypeId: 'roadmap'
});

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(52.520008, 13.404954),
    map: map,
    /*if you want to custom marker icon, you can set icon path here*/
    icon: 'your_icon_url',
    /* if you don't want to enable dragging, just remove this property */
    draggable: true
});

// if you enable dragging, you can initialize this event 
// to get latitude, longitude and address
google.maps.event.addListener(marker, 'dragend', function (marker) {
    var latLng = marker.latLng;
    var currentLatitude = latLng.lat();
    var currentLongitude = latLng.lng();

    var geocoder = new google.maps.Geocoder;
    var latlng = { lat: currentLatitude, lng: currentLongitude };
    geocoder.geocode({ 'location': latlng }, function (results, status) {
        if (status === 'OK') {
            // address
            console.log(results);
        } else {
            console.log('Geocoder failed due to: ' + status);
        }
    });
});

Note: To work with places in Google maps, you need to require libraries=places as a parameter inside the url:

https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places

Reference: For more marker icons designed by Google, you can refer here: What are the filenames of new colored Google maps markers?

How to change Google Maps info window to a geolocation marker

1 Answers1