Google maps in nette web

Question

I'm trying to put a google map into my nette website useing this

It doesn't show the map but it tries to: (source code)

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

I've tryed to follow the documentation of that addon but it just doesnt show the map. Any ideas what i'm doing wrong?

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 minimal. Presenter:

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

}

Template:

{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}

Config:

    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

Now, map is nowhere to be faund and div (map) in page source code looks like this:

<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

To give you a great answer, it might help us if you have a glance at [ask] if you haven't already. It might be also useful if you could provide a [mcve]. — Mat, Jan 27 '17 at 12:22

score 0 · Answer 1 · answered Jan 27 '17 at 14:23

0

Possibly You need to add your key in-to your script tag from where you are accessing.

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

You can generate your key here:

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

For More precision open firebug in your browser and try to run that page, possibly it will throw some error and then you can post it.

answered Jan 27 '17 at 14:23

Jaymin

1,643
1
18
39

I'm useing that key. In the end i've solved the problem but then i've run into another one. I'm useing bootstrap and i dont known how to set responsive height. – Muhaha Jan 30 '17 at 08:45
In console you can see, the ajax's are called in behind? Those ajax's requests are fitted in a div. You can change the height widht of that div.
– Jaymin Jan 30 '17 at 09:10
No. that is not responsive. It has to adjust to height of the page (monitor) - height:100%; not height: ? px;. – Muhaha Jan 30 '17 at 09:15

score 0 · Answer 2 · answered May 09 '22 at 07:46

Maybe it will still help someone.

I think, from latte file or frontend overall you aren't allowed to access vendor files, so i copied js files from vendor/olicek/google-maps-api/client-side to www/js. Then you need to include googleapis js file with your key and it will work.

Google maps in nette web

2 Answers2