Google Maps with multiple markers from the database

Navigation
5

I have a code where it takes the longitude and latitude from where you are and places it on a map. I need to have all the latitudes and longitudes of the database with markers on each of these points appear on this map. My code is in Codeigniter and I use the Mysql bank, but I have not yet been able to connect 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>
    
asked by anonymous 11.08.2015 / 14:21

2 answers

1

Assuming you give all map coordinates 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 named coordinates, it traverses the records and adds each location to the map map that was previously created in the code (using the marker method, creates the marker).

    
22.02.2016 / 18:16
0

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><!--HTML5shimandRespond.jsforIE8supportofHTML5elementsandmediaqueries--><!--[ifltIE9]><scriptsrc="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><navclass="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><scripttype="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>--><!--BootstrapcoreJavaScript==================================================--><!--LatestcompiledJavaScript--><scriptsrc="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


    </body>


</html>

NOTE: Do not forget to use your google maps key

    
05.06.2016 / 21:13
Display hidden div according to the value of a Dropdown Qt calling the method in another class