Google Map API how to set marker for current location

Question

I'm learning google map API and stuck at this problem when i'm trying to add the current coordinate to an array. Here is my code:

var locations = [];

In initialize() i have:

function initialize() {
    infowindow = new google.maps.InfoWindow();
    var myOptions = {
        zoom: 10,
        mapTypeControl: true,
        navigationControl: true,
    }
    map = new google.maps.Map(document.getElementById("map"), myOptions);

    add_location('Place 1', 37.2846372, -123.3270422);
    set_current_location();
    set_markers(new google.maps.LatLngBounds(), map);
}

The first marker is set, while the set_current_location() doesn't seem to work. Here is the rest of the code:

// add new location to the locations array
function add_location(description, lastitude, longtitude) {
    locations.push([description, lastitude, longtitude]);
}

// Set all the markers in the location arrays and bound/frame the map
function set_markers(bounds, map) {
    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
        });
        bounds.extend(marker.position);
        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }
    map.fitBounds(bounds);
}

// Get current location based on the IP Address
function set_current_location() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            var pos = new google.maps.LatLng(position.coords.latitude,
            position.coords.longitude);
            var myLat = position.coords.latitude;
            var myLong = position.coords.longitude;
            add_location('My location', position.coords.latitude, position.coords.longitude);
        });
    } else {
        alert("Geolocation is not supported by this browser.");
    }
}

Can anyone help or give me a hint? I would like to add the current location to the locations array so I can keep track of how many locations I have added. Thank you so much.

Answer 1

If you just move set_markers() to the end of success callback of getCurrentPosition() and user refuse to share his location, you won't get the map but just gray area. There is no center set for your map which is required property. Better to define it like:

var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(37.339386, -121.894955),
    mapTypeControl: true,
    navigationControl: true,
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
...

Additionally, you can also call set_markers() at the end of error callback of getCurrentPosition() , so in case that user refuse sharing of his location, you can show available locations:

// Get current location based on the IP Address
function set_current_location() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            /*
            var pos = new google.maps.LatLng(position.coords.latitude,
                                             position.coords.longitude);
            var myLat = position.coords.latitude;
            var myLong = position.coords.longitude;
            */
            add_location('My location', 
                        position.coords.latitude, 
                        position.coords.longitude);

            set_markers(new google.maps.LatLngBounds(), map);
        }, function error(err) {
            console.log('error: ' + err.message);
            set_markers(new google.maps.LatLngBounds(), map);            
        });
    } else {
        alert("Geolocation is not supported by this browser.");
    }
}

See example at jsbin