谷歌地图带有可点击的侧边栏

时间:2012-09-27 06:02:38

标签: javascript google-maps-api-3

嗨iam javascript和谷歌地图新手并试图用侧边栏实现简单的地图以下是我的代码

    <script>
       function createMarker(lat,lng)
                {

    alert("lat,lang");
                  var marker = new google.maps.Marker({
                    map: map,
                    position: latlng,
                    content:content
                  });
                  if(icon){marker.setIcon(icon);}

                  if(center)
                  {
                    map.setCenter(latlng);
                  }

                  google.maps.event.addListener(marker, 'click', function() {
                    infowindow.setContent(this.content);
                    infowindow.open(map, this);
                  });

                  if(action)
                  {
                    action.fnc(map,action.args);
                  }
                  return marker;
              }
    </script>

<body>
<div id="container">
<div id="menu" style="background-color:#FFD700;height:800px;width:100px;float:left;">
<table border="0">
<tr>
<th>Cities</th>
</tr>
<tr>
<td onclick="createMarker('40.47','73.58');">newyork</td>
</tr>
<tr>
<td onclick="createMarker('41.50','87.83');">chicago</td>
</tr>

</table>
</div>


<script type="text/javascript">
        var map;
        var markersArray = [];

        function initialize()
        {
            var latlng = new google.maps.LatLng(12.9833, 77.5833);
            var myOptions = {
                zoom: 10,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


            // add a click event handler to the map object
            google.maps.event.addListener(map, "click", function(event)
            {
                // place a marker
                placeMarker(event.latLng);
            });
        }

当我在侧边栏中点击城市时,点击该地图上的城市并指向一个标记..我试过但是缺少了什么......任何帮助都会得到赞赏

1 个答案:

答案 0 :(得分:2)

请参阅下面的示例,来自Mike Williams(v2)教程的示例:

The Basics - Part 2: Adding a clickable sidebar

translated to v3