Untitled

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
</head>
<body>
    <span><input type="checkbox" name="other_address" value="1"> I want to change address</span>
    <input type="text" name="input_location" value="Bismarckallee 3, Freiburg" id="input_location" placeholder="Address (Street, City)">
    <input type="hidden" name="input_coordinates" value="47.997337,7.841653">
    <div id="map_canvas" class="user_location_map" style="width: 100%; height: 300px;"></div>

    <script type="text/javascript">
        var markersArray = [];

        function addMarker(location) {
            marker = new google.maps.Marker({
                position: location,
                map: map
            });
            markersArray.push(marker);
        }

        function deleteOverlays() {
            if (markersArray) {
                for (i in markersArray) {
                    markersArray[i].setMap(null);
                }
                markersArray.length = 0;
            }
        }

        function setDomCoords(x, y)
        {
            $('input[name=input_coordinates]').val( x + ',' + y );
        }

        function getDomCoords()
        {
            var coords = $('input[name=input_coordinates]').val().split(',');
            return new google.maps.LatLng(coords[0], coords[1]);
        }

        function gotoCoords(coords)
        {
            map.setCenter(coords);
            map.setZoom(14);
            addMarker(coords);
        }

        function gotoAddress(address)
        {
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({
                address : address,
                region: 'no'
            }, function(results, status) {
                if (status.toLowerCase() == 'ok') {
                    var coords = new google.maps.LatLng(
                        results[0]['geometry']['location'].lat(),
                        results[0]['geometry']['location'].lng()
                    );

                    gotoCoords(coords);
                    setDomCoords(coords.lat(), coords.lng());
                }
            });
        }

        var map = new google.maps.Map( document.getElementById("map_canvas"),  {
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            panControl: false,
            streetViewControl: false,
            mapTypeControl: false
        });

        var temp_address = $('input[name=input_location]').val();
        var temp_coords = $('input[name=input_coordinates]').val();

        gotoCoords(getDomCoords());

        $('input[name=other_address]').change(function() {
            if($('input[name=input_location]').val()){
                $('input[name=input_location]').val('');
                $('input[name=input_coordinates]').val('');
            }else{
                $('input[name=input_location]').val(temp_address);
                $('input[name=input_coordinates]').val(temp_coords);
            }
        });

        $('input[name=other_address]').change(function(){
            if($('input[name=other_address]').is(':checked')){
                deleteOverlays();
                map.setZoom(5);

                if($('input[name=input_location]').val()){
                    $('input[name=input_location]').val('');
                    $('input[name=input_coordinates]').val('');
                }
            } else {
                $('input[name=input_location]').val(temp_address);
                $('input[name=input_coordinates]').val(temp_coords);
            }
        });

        $('input[name=input_location]').change(function(){
            gotoAddress($(this).val());
        });
    </script>
</body>
</html>