js:

var map;

function initialize() {
  $('#refreshmap').on('click',initialize);
  var mapOptions = {
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };


  map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

  // Try HTML5 geolocation
  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = new google.maps.LatLng(position.coords.latitude,
                                       position.coords.longitude);

      map.setCenter(pos);
    }, function() {
      handleNoGeolocation(true);
    });
  } else {
    // Browser doesn't support Geolocation
    handleNoGeolocation(false);
  }

function handleNoGeolocation(errorFlag) {
  if (errorFlag) {
    var content = 'Error: The Geolocation service failed.';
  } else {
    var content = 'Error: Your browser doesn\'t support geolocation.';
  }

  var options = {
    map: map,
    position: new google.maps.LatLng(-29.3456, 151.4346),
    content: content
  };
  var infowindow = new google.maps.InfoWindow(options);
  map.setCenter(options.position);
}

var marker = new google.maps.Marker({
    position: pos,
    title: 'Position',
    map: map,
    draggable: true,
    visible:true
  });

 updateMarkerPosition(pos);
  geocodePosition(pos); 
   google.maps.event.addListener(marker, 'drag', function() {

    updateMarkerPosition(marker.getPosition());
  });
  $('#button').click(function(){
    marker.setVisible(true);  
  });

}

google.maps.event.addDomListener(window, 'load', initialize);

html:

<div id="map-canvas"></div> 
<button  type="button" id="button" class="map_buttons button_style">Add marker</button>

The above code is for display marker on current location by clicking a button.Map is showing the current location but marker is not working.

I am getting this error in console "Uncaught ReferenceError: pos is not defined".

js:

var map;

function initialize() {
  $('#refreshmap').on('click',initialize);
  var mapOptions = {
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };


  map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

  // Try HTML5 geolocation
  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = new google.maps.LatLng(position.coords.latitude,
                                       position.coords.longitude);

      map.setCenter(pos);
    }, function() {
      handleNoGeolocation(true);
    });
  } else {
    // Browser doesn't support Geolocation
    handleNoGeolocation(false);
  }

function handleNoGeolocation(errorFlag) {
  if (errorFlag) {
    var content = 'Error: The Geolocation service failed.';
  } else {
    var content = 'Error: Your browser doesn\'t support geolocation.';
  }

  var options = {
    map: map,
    position: new google.maps.LatLng(-29.3456, 151.4346),
    content: content
  };
  var infowindow = new google.maps.InfoWindow(options);
  map.setCenter(options.position);
}

var marker = new google.maps.Marker({
    position: pos,
    title: 'Position',
    map: map,
    draggable: true,
    visible:true
  });

 updateMarkerPosition(pos);
  geocodePosition(pos); 
   google.maps.event.addListener(marker, 'drag', function() {

    updateMarkerPosition(marker.getPosition());
  });
  $('#button').click(function(){
    marker.setVisible(true);  
  });

}

google.maps.event.addDomListener(window, 'load', initialize);

html:

<div id="map-canvas"></div> 
<button  type="button" id="button" class="map_buttons button_style">Add marker</button>

The above code is for display marker on current location by clicking a button.Map is showing the current location but marker is not working.

I am getting this error in console "Uncaught ReferenceError: pos is not defined".

• javascript
• jquery
• html
• google-maps

• 3 In this line: position: pos during creation of the marker map, pos is undefined in the scope – karthikr Commented Jun 6, 2013 at 13:41
• 1 read this stackoverflow./questions/500431/javascript-variable-scope – wirey00 Commented Jun 6, 2013 at 13:42

2 Answers 2

Try this:

var map;
var pos;
function initialize() {
    $('#refreshmap').on('click', initialize);
    var mapOptions = {
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };


    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    // Try HTML5 geolocation
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            pos = new google.maps.LatLng(position.coords.latitude,
            position.coords.longitude);

            map.setCenter(pos);
        }, function () {
            handleNoGeolocation(true);
        });
    } else {
        // Browser doesn't support Geolocation
        handleNoGeolocation(false);
    }

    function handleNoGeolocation(errorFlag) {
        if (errorFlag) {
            var content = 'Error: The Geolocation service failed.';
        } else {
            var content = 'Error: Your browser doesn\'t support geolocation.';
        }

        var options = {
            map: map,
            position: new google.maps.LatLng(-29.3456, 151.4346),
            content: content
        };
        var infowindow = new google.maps.InfoWindow(options);
        map.setCenter(options.position);
    }

    var marker = new google.maps.Marker({
        position: pos,
        title: 'Position',
        map: map,
        draggable: true,
        visible: true
    });

    updateMarkerPosition(pos);
    geocodePosition(pos);
    google.maps.event.addListener(marker, 'drag', function () {

        updateMarkerPosition(marker.getPosition());
    });
    $('#button').click(function () {
        marker.setVisible(true);
    });

}

Basically, declare var pos in the global scope, and remove var while initializing pos

The issue is that

During creation of the marker object, pos is undefined in the scope

try to declare pos global, like your map

 var map;
 var pos;