How add markers from json in php page with ajax?

Question

I'm trying to plot markers in php page with Google Maps api controlled by radio buttons. All data markers are loading correctly (json) but the map does not render. Please see below the code that I'm trying to run. There isn´t script exception on console and the run() method return all lat/lon/values data correctly!

        <script>
            var latlng = { lat: 19.7999, lng: 42.5121 };
            var marker;
            var map;
            var markers=[];

            function addmarker(map, lat, lng, title ){
                  marker = new google.maps.Marker({
                  position:{ lat:lat,lng:lng },
                  title:title,
                  draggable:true,
                  map:map
                });
                markers.push( marker );
            }
            function initialize() {
                var mapCanvas = document.getElementById('mapArea');
                var mapOptions = {
                  center: latlng,
                  zoom: 19,
                  mapTypeId: google.maps.MapTypeId.SATELLITE
                }
            }
            google.maps.event.addDomListener(window, 'load', initialize);
            </script>
            <script>
                function run() {
                    var radio = "";
                    for (i = 0; i < document.getElementsByName('rd').length; i++) {
                        if (document.getElementsByName('rd')[i].checked) {
                            radio = document.getElementsByName('rd')[i].value;        
                        }        
                    }
                    initialize();
                    $.ajax({
                      dataType: 'JSON',
                      url: 'http://ws.net/data.php?' + radio,
                      success: function(data) {
                          markers.forEach( function( e,i,a ){
                             e.setMap( null ); 
                          });

                          for( var o in data ){
                            var lat=Number(data[o].lat);
                            var lng=Number(data[o].lon);
                            var val= data[o].value;                             
                            
                            addmarker.call( this, map, lat, lng, val );
                          }
                      },
                      error: function( err ){
                        console.log( err );  
                      }
                    })
                }                    
            
        </script>    

    <body  >       
       <form action="" method="post">
            <input type="radio" value="car" name="rd"  />Car.
            <input type="radio" value="bike" name="rd" />Bike
            <input type="button" value="send"  onclick="run();"/>
       </form>  
       <div id="mapArea" style="width: 1000px; height: 600px;"> </div>
    </body>
</html>

Jair Lopez Gutierrez · Accepted Answer · 2021-09-29 00:06:08Z

1

In the function initialize(), add:

  map = new google.maps.Map(mapCanvas, mapOptions);

answered Sep 29, 2021 at 0:06

Jair Lopez Gutierrez

1744 bronze badges

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

Collectives™ on Stack Overflow

How add markers from json in php page with ajax?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related