Google Map Api İle Harita Üzerinde Konum Göstermek

Google Map Api İle Harita Üzerinde Konum Göstermek

Google Map Api İle Harita Üzerinde Konum Göstermek için aşağıdaki kodlamaları kullanarak size harita api yapısını kullanabilirsiniz.

javascript kodları

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCHwjGOLK4O5qwDVbCCl4EsOnofFQ1BGXQ"></script>
@if (fk.C_lat != null && fk.C_lng != null)
{
    <script>
        var map;
        function initialize() {
            var mapOptions = {
                zoom: 2,
                center: { lat: @fk.C_lat, lng: @fk.C_lng }
            };
            map = new google.maps.Map(document.getElementById('simple-map'),
                mapOptions);
            var marker = new google.maps.Marker({
                position: { lat: @fk.C_lat, lng: @fk.C_lng },
                map: map,
                draggable: true
            });
            google.maps.event.addListener(marker, 'dragend', function () {
                $('input[name="C_lat"]').val(this.getPosition().lat());
                $('input[name="C_lng"]').val(this.getPosition().lng());
            });
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
}
else
{
    <script>
        var map;
        function initialize() {
            var mapOptions = {
                zoom: 2,
                center: { lat: 50.6402809, lng: 4.6667145 }
            };
            map = new google.maps.Map(document.getElementById('simple-map'),
                mapOptions);
            var marker = new google.maps.Marker({
                position: { lat: 50.6402809, lng: 4.6667145 },
                map: map,
                draggable: true
            });
            google.maps.event.addListener(marker, 'dragend', function () {
                $('input[name="C_lat"]').val(this.getPosition().lat());
                $('input[name="C_lng"]').val(this.getPosition().lng());
            });
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
}

HTML Kodları

                        @if (fk.C_lat != null && fk.C_lng != null)
                        {
                            <div class="col-md-12">
                                <label>Harita Üzerinde</label>
                                <div id="simple-map" class="gmaps"></div>
                                <hr />
                                <div class="form-group col-md-12">
                                    <label>X Koodinatı</label>
                                    <input type="text" name="C_lat" value="@fk.C_lat" class="form-control" readonly />
                                </div>
                                <div class="form-group col-md-12">
                                    <label>Y Koodinatı</label>
                                    <input type="text" name="C_lng" value="@fk.C_lng" class="form-control" readonly />
                                </div>
                            </div>
                        }
                        else
                        {
                            <div class="col-md-12">
                                <label>Harita Üzerinde</label>
                                <div id="simple-map" class="gmaps"></div>
                                <hr />
                                <div class="form-group col-md-12">
                                    <label>X Koodinatı</label>
                                    <input type="text" name="C_lat" value="50.6402809" class="form-control" readonly />
                                </div>
                                <div class="form-group col-md-12">
                                    <label>Y Koodinatı</label>
                                    <input type="text" name="C_lng" value="4.6667145" class="form-control" readonly />
                                </div>
                            </div>
                        }