duankuai6586 2017-11-13 06:44
浏览 27
已采纳

地图没有显示在我的jquery中

My problem is the google maps not showing when i trying to wrap my javascript code to jquery in my laravel app, this is screenshot:

enter image description here

but my console is not show the error code

this is my layout (master code)

master.blade.php

<!DOCTYPE html>
        <html>
            <head>
                <title>Laravel Maps</title>
                <meta name="viewport" content="initial-scale=1.0">
                <meta charset="utf-8">
                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
                <link rel="stylesheet" type="text/css" href="{{ asset('css/common.css') }}">
                @yield('style')
            </head>
            <body>

                @yield('content')

                <!-- JQuery -->
                <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
                <!--Common js -->
                <script src="{{ asset('js/common.js') }}"></script>
                <!-- Google maps js -->
                <script async defer src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyDNqwhqdjvjjHzaiYNh-T8layzr-pQBcAs"></script>
                <!-- Bootstrap js -->
                <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
            </body>
        </html>

My style code

common.css

#map {
        max-width: 100%;
        height: 500px;
        width: 600px;
        margin: 0 auto;
    }

index.blade.php

@extends('layouts.master')

    @section('content')
        <div class="container">
            <div id="map">

            </div>
        </div>
    @endsection

common.js

$(document).ready(function() {
        //initialize map
        var map;
        var myLat = new google.maps.LatLng(-33.8665433,151.1956316);
        //core map
        function createMap(myLat) {
            map = new google.maps.Map(document.getElementById('map'), {
                center: myLat,
                zoom: 12
            }); 
        }

        //marker
        function createMarker(latlng, icn, title) {
            var marker = new google.maps.Marker({
              position: latlng,
              icon: icn,
              Map: map,
              title: title
            });
        }

        function nearby(myLat, types) {
                //request location nearby
            var request = {
                location: myLat,
                radius: '2500',
                type: [types]
              };

            service = new google.maps.places.PlacesService(map);
            service.nearbySearch(request, callback);

            function callback(results, status) {
                if (status == google.maps.places.PlacesServiceStatus.OK) {
                    for (var i = 0; i < results.length; i++) {
                        var place   = results[i];
                        latlng      = place.geometry.location;
                        icn         = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
                        title       = place.name;

              createMarker(latlng,icn,title);
                    }
                }
            }
        }

    });

I hope you can help me

  • 写回答

1条回答 默认 最新

  • duandu8202 2017-11-13 07:09
    关注

    Call to initiate createMap 

            var map;
        var myLat = new google.maps.LatLng(-33.8665433,151.1956316);
        function createMap(myLat) {
            map = new google.maps.Map(document.getElementById('map'), {
                center: myLat,
                zoom: 12
            }); 
        }
        
        //marker
        function createMarker(latlng, icn, title) {
            var marker = new google.maps.Marker({
              position: latlng,
              icon: icn,
              Map: map,
              title: title
            });
        }

        function nearby(myLat, types) {
                //request location nearby
            var request = {
                location: myLat,
                radius: '2500',
                type: [types]
              };

            service = new google.maps.places.PlacesService(map);
            service.nearbySearch(request, callback);

            function callback(results, status) {
                if (status == google.maps.places.PlacesServiceStatus.OK) {
                    for (var i = 0; i < results.length; i++) {
                        var place   = results[i];
                        latlng      = place.geometry.location;
                        icn         = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
                        title       = place.name;

              createMarker(latlng,icn,title);
                    }
                }
            }
        }
        //to call createMap function
        createMap(myLat);
    #map {
        max-width: 100%;
        height: 500px;
        width: 600px;
        margin: 0 auto;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyDNqwhqdjvjjHzaiYNh-T8layzr-pQBcAs"></script>


<div class="container">
 <div id="map">

 </div>
</div>

    </div>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 目详情-五一模拟赛详情页
  • ¥15 有了解d3和topogram.js库的吗？有偿请教
  • ¥100 任意维数的K均值聚类
  • ¥15 stamps做sbas-insar，时序沉降图怎么画
  • ¥15 买了个传感器，根据商家发的代码和步骤使用但是代码报错了不会改，有没有人可以看看
  • ¥15 关于#Java#的问题，如何解决？
  • ¥15 加热介质是液体，换热器壳侧导热系数和总的导热系数怎么算
  • ¥100 嵌入式系统基于PIC16F882和热敏电阻的数字温度计
  • ¥15 cmd cl 0x000007b
  • ¥20 BAPI_PR_CHANGE how to add account assignment information for service line