Creating Geotagged Marker Alongside a Multiple Markers in Google Maps

Question

I've been stuck on this issue for a while now and could really use some help. In a Google Map, I have a list of markers which are being treated as a markerArray, with their own custom icons. But along with displaying those markers, I would like for it to create a marker which is placed at the users geotagged location. I have tried merging the suggestions I've come across here on stack overflow, and have successfully gotten the users browser to center the map based off of geolocation, but whenever I try to add a marker outside of the standard var=locations, all of the markers disappear. I am providing my working code, which simply lacks the feature to add the "current location" marker. If anyone has any input, I'd be thrilled.

var map = null;
    var markerArray = [];
    function initialize() {
        var myOptions = {
            zoom: 13,
            center: new google.maps.LatLng(40.746613, -73.990109),
            mapTypeControl: false,
            navigationControl: false,
            streetViewControl: false,
            zoomControl: false,
            styles: [{featureType:"landscape",stylers:[{saturation:-100},{lightness:65},{visibility:"on"}]},{featureType:"poi",stylers:[{saturation:-100},{lightness:51},{visibility:"simplified"}]},{featureType:"road.highway",stylers:[{saturation:-100},{visibility:"simplified"}]},{featureType:"road.arterial",stylers:[{saturation:-100},{lightness:30},{visibility:"on"}]},{featureType:"road.local",stylers:[{saturation:-100},{lightness:40},{visibility:"on"}]},{featureType:"transit",stylers:[{saturation:-100},{visibility:"simplified"}]},{featureType:"administrative.province",stylers:[{visibility:"off"}]/**/},{featureType:"administrative.locality",stylers:[{visibility:"off"}]},{featureType:"administrative.neighborhood",stylers:[{visibility:"on"}]/**/},{featureType:"water",elementType:"labels",stylers:[{visibility:"on"},{lightness:-25},{saturation:-100}]},{featureType:"water",elementType:"geometry",stylers:[{hue:"#ffff00"},{lightness:-25},{saturation:-97}]}]

        };
        map = new google.maps.Map(document.getElementById('map'), myOptions);
            if (navigator.geolocation) {
                     navigator.geolocation.getCurrentPosition(function (position) {
                         initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                         map.setCenter(initialLocation);
                     });
                 }

        google.maps.event.addListener(map, 'click', function() {
            infowindow.close();
        });
            var locations = [
                    ['90 West Apartment', 40.709943, -74.014430, 7, 'images/pin2.png'],
                    ['Caffe Vita', 40.719652, -73.988411, 6, 'images/pin1.png'],
                ['Croxleys Ale House', 40.722480, -73.983386, 5, 'images/pin1.png'],
                ['Grays Papaya', 40.778291, -73.981829, 4, 'images/pin2.png'],
                ['The Back Room', 40.718723, -73.986913, 3, 'images/pin1.png'],
                ['MUD Coffee', 40.729912, -73.990678, 2, 'images/pin1.png'],
                ['Nurse Bettie', 40.718820, -73.986863, 1, 'pin2.png']];
        for (var i = 0; i < locations.length; i++) {
            createMarker(new google.maps.LatLng(locations[i][1], locations[i][2]),locations[i][0], locations[i][3], locations[i][4]);
        }

        mc.addMarkers(markerArray, true);
    }

    var infowindow = new google.maps.InfoWindow({
        size: new google.maps.Size(150, 50)
    });

    function createMarker(latlng, myTitle, myNum, myIcon) {
        var contentString = myTitle;
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            icon: myIcon,
            zIndex: Math.round(latlng.lat() * -100000) << 5,
            title: myTitle
        });

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(contentString);
            infowindow.open(map, marker);
        });

        markerArray.push(marker);
    }

    window.onload = initialize;

Answer 1

Let's try this.

Put this in your initialize(): navigator.geolocation.getCurrentPosition(showPosition);

Then define showPosition:

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