CODEWITHSUNDEEP
javascriptphpjquerylaravelgoogle-maps
Azzario Razy
Azzario Razy

Reputation: 31

Maps not showing in my 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

Upvotes: 0

Views: 93

Answers (1)

RonyLoud
RonyLoud

Reputation: 2436

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>

Upvotes: 1

Related Questions