How to conbine my location with other markesr

How to conbine my location with other markesr

Hello guys,

I'm trying to create a map page that will display my current location along with other markers, but I'm having some trouble creating it. More specisicly more specifically when I use the code aw it is The map doesn't load but when I remove the code that I have painted in blue then the map load normaly with the markers only.Here is the code that I'm using:


var cityList = [
                                ['Il Posto', 37.6726818, 21.4383551, 1, 'img/grey.png'],
                                ['El Greco', 37.6721248,21.4382821, 2, 'img/grey.png'],
['Pizza Milano', 37.6738094,21.4374336, 3, 'img/grey.png'],
['Goodys', 37.6721087,21.4380419, 4, 'img/grey.png'],
['El Greco', 37.669387,21.4378651, 5, 'img/grey.png']
],
                   demoCenter = new google.maps.LatLng(37.6719964,21.4443562),
               map;


function initialize()
            {
                map = new google.maps.Map(document.getElementById('myMap'), {
                   zoom: 7,
                   center: demoCenter,
                   mapTypeId: google.maps.MapTypeId.ROADMAP
                 });
            }

navigator.geolocation && navigator.geolocation.getCurrentPosition(showPosition, showError) == undefined && showError();

function addMarkers()
            {
                var marker, 
                i,
                infowindow = new google.maps.InfoWindow();

                for (i = 0; i < cityList.length; i++) 
                {  
                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(cityList[i][1], cityList[i][2]),
                        map: map,
icon:cityList[i][4],
                        title: cityList[i][0],
animation: google.maps.Animation.DROP
                    });

                    google.maps.event.addListener(marker, 'click', (function(marker, i) {
                        return function() {
                            infowindow.setContent(cityList[i][0]);
                            infowindow.open(map, marker);
                        }
                    })(marker, i));
                }
            }

       function showPosition(position) {
  lat = position.coords.latitude;
  lon = position.coords.longitude;
  latlon = new google.maps.LatLng(lat, lon);
  map.setCenter(latlon);
}

function showError(error) {
  map.setCenter(new google.maps.LatLng(locations[0][1], locations[0][2])); // default 1st from array
}

$(document).on("pageinit", "#mappage", function() {
                initialize();
            });

            $(document).on('click', '.add-markers', function(e) {
                e.preventDefault();
                addMarkers();
            });