Google Map Marker not displaying

1 Views

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.");
    }
}
Post Views: 1

Related posts

Leave a Reply

1 comment

  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