Google Map Marker not displaying

Question

I've tried adding a marker variable to my Google Map API and it will not show. Any ideas why?

The website: http://www.franhaines.co.uk/paddlethewye/

function initialize() {
    var map = new google.maps.Map(document.getElementById('map'), { 
        zoom: 12, 
        center: new google.maps.LatLng(51.843143, -2.643555), 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
    });
    $("#findButton").click(findMe);}

function errorCallback() {
    alert("I'm afraid your browser does not support geolocation.");
}

function successCallback(position) { 
  var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  var myOptions = {
    zoom: 15,
    center: latlng,
    mapTypeControl: false,
    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
var map = new google.maps.Map(document.getElementById('map'), myOptions);
}

var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title:"We are here!"
});

function findMe()
{
    if (navigator.geolocation)
        {
             console.log(navigator.geolocation.getCurrentPosition(successCallback,errorCallback,{timeout:10000}));
        }
    else
    {
        alert("I'm afraid your browser does not support geolocation.");
    }
}

Answer 1

the issues

1. myLatlng is not defined
2. you create the marker before the map has been created
3. even when the map already has been created the Map-instance( map ) wouldn't be accessible in the scope where you create the marker
4. the geolocation-callback creates a new Map-instance, the marker will not be drawn in this instance

Fixed issues:

function initialize() {

    var myLatlng = new google.maps.LatLng(51.843143, -2.643555),
        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 12,
            center: myLatlng
        }),
        marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: "We are here!"
        });

    //use the button as control when you want to
    map.controls[google.maps.ControlPosition.TOP_CENTER].push($("#findButton")[0]);

    function successCallback(position) {
        var latlng = new google.maps.LatLng(position.coords.latitude,
                                            position.coords.longitude),

            myOptions = {
                zoom: 15,
                center: latlng,
                mapTypeControl: false,
                navigationControlOptions: {
                    style: google.maps.NavigationControlStyle.SMALL
                },
                mapTypeId: google.maps.MapTypeId.ROADMAP
            },
            bounds = new google.maps.LatLngBounds(latlng);

        bounds.extend(marker.getPosition());

        //only set new options for the map
        //instead of creating a new instance
        map.setOptions(myOptions);

        //when you want to
        //set the viewport  of the map so that it diplays both locations
        map.fitBounds(bounds);

        //marker for the user-location when you want to
        new google.maps.Marker({
            position: latlng,
            map: map,
            title: "You are here!",
            icon: 'http://maps.gstatic.com/mapfiles/markers2/boost-marker-mapview.png'
        });
    }

    function errorCallback() {
        alert("I'm afraid your browser does not support geolocation.");
    }

    function findMe() {
        //hide the button, no need for further clicks
        $(this).hide();

        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(successCallback, errorCallback, {
                timeout: 10000
            });
        } else {
            alert("I'm afraid your browser does not support geolocation.");
        }
    }

    $("#findButton").click(findMe);
}

Demo: http://jsfiddle.net/doktormolle/eb6kwkwg/

There is another, CSS-related issue(you may have noticed that the apperenance of the controls is distorted). For a fix see: Google Map Infowindow not showing properly