Hiển thị google map trên website

  • 184 lượt xem
  • Bài cuối 21 Tháng Tám 2016
tuananhk43 đăng này 21 Tháng Tám 2016

Mình có làm theeo serial hướng đẫn DOT MVC liên quan đến phần Contact: form liên hệ và hiển thị bản đồ.

Phần Form liên hệ mình đã làm được và hiển thị bình thường. Còn phần hiển thị Map thì không hiển thị ra. Nội dung mình làm như bên đưới. Các bạn giúp mình xem lỗi gì? Thanks

@model Model.EF.Contact
@{
    ViewBag.Title = "Liên hệ - ASO.COM.VN";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<style>
    #mapCanvas {
        height: 400px;
    }
</style>

@section jsFooter
{
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCf64yxDQLo-UIysw8k5ZlXggrdfa9wvdI&sensor=true"></script>
    <script src="~/assets/client/js/Controler/contactControler.js"></script>
    <script>
        function initMap() {
            var uluru = { lat: 21.585359, lng: 105.806361 };
            var map = new google.maps.Map($('.mapCanvas'), {
                zoom: 18,
                center: uluru
            });
            var contentString = "@Html.Raw(Model.Content)";
            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });
            var marker = new google.maps.Marker({
                position: uluru,
                map: map,
                title: 'Địa chỉ'
            });
            marker.addListener('click', function () {
                infowindow.open(map, marker);
            });
        }
        google.maps.event.addDomListener(window, 'load', initMap);
    </script>

}
<div class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="col-md-6">
                <h2>Thông tin liên hệ</h2>
                @Html.Raw(Model.Content)
                <br /><br />
                <h2>Gửi thông tin</h2>
                <form>
                    <div class="form-group">
                        <label>Họ tên</label>
                        <input type="text" id="txtName" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label>Điện thoại</label>
                        <input type="text" id="txtMobile" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label>Địa chỉ</label>
                        <input type="text" id="txtAddress" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label>Email</label>
                        <input type="text" id="txtEmail" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label>Yêu cầu</label>
                        <textarea id="txtContent" class="form-control"></textarea>
                    </div>
                    <button id="btnSend" class="btn btn-success">Gửi đi</button>
                </form>
            </div>
            <div class="col-md-6">
                <h2>Bản đồ</h2>
                <div class="map" id="mapCanvas"></div>
            </div>
        </div>
    </div>
</div>

Sắp xếp theo: Chuẩn | Mới nhất | Bình chọn
admin đăng này 21 Tháng Tám 2016

Bạn bật develop tool lên xem tab console nó ra lỗi gì

TEDU

tuananhk43 đăng này 21 Tháng Tám 2016

Đây là lỗi, các bạn giúp với

admin đăng này 21 Tháng Tám 2016

Đó có rất nhiều lỗi js, bỏ qua các lỗi 404 của image và 1 lỗi của _browlink đi thì bạn nên xem lại các lỗi trong common.js

TEDU

Close