Karten zeigen, die nicht in meinem Jquery

Mein Problem ist das Google zeigen Karten nicht, wenn ich versuche, meinen Javascript-Code zu jquery in meinem Laravel App zu wickeln, dies Screenshot:Karten zeigen, die nicht in meinem Jquery

aber meine Konsole ist zeigen den Fehlercode nicht

dies mein Layout ist (Mastercode)

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>

Mein Artcode

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); 
        } 
       } 
      } 
     } 

    });

Ich hoffe, mir

Quelle

2017-11-13 Azzario Razy

Anruf helfen 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>

Quelle

2017-11-13 07:09:00 RonyLoud

nur Karte, aber die Markierung auf der Karte nicht angezeigt werden bis zu initiieren –

Wir müssen auch die erforderlichen 'Typen' übergeben, die Sie einchecken möchten ein bestimmter Radius – RonyLoud

ich getan, um Typ zu schreiben: ['Store'], aber immer noch nicht zeigen die Markierung –

Karten zeigen, die nicht in meinem Jquery

Antwort

Verwandte Themen