position.coords.latitude not working

can someone help this is my code

@extends('layouts.appOwner') @section('content')

    <div class="bannerReg">
        <label for="X" class="col-sm-4 col-form-label text-md-right">{{ __('Location X') }}</label>
        <img style="margin-top:17px;margin-left:10px;margin-rigt:10px;float:left; height: 7%; width: 9.3%;" src="{{ asset('storage/img/iconreg/1.png') }}" />
        <div class="input" style="float:left; width:85%;">
            <input id="X" type="text" class="form-control" name="name" >
        </div>          
    </div>

    <div class="bannerReg">
        <label for="Y" class="col-sm-4 col-form-label text-md-right">{{ __('Location Y') }}</label>
        <img style="margin-top:17px;margin-left:10px;margin-rigt:10px;float:left; height: 7%; width: 9.3%;" src="{{ asset('storage/img/iconreg/1.png') }}" />
        <div class="input" style="float:left; width:85%;">
            <input id="Y" type="text" class="form-control" name="name" >
        </div>          
    </div>

    <div class="bannerReg">
        <label for="Upload Images" class="col-sm-4 col-form-label text-md-right">{{ __('Upload Images') }}</label>
        <img style="margin-top:17px;margin-left:10px;margin-rigt:10px;float:left; height: 7%; width: 9.3%;" src="{{ asset('storage/img/iconreg/1.png') }}" />
        <div class="input" style="float:left; width:85%;">
            {{Form::file('profile_pictures')}}
        </div>           
    </div>

    <div id="uploadCancel" style="text-align:center; padding-bottom:10px;">
        <button id="test2" type="submit" style="text-align:center; " class="buttonN button1">Create New Visit</button>
    </div>
    <script>         
        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition());
            } else { 
                x.innerHTML = "Geolocation is not supported by this browser.";
            }
        }
        
        function showPosition(position) {
            document.getElementById("X").value = position.coords.latitude;
            document.getElementById("Y").value = position.coords.longitude;
        }
    </script>
</div>

@endsection

i dont know why my button dont show in source code but i have the button with onclick="getLocation()"

ftiersch

7 years ago

Level 28

I'm not sure how the navigator works but I guess you pass a callback function to it?

In that case you need to remove the parenthesis () from showPosition().

getCurrentPosition(showPosition);

Because the way you are doing it is calling the showPosition function (without a position which will throw the error) and then passing the return value to getCurrentPosition (which will be null or undefined, not sure).

Please or to participate in this conversation.