구글 I는 <a href="https://github.com/Olicek/GoogleMapAPI" rel="nofollow noreferrer">this</a></p> <p>그것은지도가 표시되지 않습니다 useing 내 nette 웹 사이트에 구글 맵을 넣어려고

Question

nette 웹에서지도하지만를 시도합니다 (소스 코드)

<section> 
<div class="googleMapAPI" data-map="{&quot;position&quot;:[null,null],&  quot;height&quot;:&quot;100%&quot;,&quot;width&quot;:&quot;100%&quot;,&quot;zoom&quot;:7,&quot;type&quot;:&quot;ROADMAP&quot;,&quot;scrollable&quot;:true,&quot;key&quot;:null,&quot;bound&quot;:true,&quot;cluster&quot;:true,&quot;clusterOptions&quot;:[],&quot;waypoint&quot;:null}" data-basePath="/maps" data-markersFallback="/maps/?do=map-markers"></div> 
</section> 

나는 그 addon의 문서를 따라하려고했지만 그것은 단지지도를 보여주지 않는다. 내가 뭘 잘못하고 있는거야?

class MapPresenter extends BaseCorePresenter 
{ 
use \Oli\GoogleAPI\TMap; 

private $map; 
private $markers; 

public function __construct(\Oli\GoogleAPI\IMapAPI $mapApi, \Oli\GoogleAPI    \IMarkers $markers) 
{ 
parent::__construct(); 
$this->map = $mapApi; 
$this->markers = $markers; 
} 

public function createComponentMap() 
{ 
$map = $this->map->create(); 
$markers = $this->markers->create(); 

$markers = $this->markers->create(); 

$markers->addMarker(array(50.250718,14.583435), false, null); 
$markers->setIcon('someIcon.png'); 
$markers->setMessage('<h1>Hello world</h1>', false); 
$markers->deleteMarkers(); 
$markers->isMarkerClusterer(); // neer markers group to one cluster 
$markers->fitBounds(); // zoom as mutch as possible, but every marker will  be displaied 

$markers->setDefaultIconPath('img/'); // Path which will be prepend icon  path 

/** 
* Icon from www folder. 
* If default path was not set, setIcon would be '/www/someIcon.png' 
*/ 

$map->addMarkers($markers); 
return $map; 
} 


} 

Ok 최소. 발표자 :

class MapPresenter extends BaseCorePresenter 
{ 
    use \Oli\GoogleAPI\TMap; 

} 

템플릿 :

{block content} 
{control map} 

{/block} 
{block scripts} 
{include parent} 
      <script src="vendor/olicek/google-map-api/client-side/googleMapAPI.js" /> 
      <script src="vendor/olicek/google-map-api/client-side/googleMapApiLoader.js" /> 
{/block} 

구성 :

이제

extensions: 
    map: Oli\GoogleAPI\MapApiExtension 
map: 
    key: your_key        # your personal key to google map 
    zoom: 2          
    width: 300px        # map will 300px width 
    height: 150px        # map will 150px height 
    coordinates:        # you can name keies as you whis or use [49, 15] 
     lat: 49.8037633 
     lng: 15.4749126 
    type: SATELLITE        # type of map 
    markers:         # this section will be configured amrkers 
     bound: on        # zoom as mutch as possible, but every marker will be displaied 
     markerClusterer: on      # neer markers group to one cluster 
     addMarkers:        # definitions of markers 
      -         # first marker has no name 
       coordinates:     # the same as map coordinates 
        sirka: 47 
        vyska: 15 
       icon: images/point.png   # it will display png image from www/images/point.png 
       message: 
        text: Opened message  # text of message 
        autoOpen: on    # if it is on, this message will be displaied after map loaded 
      1:         # second marker has name 1 
       coordinates: [46, 13] 
       animation: DROP     # this marker will has drop animation 
       title: Hello world 
       icon: images/point2.png 
      Prague:        # last marker has name Prague 
       coordinates: 
        lat: 48 
        lng: 15 
       animation: DROP 
       message: 
        Closed message 

,지도 faund 페이지의 소스 코드에서 DIV (지도) 다음과 같습니다 어디에도 없습니다 :

<div class="googleMapAPI" data-map="{&quot;position&quot;:[49.8037633,15.4749126],&quot;height&quot;:&quot;150px&quot;,&quot;width&quot;:&quot;300px&quot;,&quot;zoom&quot;:2,&quot;type&quot;:&quot;SATELLITE&quot;,&quot;scrollable&quot;:true,&quot;key&quot;:&quot;your_key&quot;,&quot;bound&quot;:true,&quot;cluster&quot;:true,&quot;clusterOptions&quot;:[],&quot;waypoint&quot;:null}" data-basePath="/maps" data-markersFallback="/maps/?do=map-markers"></div> 

Documentation

Answer 1

가능하면 액세스 할 위치에서 스크립트 태그에 키를 추가해야합니다. 브라우저에서 더 정밀 열고 불을 지르고 들어

https://developers.google.com/maps/documentation/javascript/get-api-key 

을 그리고 아마도 그것은 몇 가지 오류가 발생합니다 그리고 당신이 그것을 게시 할 수 있습니다, 해당 페이지를 실행하려고 :

<script src="http://maps.googleapis.com/maps/api/js?key=yourKeYwhichWillGoHereAndCanDisplay&sensor=false&extension=.js"></script> 

현재 키를 생성 할 수 있습니다.