Google Maps with multiple markers coming from the database

Question

I have a code where he takes the longitude and latitude of where you are and puts it on a map. I need to make this map show all the latitudes and longitudes of the database with markers at each of these points. My code is in Codeigniter and I use the Mysql database, but I haven’t been able to make the connection to the bank, the only thing I have is in the View part.

 <div class="col-sm-12">
        <div id="map_canvas" style="height: 400px;" class="google_maps"></div>
    </div>


<script type="application/javascript">
    $(document).ready(function() {

        var colorful_style = [{
            "featureType": "landscape",
            "stylers": [{
                "visibility": "off"
            }]
        }, {
            "featureType": "transit",
            "stylers": [{
                "visibility": "off"
            }]
        }, {
            "featureType": "poi.park",
            "elementType": "labels",
            "stylers": [{
                "visibility": "off"
            }]
        }, {
            "featureType": "poi.park",
            "elementType": "geometry.fill",
            "stylers": [{
                "color": "#d3d3d3"
            }, {
                "visibility": "on"
            }]
        }, {
            "featureType": "road",
            "elementType": "geometry.stroke",
            "stylers": [{
                "visibility": "off"
            }]
        }, {
            "featureType": "landscape",
            "stylers": [{
                "visibility": "on"
            }, {
                "color": "#b1bc39"
            }]
        }, {
            "featureType": "landscape.man_made",
            "stylers": [{
                "visibility": "on"
            }, {
                "color": "#ebad02"
            }]
        }, {
            "featureType": "water",
            "elementType": "geometry.fill",
            "stylers": [{
                "visibility": "on"
            }, {
                "color": "#416d9f"
            }]
        }, {
            "featureType": "road",
            "elementType": "labels.text.fill",
            "stylers": [{
                "visibility": "on"
            }, {
                "color": "#000000"
            }]
        }, {
            "featureType": "road",
            "elementType": "labels.text.stroke",
            "stylers": [{
                "visibility": "off"
            }, {
                "color": "#ffffff"
            }]
        }, {
            "featureType": "administrative",
            "elementType": "labels.text.fill",
            "stylers": [{
                "visibility": "on"
            }, {
                "color": "#000000"
            }]
        }, {
            "featureType": "road",
            "elementType": "geometry.fill",
            "stylers": [{
                "visibility": "on"
            }, {
                "color": "#ffffff"
            }]
        }, {
            "featureType": "road",
            "elementType": "labels.icon",
            "stylers": [{
                "visibility": "off"
            }]
        }, {
            "featureType": "water",
            "elementType": "labels",
            "stylers": [{
                "visibility": "off"
            }]
        }, {
            "featureType": "poi",
            "elementType": "geometry.fill",
            "stylers": [{
                "color": "#ebad02"
            }]
        }, {
            "featureType": "poi.park",
            "elementType": "geometry.fill",
            "stylers": [{
                "color": "#8ca83c"
            }]
        }];

        /*
         * Google Maps Initialize
         */

        function initialize() {
            colorfulStyleMap = new google.maps.StyledMapType(colorful_style, {name: "Colorful"});
            function generateMap() {
                navigator.geolocation.getCurrentPosition(function(position) {
                    var pos = new google.maps.LatLng(position.coords.latitude,
                        position.coords.longitude);

                    var infowindow = new google.maps.InfoWindow({
                        map: map,
                        position: pos,
                        content: 'Você esta aqui!'
                    });

                    map.setCenter(pos);
                }, function() {
                    handleNoGeolocation(true);
                });

                var mapOptions = {
                    zoom: 11
                };

                map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

                google.maps.event.addListenerOnce(map, 'idle', function() {
                    google.maps.event.trigger(map, 'resize');
                });
                map.mapTypes.set('colorful_style', colorfulStyleMap);
                map.setMapTypeId('colorful_style');


            }
            generateMap();
        }

        $(window).bind('gMapsLoaded', initialize);
        window.loadGoogleMaps();
    });
</script>

Answer 1

Assuming you provide all the coordinates to the map through a JSON object, this would be:

At the end of the function generateMap()

$.ajax({
   url: 'http://www.json-generator.com/api/json/get/cgVhTayIHS?indent=2', // aqui vai a URL do método
   dataType: 'json',
   success: function (response) {
       for( var i = 0; i < response.length; i++ ){
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(response[i].latitude, response[i].longitude),
                map: map,
                title: response[i].name,
                icon: 'pin.png' // você pode inserir o caminho de um PNG que vai servir como o pin, ou apague esta linha
            });
        }
   }
});

What this script does: after receiving a list of coordinates with names, scrolls through the records and adds each location to the map map which was previously created in the code (through the method marker, creates the marker).

Answer 2

Here’s another solution using Google maps and Bootstrap + PHP + Mysql. Adapt to your code:

