Question

<!DOCTYPE html>
<head>
    <title>Federation of Master Landscapers</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&key=AIzaSyD0X4v7eqMFcWCR-VZAJwEMfb47id9IZao">
    </script>
    <script type="text/javascript">
    var map;
    $(document).ready(function () {

            //draw a map centered at Empire State Building Newyork
            var latlng = new google.maps.LatLng(40.748492, -73.985496);
            var myOptions = {
                zoom: 15,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            $("#btnSearch").click(function(){
                //Convert Address Into LatLng and Retrieve Address Near by
                convertAddressToLatLng($("#txtAddress").val());
            });
    });               

    function convertAddressToLatLng(address){
        var geocoder = new google.maps.Geocoder();

        geocoder.geocode({ 'address': address }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                //Empty div before re-populating
                $("#divStores").html('');
                searchStores(results[0].geometry.location);
            } else {
                $("#divStores").html(getEmbedHTML('No Stores Found','',''));
            }
        });
    }

    function searchStores(location){
        var latlng = new google.maps.LatLng(location.lat(),location.lng());
        var myOptions = {
            zoom: 13,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);    

        //Marker at the address typed in
        var image = 'images/townhouse.png'
        var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                icon: image
        });     

        //hard coded the radius to 10 miles, if you get the value from a field if required
        var parameters = 'lat='+ location.lat() + '&lng=' + location.lng() + '&radius=25';  

        $.ajax({  
            type: "POST",  
            dataType: 'json',
            url: "store_locator.php",  
            data: parameters,  
            success: function(msg) {  
                //alert(msg);
                displayStores(msg);
            },
            error:function (xhr, ajaxOptions, thrownError){
                alert(thrownError);
            }    
        });  /* $.ajax({  */
    }

    function displayStores(result){
        if (result.length > 0){
            for (i=0;i<result.length;i++){
                //Append Store Address on Sidebar
                var html = getEmbedHTML(i+1,result[i].name,result[i].address,result[i].distance);
                $("#divStores").append(html);
                //place a marker
                var image = 'images/number_' + parseInt(i+1) + '.png';
                var latlng = new google.maps.LatLng(result[i].lat,result[i].lng);
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    icon: image
                }); 

                var msg = 'Location : ' + result[i].name + '<br/> ';
                msg = msg + 'Address : ' + result[i].address + '<br/> ';
                attachMessage(marker, msg);
            }
        } else {
            $("#divStores").html(getEmbedHTML('No Stores Found','',''));
        }
    }

    function attachMessage(marker, msg) {
        var infowindow = new google.maps.InfoWindow({
            content: msg,
            size: new google.maps.Size(120, 150)
        });
        google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(map, marker);
        });
    }

    function getEmbedHTML(seqno,name,address,distance) {
        var strhtml = '<div class="row">';
        strhtml  =  strhtml + '<img src="images/number_' + seqno + '.png" border="0" width="24" height="24" style="padding-right:10px;" /><label>' + name + '</label><br/>'
        strhtml  =  strhtml + '<span>' + address + '</span><br/>'
        strhtml  =  strhtml + '<span> Distance : ' + parseFloat(distance).toFixed(2) + ' miles</span><br/>'
        strhtml  =  strhtml + '</div>';

        return strhtml;
    }
    </script>
</head>
<body>
    <?php include ('./template/header.php'); ?>
    <div id="content">
        <div class="wrapper">
            <div id="news">
                <h2>Landscaper Map Results</h2>
                <div id="map_canvas"></div>
            </div>
            <div id="sidebar">
                <h2>Find a Landscaper</h2>
                <table>
                    <tr>
                        <td>Enter Address:</td>
                        <td><input type="text" id="txtAddress" /></td>
                    </tr>
                    <tr>
                        <td>Distance:</td>
                        <td>
                        <select name="radius" id="radius">
                            <option value="15">15 Miles</option>
                            <option value="25">25 Miles</option>
                            <option value="50">50 Miles</option>
                        </select>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><input type="submit" value="Search" id="btnSearch" /></td>
                    </tr>
                </table>
                <br /><br />
                <h2>Landscapers</h2>
                <div id="divStores">
                <!--
                <div class="row">
                    <label>Store 1<label><br/>
                    <span> Address Here<span>
                </div>
                <div class="separator"></div>
                -->         
                </div>
            </div>
        </div>
    </div>
    <?php include ('./template/footer.php'); ?>
</body>

我的代码如上所示。该脚本从数据库中获取结果并以列表格式显示。但是在页面加载或表单提交时，不会显示地图。我困惑了几个小时，而不是javascript的大师，我现在来这里问这个问题。

谢谢，

小连

Google Maps JavaScript API无法加载地图

0 个答案: