CODEWITHSUNDEEP
phpjqueryhtmljsongoogle-maps
Raj
Raj

Reputation: 47

How to make multiple google marker based on address from database in php

I have to created multiple google marker based on lat and long from database,but i need how to make multiple google marker based on address in php or json, in below the i tried & completed loading XML file for getting (lat & long),i need based on address please help any one. This is based on loading XML file:

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

    // var locs = [ ["-33.863276, 151.207977"],customLabel


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

          downloadUrl('http://www.rentozy.in/rentozy.xml', function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('marker');
            Array.prototype.forEach.call(markers, function(markerElem) {
              var id = markerElem.getAttribute('pg_id');
              var name = markerElem.getAttribute('name');
              var address = markerElem.getAttribute('pg_address');
              var type = markerElem.getAttribute('pg_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>

Upvotes: 0

Views: 266

Answers (2)

Raj
Raj

Reputation: 47

Yaa your comment is ok sir but i don't want load xml file i need to pass directly address to google maps api, i'm getting all address from database we have to pass directly address to google maps api.

Upvotes: 0

Professor Abronsius
Professor Abronsius

Reputation: 33823

As per my comment - use the geocoding service to map an address to a lat/lng coordinate. There is a query limit for this and, as the screenshot shows, this quota limit can very quickly be exceeded.

<!--
    /*
        https://developers.google.com/maps/documentation/javascript/geocoding
        https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple
    */
-->
<!doctype html>
<html>
    <head>
        <meta charset='utf-8' />
        <title>Google maps: Geocode XML File, add markers</title>
        <style>
            body{
                height:100vh;
                width:100%;
                padding:0;
                margin:0;
            }
            #map{
                width:800px;
                height:600px;
                float:none;
                margin:auto;
            }
        </style>
        <script>
            var customLabel = {
                restaurant: { label: 'R' },
                bar: { label: 'B' }
            };

            var latlng,map,geocoder,infoWindow,marker;
            var id,address,type,name;

            function initMap() {
                /* create reference to the geoCoder */
                geocoder = new google.maps.Geocoder();

                map = new google.maps.Map(document.getElementById('map'), {
                  center: new google.maps.LatLng(12.92279500, 77.61440500),
                  zoom: 12
                });
                infoWindow = new google.maps.InfoWindow;

                /* callback function to process Geocoding response data */
                var evtcallback=function(results, status){
                    var _address, _location, _lat, _lng;

                    if( status == google.maps.GeocoderStatus.OK ){

                        console.info('evtcallback: %o',results);

                        _address=results[0].formatted_address;
                        _location=results[0].geometry.location;
                        _lat=_location.lat();
                        _lng=_location.lng();

                        latlng=new google.maps.LatLng( _lat, _lng );

                        /* use the callback to do something with the data. Add to db, add a marker etc etc */

                        var icon = customLabel[ type ] || { label:'' };
                        marker=new google.maps.Marker({
                            position:latlng,
                            title:_address,
                            map:map,
                            animation: google.maps.Animation.DROP
                        });
                        google.maps.event.addListener( marker, 'click', function(event){
                            infoWindow.setContent( this.title );
                            infoWindow.open( map, this );
                            infoWindow.setPosition( this.position );
                        }.bind( marker ) );

                        map.setCenter( latlng );
                        map.setZoom( 15 );  
                    } else {
                        console.warn('Geocoding failed: %s',status );
                    }
                }

                downloadUrl( 'rentozy.xml', function( data ) {/* change the url, this is a local copy due to problems with CORS */
                    var xml = data.responseXML;
                    var markers = xml.documentElement.getElementsByTagName( 'marker' );


                    Array.prototype.forEach.call( markers, function( markerElem ) {
                      id = markerElem.getAttribute('pg_id');
                      name = markerElem.getAttribute('name');
                      address = markerElem.getAttribute('pg_address');
                      type = markerElem.getAttribute('type');

                      /* Geocode address to find lat/lng */
                      geocoder.geocode( { 'address':address }, evtcallback );
                    });
                });
            }




            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=<APIKEY>&callback=initMap"></script>
    </head>
    <body>
        <div class="map">
            <div id="map"></div>
        </div>
    </body>
</html>

Geocoded lat/lng from xml file using addresses

Upvotes: 1

Related Questions