javascript - Displaying google map with markers using data from mysql (laravel) - Stack Overflow

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=""
            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:

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./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:

• javascript
• php
• google-maps
• laravel
• google-maps-api-3

Share Improve this question Follow edited Oct 3, 2019 at 13:17 Glorfindel 22.7k1313 gold badges9090 silver badges120120 bronze badges asked Feb 18, 2016 at 1:29 user5810842user5810842 2

• It is preferred if you can post separate questions instead of bining your questions into one. That way, it helps the people answering your question and also others hunting for at least one of your questions. Thanks! – phaberest Commented Feb 18, 2016 at 1:46
• I'm sorry because of that, you can ignore question about blade sintax. My main issue here is displaying google map and markers properly! – user5810842 Commented Feb 18, 2016 at 2:59

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 0

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.

You have lo leave

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

out of the mented area, otherwise you're not initializing it.