multiple marker on googlemaps from php and mysql

Question

i try to make multiple markers on googlemaps and taking data from database. this is my code

<script>
<?php 


$query =  $db->query('SELECT * FROM tbl_kabkot WHERE 1=1 AND latitude !=0 AND longitude !=0');
  while($row = $query->fetch()){                            

                               $nama_kabkot = $row[nama_kabkot];
                               $longitude = $row[longitude];                              
                               $latitude = $row[latitude]; 


 ?>
      var markers = [
                      [<?= $nama_kabkotv ?>, <?= $latitude ?>, <?= $longitude ?>]
];
<?php } ?>

function initMap() {
    var latlng = new google.maps.LatLng(-33.92, 151.25);
    var myOptions = {
        zoom: 10,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false
    };
    var map = new google.maps.Map(document.getElementById("peta"),myOptions);
    var infowindow = new google.maps.InfoWindow(), marker, i;
    for (i = 0; i < markers.length; i++) {  
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(markers[i][1], markers[i][2]),
            map: map
        });
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(markers[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }
}
</script>

But this code only shows one value from the database. how can i show a multiple markers with database?

Please don't just link to your code, but include a snippet of code that show your problem in the question. — j_4321
– j_4321, Commented Nov 16, 2016 at 8:17

Professor Abronsius · Accepted Answer · 2016-11-16 08:18:10Z

3

The initial sql query has a redundant where clause due to 1=1 but I assume that is for testing. The markers variable in the original code is being over-written on each iteration through the loop so the array will only have one item.

<?php
    /* lat/lng data will be added to this array */
    $locations=array();
    $query =  $db->query('SELECT * FROM tbl_kabkot WHERE 1=1 AND latitude !=0 AND longitude !=0');
        while( $row = $query->fetch() ){

            $nama_kabkot = $row['nama_kabkot'];
            $longitude = $row['longitude'];                              
            $latitude = $row['latitude'];

            /* Each row is added as a new array */
            $locations[]=array( 'name'=>$nama_kabkot, 'lat'=>$latitudem, 'lng'=>$longitude );
        }
        /* Convert data to json */
        $markers = json_encode( $locations );
?>
<script type='text/javascript'>
    <?php
        echo "var markers=$markers;\n";

    ?>

    function initMap() {

        var latlng = new google.maps.LatLng(-33.92, 151.25);
        var myOptions = {
            zoom: 10,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false
        };

        var map = new google.maps.Map(document.getElementById("peta"),myOptions);
        var infowindow = new google.maps.InfoWindow(), marker, lat, lng;
        var json=JSON.parse( markers );

        for( var o in json ){

            lat = json[ o ].lat;
            lng=json[ o ].lng;
            name=json[ o ].name;

            marker = new google.maps.Marker({
                position: new google.maps.LatLng(lat,lng),
                name:name,
                map: map
            }); 
            google.maps.event.addListener( marker, 'click', function(e){
                infowindow.setContent( this.name );
                infowindow.open( map, this );
            }.bind( marker ) );
        }
    }
    </script>

edited Nov 16, 2016 at 8:18

answered Nov 16, 2016 at 7:52

Professor Abronsius

33.9k5 gold badges36 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user12773215 Over a year ago

How can i set default loading location to my geographical loaction

Professor Abronsius Over a year ago

you would use the callback function assigned to a navigator.geolocation.getCurrentPosition ~ see here for more developer.mozilla.org/en-US/docs/Web/API/Geolocation_API

user12773215 Over a year ago

Thats worked thanks, I have one more doubt, While setting infowindow am facing problems,I have more than one data retriving from databse, they are service names ffered in each location. But only 1st service name is displaying in infowindow. How can i do that

Professor Abronsius Over a year ago

The best thing you can do is to ask your own question with all the relevant code rather than asking as a comment on someone else's question & answer... but to answer you here - it's impossible to say as nobody knows the structure of your data!

user12773215 Over a year ago

I have already asked that question, nobody helped me, here is the link stackoverflow.com/questions/60544486/…

prem bhadouriya · Accepted Answer · 2016-11-16 08:07:51Z

<script>

  // The following example creates complex markers to indicate beaches near
  // Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
  // to the base of the flagpole.

  function initMap() {


     var markerscenter = [
    ['Bondi Beach', -33.890542, 151.274856,],
    ['Bondi Beach2', -33.90542, 151.2748,]

  ];

    var map = new google.maps.Map(document.getElementById('map_canvas'), {
      zoom: 10,
      center: {lat:Number(markerscenter[0][0]), lng:Number(markerscenter[0][1])}
    });

    setMarkers(map);
  }

  // Data for the markers consisting of a name, a LatLng and a zIndex for the
  // order in which these markers should display on top of each other.


   var markers = [
    ['Bondi Beach', -33.890542, 151.274856,],
    ['Bondi Beach2', -33.90542, 151.2748,]

  ];                        
// Info Window Content
var infoWindowContent = [
   'desc1','desc2'

  ];               

  function setMarkers(map) {

    var image = 'markeimage.png';



     var infoWindow = new google.maps.InfoWindow(), marker, i;
    for (var i = 0; i < markers.length; i++) {


      //var beach = beaches[i];
      var marker = new google.maps.Marker({
        position: {lat:Number(markers[i][0]), lng: Number(markers[i][1])},
        map: map,
        icon: image,

      });

    google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
        return function() {
            infoWindow.setContent(infoWindowContent[i][0]);
            infoWindow.open(map, marker);
        }
    })(marker, i));
    }

  }
</script>

Collectives™ on Stack Overflow

multiple marker on googlemaps from php and mysql

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related