How add markers from json in php page with ajax?-CodePudding

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>

CodePudding user response：

In the function initialize(), add:

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