Displaying google map with markers using data from mysql (laravel)

Question

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

ss this morning:

Now I'm trying to put marker custom icons and info windows to get something like this (this was made without laravel, only php).

This is my code:

@extends('layouts.app')

@section('content')
    <script src="http://maps.google.com/maps/api/js?sensor=false"
            type="text/javascript"></script>
    <script type="text/javascript">
        //<![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->nazivMarkera}};
                var adresa = {{$marker->adresa}};
                var grad = {{$marker->nazivGrada}};
                var postanskibroj = {{$marker->postanski_broj}};
                var zupanija = {{$marker->nazivZupanije}};

                var html = "<b>" + sadrzaj + "</b> <br/>" + adresa +",<br/>"+postanskibroj+" "+grad+",<br/>"+zupanija;

                var lat = {{$marker->lat}};
                var lng = {{$marker->lng}};
                var image = {{$marker->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(){}
        //]]>
    </script>
<div class="container">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-default">
                <div class="panel-heading">Dobro došli!</div>

                <div class="panel-body">

                    <!-- Moj kod  -->

                    <div id="map"></div>




                    <!-- DO TU -->
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

When I inspect the page I can see that my array with data is filled and I have all the data from db.

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.

Now:

Solution

It looks like load() is not getting called anywhere.

Also I noticed in your screen shots, the variables which have been echoed in by laravel don't have quotes around them.

I would leave laravel(blade) out of the javascript. Currently, your foreach loop will dump heaps of javascript code which will be overriding and re-declaring variables. This is generally messy, and considered bad practice.

I would also make map a global variable, incase you want to manipulate it later.

Try this:

    var map;
    var markers = {!! json_encode($markers) !!}; //this should dump a javascript array object which does not need any extra interperting.
    var marks = []; //just incase you want to be able to manipulate this later

    function load() {

        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 45.327168, lng: 14.442902},
            zoom: 13
        });           

        for(var i = 0; i < markers.length; i++){
            marks[i] = addMarker(markers[i]);
        }
    }

    function addMarker(marker){
        var sadrzaj = marker.nazivMarkera};
        var adresa = marker.adresa;
        var grad = marker.nazivGrada;
        var postanskibroj = marker.postanski_broj;
        var zupanija = marker.nazivZupanije;

        var html = "<b>" + sadrzaj + "</b> <br/>" + adresa +",<br/>"+postanskibroj+" "+grad+",<br/>"+zupanija;


        var markerLatlng = new google.maps.LatLng(parseFloat(marker.lat),parseFloat(marker.lng));


        var mark = new google.maps.Marker({
            map: map,
            position: markerLatlng,
            icon: marker.slika
        });

        var infoWindow = new google.maps.InfoWindow;
        google.maps.event.addListener(mark, 'click', function(){
            infoWindow.setContent(html);
            infoWindow.open(map, mark);
        });

        return mark;
    }

    function doNothing(){} //very appropriately named function. whats it for?

I also fixed up several small errors in the code, such as

1. info window was spelt wrong inside your bind function "infowWindow"
2. your infoWindow listener need to bind to mark not marker
3. you don't really need to individually extract out each variable from marker

Also, you need to call the load() function from somewhere. Maybe put onLoad="load()" on your body object or top level div. Or use the google DOM listener:

google.maps.event.addDomListener(window, 'load', load);

This will execute your load() function when the window is ready.

Comments

[Admin]

I'm not sure what do you mean ? if you're suggesting to move CDATA it's not helping... I'm not sure where is best place in code to put this js, maybe that's the problem?

[phaberest]

google.maps.Map(document.getElementById('map')) is crucial to tell maps that you want a map into the div that has a id of map. You may call load() at the end of your javascript (where would execute in any case) or take the part highlighted in the answer out of that javascript function, actually before it. However you do it, it has to be executed. ;)

[Admin]

Thank you for explaining me mistakes and giving me some tips, but I still don't have working map with markers. I tried onload, domlistener, calling script function inside div="map" ... :/ ps. doNothing() is from google tutorials when you use xml file for data. Forgot to delete it. :)

[Admin]

Ok I have it now. I moved js. function outside html tags (I don't know why.. ) and added domlistener at the end of script tags. Everything is working, thank you for your time, I hope you'd be able to help me more with js in the future :)

[Admin]

Still can't get custom icons... when I inspect code image from database value is "img\/markers\/image.png" .. in the database it is saved as "img/markers/image.png" , is that maybe causing the problem?