google maps - marker not moving until I move it manually once

Question

I have a map on the page http://www.liquidlizard.net/users/trainer

When a user enters a location or postcode in the UK, and clicks search or hits enter then the map is meant to move to that point, which it does but it's meant to take the circle and marker with it. At the moment, only after you've moved the marker by dragging it with the mouse does it then respond properly when you perform a search.

I think it's got something to do with my dragend function but I'm not too great with javascript.

Can anyone help me out?

var userLocation = "London";
var geocoder = new google.maps.Geocoder();
var circle;
var latLng;
var marker;
var latlng;
var styles = [
              {
                    stylers: [
                      { hue: "#00ffe6" },
                      { saturation: -20 }
                    ]
              }
            ];

function initialize()
{
    latlng = new google.maps.LatLng(51.71194988641549, -0.4821940203124768);

    $('#lattitude').val(51.71194988641549);
    $('#longitude').val(-0.4821940203124768);

    var myOptions = {
        zoom: 6,
        styles: styles,
        center: latlng,
        //panControl: true,
        zoomControl: true,
        scaleControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

    marker = new google.maps.Marker({
        map: map,
        draggable:true,
        position: latlng
    });


    google.maps.event.addListener(marker, 'dragend', function() {
        //circle.setVisible(false);
        var point = marker.getPosition();
        map.panTo(point);
        $('#lattitude').val(point.lat());
        $('#longitude').val(point.lng());
        drawCircle($("#miles").val()/0.0621371192*100);
    });
}


$(function(){
    $( "#slider" ).slider({
        slide: function(event, ui) {
            $("#map-numOf-miles").html(ui.value+' Miles');
            $("#miles").val(ui.value);
            drawCircle(ui.value/0.0621371192*100);
        }
    });
});

function drawCircle(radius) {

    if (circle != undefined)
        circle.setMap(null);

    newlatlong = new google.maps.LatLng(parseFloat($('#lattitude').val()), parseFloat($('#longitude').val()));

    var options = {
        strokeColor: '#d12d87',
        strokeOpacity: 0.35,
        strokeWeight: 1,
        fillColor: '#d12d87',
        fillOpacity: 0.35,
        map: map,
        center: newlatlong,
        radius: radius
    };

    circle = new google.maps.Circle(options);
}

function geocode(){
 geocoder.geocode({
        address: $('#postcodeViolet').val()+' UK'
    }, function(results, status){
        if(status == google.maps.GeocoderStatus.OK){
         var geoPoint = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
            map.setCenter(geoPoint);
            circle.setCenter(geoPoint);
            marker.setPosition(geoPoint);
           $('#lattitude').val(geoPoint.lat());
           $('#longitude').val(geoPoint.lng());
        } else{
            alert("Can not geolocate this address.");
        }
    });
}

Also geocode called:

//User clicks to search location
$(".spyglassIcon").click(function() {
    geocode();
});

$('.formInputTextPostcode').bind("enterKey",function(e){
    $(".spyglassIcon").click();
});
$('.formInputTextPostcode').keyup(function(e){
    if(e.keyCode == 13)
    {
      $(this).trigger("enterKey");
    }
});

Answer 1

I get a javascript error: Uncaught TypeError: Cannot call method 'setCenter' of undefined trainer:108

That is because you don't create the circle in the path that causes the issue, this should address that:

function geocode(){
 geocoder.geocode({
        address: $('#postcodeViolet').val()+' UK'
    }, function(results, status){
        if(status == google.maps.GeocoderStatus.OK){
         var geoPoint = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
            map.setCenter(geoPoint);
            if (!!circle && !!circle.setCenter) circle.setCenter(geoPoint);
            marker.setPosition(geoPoint);
           $('#lattitude').val(geoPoint.lat());
           $('#longitude').val(geoPoint.lng());
        } else{
            alert("Can not geolocate this address.");
        }
    });
}