How to Show Google Maps with Multiple Locations and Many Markers in PHP

问题

Actually,i have created basic google map in my website i need How to Show Google Maps with Multiple Locations and Many Markers in PHP, i have stored data like(name, address,latitude,longitude) in database, please how to show exactly place marker in my google map please help me.

Here my php code:

<?php
  $dbhost =   'localhost';
    $dbuser =   'root'; 
    $dbpwd  =   ''; 
    $dbname =   'rentozy_db';
    $db =   new mysqli( $dbhost, $dbuser, $dbpwd, $dbname );


$sql='select * from `tbl_master_property`;';
    $result=$db->query( $sql );

    $attribs=array('pg_id','name','pg_address','lat','lng','pg_type');


    $dom=new DOMDocument('1.0');
    $root=$dom->createElement('tbl_master_property');
    $dom->appendChild($root);


    while( $rs=$result->fetch_object() ){
        $node=$dom->createElement('tbl_master_property');
        $root->appendChild($node);

         foreach( $attribs as $attrib ){
            $attr = $dom->createAttribute($attrib);
            $value= $dom->createTextNode($rs->$attrib);
            $attr->appendChild($value);
            $node->appendChild($attr);
        }
      }
    echo $dom->saveXML();  
?>

here my script code:

<div class="map">
      <div id="map"></div>
    <script>
            var customLabel = {
        restaurant: {
          label: 'R'
        },
        bar: {
          label: 'B'
        }
      };

        function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(-33.863276, 151.207977),
          zoom: 12
        });
        var infoWindow = new google.maps.InfoWindow;

          // Change this depending on the name of your PHP or XML file
          downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml', function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('marker');
            Array.prototype.forEach.call(markers, function(markerElem) {
              var id = markerElem.getAttribute('id');
              var name = markerElem.getAttribute('name');
              var address = markerElem.getAttribute('address');
              var type = markerElem.getAttribute('type');
              var point = new google.maps.LatLng(
                  parseFloat(markerElem.getAttribute('lat')),
                  parseFloat(markerElem.getAttribute('lng')));

              var infowincontent = document.createElement('div');
              var strong = document.createElement('strong');
              strong.textContent = name
              infowincontent.appendChild(strong);
              infowincontent.appendChild(document.createElement('br'));

              var text = document.createElement('text');
              text.textContent = address
              infowincontent.appendChild(text);
              var icon = customLabel[type] || {};
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                label: icon.label
              });
              marker.addListener('click', function() {
                infoWindow.setContent(infowincontent);
                infoWindow.open(map, marker);
              });
            });
          });
        }
      function downloadUrl(url, callback) {
        var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;

        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
          }
        };

        request.open('GET', url, true);
        request.send(null);
      }

      function doNothing() {}
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDvyRXDlH8lyIFaFMPldx_hK2Nfh-hduDE&callback=initMap">
    </script>
    </div>

回答1:

Following on from the previous question and answer I gave you should find the following of interest perhaps.

<?php
    if( $_SERVER['REQUEST_METHOD']=='GET' && !empty( $_GET['action'] ) && $_GET['action']=='getXML' ){

        $dbhost =   'localhost';
        $dbuser =   'root'; 
        $dbpwd  =   'xxx'; 
        $dbname =   'xxx';
        $db =   new mysqli( $dbhost, $dbuser, $dbpwd, $dbname );

        $sql='select * from `markers`;';
        $result=$db->query( $sql );

        $attribs=array('id','name','address','lat','lng','type');


        $dom=new DOMDocument('1.0','utf-8');
        $dom->formatOutput=true;
        $dom->standalone=true;
        $dom->recover=true;


        $root=$dom->createElement('tbl_master_property');
        $dom->appendChild( $root );


        while( $rs=$result->fetch_object() ){
            $node=$dom->createElement('marker');
            $root->appendChild( $node );

            foreach( $attribs as $attrib ){
                $attr = $dom->createAttribute( $attrib );
                $value= $dom->createTextNode( $rs->$attrib );
                $attr->appendChild( $value );
                $node->appendChild( $attr );
            }
        }

        header('Content-Type: application/xml');
        exit( $dom->saveXML() );
    }
?>
<!doctype html>
<html>
    <head>
        <meta charset='utf-8' />
        <title>G00gle Maps</title>

        <script>
            var _markers=[];
            function downloadUrl( url, callback ) {
                var xhr = new XMLHttpRequest;
                xhr.onreadystatechange = function() {
                    if( this.readyState == 4 && this.status==200 ) callback( this.responseXML );
                };
                xhr.open( 'GET', url, true );
                xhr.send( null );
            }

            function initMap(){
                var customLabel = {
                    restaurant:{ label:'R' },
                    bar:{ label:'B' }
                };

                var div=document.getElementById('map');
                var options={
                    center: new google.maps.LatLng( -33.863276, 151.207977 ),
                    zoom: 12
                };

                var map = new google.maps.Map( div, options );
                var infoWindow = new google.maps.InfoWindow;

                var _callback=function( xml ){
                    var markers = Array.prototype.slice.call( xml.documentElement.getElementsByTagName('marker') );
                    markers.forEach(function(mkr){
                        var id=mkr.getAttribute('id');
                        var lat=mkr.getAttribute('lat');
                        var lng=mkr.getAttribute('lng');
                        var address=mkr.getAttribute('address');
                        var type=mkr.getAttribute('type');

                        var latlng=new google.maps.LatLng(lat,lng);
                        var label = customLabel[ type ] || {};

                        console.info('id=%s lat=%s lng=%s address=%s type=%s',id,lat,lng,address,type);

                        var marker = new google.maps.Marker({
                            map: map,
                            position: latlng,
                            title:address
                        });
                        marker.addListener('click', function(e) {
                            console.info( e.latLng.lat() +','+e.latLng.lng() );
                            infoWindow.setContent( decodeURI( address ) );
                            infoWindow.open( map, marker );
                        });

                        _markers.push( marker );
                    });
                }


                /* fetch the xml data */
                var xml=downloadUrl( '?action=getXML', _callback );
            }
        </script>
        <script async defer src="//maps.googleapis.com/maps/api/js?key=AIzaSyDvyRXDlH8lyIFaFMPldx_hK2Nfh-hduDE&callback=initMap"></script>
        <style type='text/css' charset='utf-8'>
            #map{
                width:800px;
                height:600px;
            }
        </style>
    </head>
    <body>
        <div id='map'></div>
    </body>
</html>

来源：https://stackoverflow.com/questions/48110899/how-to-show-google-maps-with-multiple-locations-and-many-markers-in-php