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.");
    }
}

You are calling `successCallback` function but actually not passing `position` parameter and `latlng` depends on `position` parameter. — Rohil_PHPBeginner, Mar 07 '15 at 11:12
I've now added the position parameter in and it is still not working. :( — Fran, Mar 07 '15 at 11:22
Try adding the marker inside `successCallback`. You're doing it outside, where `map` is undefined — Hobo, Mar 07 '15 at 11:24
Try this `if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { successCallback(position); } }` .. Other thing is you are using `myLatlng` and you saved Latitude and Longitude in `latlng` So you need to change this as well — Rohil_PHPBeginner, Mar 07 '15 at 11:27
Hi @Rohil_PHPBeginner thanks for your reply. I've tried adding the if statement but it has now thrown up more errors and the map has stopped working completely. — Fran, Mar 07 '15 at 11:59

score 1 · Accepted Answer · edited May 23 '17 at 11:58

the issues

myLatlng is not defined
you create the marker before the map has been created
even when the map already has been created the Map-instance(map) wouldn't be accessible in the scope where you create the marker
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

Thanks so much for this! I knew about the CSS issue just have not got round to fixing it yet. Thank you once again. — Fran, Mar 07 '15 at 12:24

Google Map Marker not displaying

1 Answers1