谷歌地图中不显示位置和侧边栏

时间:2013-10-29 13:20:25

标签: javascript google-maps google-maps-api-3 sidebar

我的代码没有在Google地图上显示侧边栏和标记,在输出中我只收到Google地图。

<?php

error_reporting(0);
include('dbcon.php');
$result = mysql_query("SELECT address FROM markers");
$new_array = array();
while ($row = mysql_fetch_assoc($result)) {
    $new_array[] = $row['address'];  
}

$add_js = json_encode($new_array);

//print_r($add_js);

?>

<script type="text/javascript"> 

var side_bar_html = ""; 
var gmarkers = []; 
var map = null;

function initialize() {
    // create the map
    var myOptions = {
        zoom: 8,
        center: new google.maps.LatLng(28.6139, 77.2089),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    // Add markers to the map
    var point = <?php echo $add_js ?>;
    function geocodeAddress(i) {
        geocoder.geocode({
            'address' : point[i]
        }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                createMarker(results[0].geometry.location, i);
            }
            else {
                alert('Geocode was not successful for the following reason: ' +
                    status);
            }
        });
        return marker;
    }
    document.getElementById("side_bar").innerHTML = side_bar_html;
}

var infowindow = new google.maps.InfoWindow({ 
    size: new google.maps.Size(150, 50)
});

function myclick(i) {
    google.maps.event.trigger(gmarkers[i], "click");
}

function createMarker(latlng, name, html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon : icon1,
    });

    //add info window

    google.maps.event.addListener(marker, 'mouseover', function() {
        marker.setIcon(icon2);
        infowindow.setContent(point[i]);
        infowindow.open(map, marker);
        title: 'Property!'
    });

    google.maps.event.addListener(marker, 'mouseout', function() {
        marker.setIcon(icon1);
        infowindow.setContent(point[i]); 
        infowindow.close(map, marker);
        title: 'Property!' 
    });

    //end of adding info window

    // save the info we need to use later for the side_bar
    gmarkers.push(marker);
    // add a line to the side_bar html
    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' +
        name + '<\/a><br>';
}

</script> 

我对这个编码概念真的很陌生,而且这些代码大部分来源于谷歌搜索。我已提供了大部分代码,而且我无法解决问题所在。

提前谢谢。

1 个答案:

答案 0 :(得分:1)

关于侧边栏:您可以在MapOptions对象中(在代码中使用变量myOptions)指定应显示的内容和不显示的内容。