How to highlight a user's current location in google maps?

Question

I am using following code to get the location of user in phonegap (it works fine)

function getLocation() {
    var win = function(position) {
        var lat = position.coords.latitude;
        var long = position.coords.longitude;
        var myLatlng = new google.maps.LatLng(lat, long);

        var myOptions = {
           center: myLatlng,
           zoom: 7,
           mapTypeId : google.maps.MapTypeId.ROADMAP
        };
        var  map_element = document.getElementById("displayMap");
        var map = new google.maps.Map(map_element, myOptions);
    };

    var fail = function(e) {
        alert('Error: ' + e);
    };

    var watchID = navigator.geolocation.getCurrentPosition(win, fail);
}

This is working fine by centering the user's current location on the map. But I would like to show an indicator (a red dot) on the user's location. But I can see that google API provide only 3 options center, zoom and mapTypeId.

Are there any available options that can be used to highlight the position or is there a workaround?

EDIT

Was able to find that google maps API has a marker ho highlight any position. That looks helpful, but that shows a default red balloon, can that be modified by a custom image?

Solution 1

You can use the newly released GeolocationMarker which is part of the Google Maps API Utility Library.

It will add a marker and accuracy circle at the user's current location. It also allows a developer to customize the marker using the setMarkerOptions method and specifying an icon property.

Solution 2

Use icon inside marker like

    var Marker = new google.maps.Marker({
        map: map,
        animation: google.maps.Animation.DROP,
        position: "",
        icon: /bluedot.png
});

you can use this google map location indication circular blue dot icon similar to the google map

Solution 3

You can use MarkerOptions to set a custom image. Check the Google Maps Javascript API V3 Reference to more details about Google Maps.