<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="icon" href="http://getbootstrap.com/favicon.ico">

        <title>GMAPS_TESTE</title>

        <style type="text/css">
            html, body { height: 100%; margin: 0; padding: 0; }
            #map { height: 100%; }
        </style>


        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">



        <!-- Custom styles for this template -->
        <link href="starter-template.css" rel="stylesheet">



        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>









        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>

    <body>


        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="http://getbootstrap.com/examples/starter-template/#">Project name</a>
                </div>
                <div id="navbar" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="http://getbootstrap.com/examples/starter-template/#">Home</a></li>
                        <li><a href="http://getbootstrap.com/examples/starter-template/#about">About</a></li>
                        <li><a href="http://getbootstrap.com/examples/starter-template/#contact">Contact</a></li>
                    </ul>
                </div><!--/.nav-collapse -->
            </div>
        </nav>

        <div class="container-fluid">

            <div class="row">
                <div class="col-md-12">
                    <div class="starter-template">
                        <h1>Google Maps teste com Bootstrap</h1>                        
                        <p>Powered by Igor Alves</p>
                    </div>
                </div>
            </div>



            <div class="row">
                <div class="col-md-1">
                </div>
                <div class="col-md-10">
                    <div id="map"></div>
                </div>
                <div class="col-md-1">
                </div>
            </div>

        </div>

        <footer class="footer">
            <p>© 2015 Company, Inc.</p>
        </footer>


        <!-- Include Google Maps JS API -->
        <script type="text/javascript"
          src="https://maps.googleapis.com/maps/api/js?key=A_SUA_CHAVE&sensor=false">
        </script>

    <script type="text/javascript">





       $(window).resize(function () {
             var h = $(window).height(),
                     offsetTop = 60; // Calculate the top offset
             $('#map').css('height', (h - offsetTop));
         }).resize();//Fazer o display de GMAPS dentro de Bootstrap




//Inicializa um mapa 
var map;

function initMap() {


                  var myLatLng = new google.maps.LatLng(-12.9464758, -38.4474323);

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



<?php


$con=mysqli_connect("localhost","my_user","my_password","my_db");
// Testa conexao
if (mysqli_connect_errno())
  {
  echo "Falha de conexao ao MySQL: " . mysqli_connect_error();
  }

$sql="SELECT * FROM tabelaPontosInfo";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
    // output data of each row
    while($row = $result->fetch_assoc()) {
        $arrayInfo[]=["name"=>$row["name"],"content"=>$row["content"],"latLong"=>$row["lat"].",".$row["Long"],"iconPath"=>$row["iconPath"];
    }
} else {
    echo "nenhum resultado";
}
$conn->close();



//Aqui nesse ponto vc tera a sua array de informações para gerar o mapa com os pontos
$arrayInfo

//Agora vejamos exemplos de informações dentro dessa array:



//O que pode ser guardado dentro de content exemplos:
$strHtmlcontent1="<div style=\'margin: 5px;border: 2px solid    #000000;height:200px; width: 300px; overflow:hidden; \'><a href=\'https://igoralves1.github.io\' target=\'_blank\'><img src=\'fotop1.jpg\' width=\'300\' height=\'200\' ></a></div><div style=\'padding: 15px;text-align: center;\'><h2>Algum texto p1</h2></div><div style=\'padding: 15px;text-align: center;\'>Add a description of the image here</div><div style=\'padding: 15px;text-align: center;\'>Add a description of the image here</div><div style=\'padding: 15px;text-align: center;\'>Add a description of the image here</div><div style=\'padding: 15px;text-align: center;\'>Add a description of the image here</div>";
$strHtmlcontent2="<div style=\'margin: 5px;border: 2px solid    #000000;height:200px; width: 300px; overflow:hidden; \'><a href=\'https://igoralves1.github.io\' target=\'_blank\'><img src=\'fotop2.jpg\' width=\'300\' height=\'200\' ></a></div><div style=\'padding: 15px;text-align: center;\'><h2>Algum texto p2</h2></div><div style=\'padding: 15px;text-align: center;\'>Add a description of the image here</div><div style=\'padding: 15px;text-align: center;\'>Add a description of the image here</div><div style=\'padding: 15px;text-align: center;\'>Add a description of the image here</div><div style=\'padding: 15px;text-align: center;\'>Add a description of the image here</div>";

//Exemplo da array:
$arrayInfo = [

     [
        "name"=>"Ponto 1",
        "content"=>"$strHtmlcontent1",
        "latLong"=>"-12.142105, -40.362556",
        //"iconPath"=>"http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|00ff00|000000" //http://stackoverflow.com/questions/7095574/google-maps-api-3-custom-marker-color-for-default-dot-marker
        //"iconPath"=>"http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|00ff00|000000"
        "iconPath"=>"p1.gif"
    ],
     [
        "name"=>"Ponto 2",
        "content"=>"$strHtmlcontent2",
        "latLong"=>"-12.139101, -40.360639",
        "iconPath"=>"p2.png"
    ],
     [
        "name"=>"Ponto 3",
        "content"=>"$strHtml",
        "latLong"=>"-13.005904, -38.532634",
        "iconPath"=>"p3.gif"
    ]
];  



//Aqui vc percorre sua array e monta seus objetos:
$i=1;

foreach ($arrayInfo as $val) { 

 echo "var marker$i='';";
 echo "\n";
 echo "var infowindow$i='';";
 echo "\n";

       $str .=<<<EOF

                 marker$i = new google.maps.Marker({
                        position: new google.maps.LatLng({$val["latLong"]}),
                        map: map,
                        optimized:false,
                        icon: '{$val["iconPath"]}',
                        title: '{$val["name"]}'
                    });


                    infowindow$i = new google.maps.InfoWindow({
                        content: '{$val["content"]}'
                    });


                    google.maps.event.addListener(marker$i, 'click', function() {
                        infowindow$i.open(map, marker$i);
                    });



EOF;

$i++;        
}


echo $str;  

///////////////////////////////////////////////////////////////////////
?>

}         


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



        </script>

        <!-- 
        <script async defer
                src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDzI2SrfmCSWlwCezs4QBwGYwClrC0qtMk&callback=initMap">
        </script>
        -->

        <!-- Bootstrap core JavaScript
        ================================================== -->


        <!-- Latest compiled JavaScript -->
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


    </body>


</html>

NOTE:Don’t forget to use your google maps key