title: Displaying google map with markers using data from mysql (laravel)
body: <p>I'm working on a web app that includes google map and a bunch of markers.
  This morning I had working map+markers from db (but I used only one table with data). </p>
  
  <p>ss this morning: </p>
  
  <p><img src="https://i.stack.imgur.com/xjtrB.jpg" alt="map with markers"></p>
  
  <p>Now I'm trying to put marker custom icons and info windows to get something like this (this was made without laravel, only php).</p>
  
  <p><img src="https://i.stack.imgur.com/va47d.jpg" alt="plane php ss"></p>
  
  <p>This is my code:</p>
  
  <pre><code>@extends('layouts.app')
  
  @section('content')
      &lt;script src="http://maps.google.com/maps/api/js?sensor=false"
              type="text/javascript"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          //&lt;![CDATA[
  
          function load() {
  
              var map = new google.maps.Map(document.getElementById('map'), {
                  center: {lat: 45.327168, lng: 14.442902},
                  zoom: 13
              });
  
              var infoWindow = new google.maps.InfoWindow;
  
              @foreach($markers as $marker)
                  var sadrzaj = {{$marker-&gt;nazivMarkera}};
                  var adresa = {{$marker-&gt;adresa}};
                  var grad = {{$marker-&gt;nazivGrada}};
                  var postanskibroj = {{$marker-&gt;postanski_broj}};
                  var zupanija = {{$marker-&gt;nazivZupanije}};
  
                  var html = "&lt;b&gt;" + sadrzaj + "&lt;/b&gt; &lt;br/&gt;" + adresa +",&lt;br/&gt;"+postanskibroj+" "+grad+",&lt;br/&gt;"+zupanija;
  
                  var lat = {{$marker-&gt;lat}};
                  var lng = {{$marker-&gt;lng}};
                  var image = {{$marker-&gt;slika}};
  
                  var markerLatlng = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
  
  
                  var mark = new google.maps.Marker({
                      map: map,
                      position: markerLatlng,
                      icon: image
                  });
  
                  bindInfoWindow(mark, map, infoWindow, html);
              @endforeach
          }
  
          function bindInfoWindow(mark, map, infoWindow, html){
              google.maps.event.addListener(marker, 'click', function(){
                  infoWindow.setContent(html);
                  infowWindow.open(map, mark);
              });
          }
  
          function doNothing(){}
          //]]&gt;
      &lt;/script&gt;
  &lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-10 col-md-offset-1"&gt;
              &lt;div class="panel panel-default"&gt;
                  &lt;div class="panel-heading"&gt;Dobro došli!&lt;/div&gt;
  
                  &lt;div class="panel-body"&gt;
  
                      &lt;!-- Moj kod  --&gt;
  
                      &lt;div id="map"&gt;&lt;/div&gt;
  
  
  
  
                      &lt;!-- DO TU --&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  @endsection
  </code></pre>
  
  <p>When I inspect the page I can see that my array with data is filled and I have all the data from db. </p>
  
  <p><a href="https://i.stack.imgur.com/Goxyr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Goxyr.png" alt="picture 3"></a>
  </p>
  
  <p>Can someone help me and explain to me where is the problem? Why when I remove functions for markers, and set only map init, I get map view with no problem, and now I don't even get the map.</p>
  
  <p>Now: </p>
  
  <p><img src="https://i.stack.imgur.com/Nj3hS.png" alt="picture 4"></p>