可以将Google Maps API v3页面与其他页面连接起来吗？

Question

I need the list of addresses to be placed on the left side of the page and Google Maps (API v3) on the right side (through iframe, for example). 我需要在页面左侧放置地址列表，在右侧放置Google Maps（API v3）（例如，通过iframe）。 So, if i click on address from the parent page, Google Map go zoom to this address on the right. 因此，如果我点击父页面上的地址，Google地图会缩放到右侧的此地址。

It is ever possible? 这有可能吗？ If yes, where i can read about? 如果是的话，我可以在哪里阅读？ Or can you give me some example. 或者你能给我一些例子。 Thanks. 谢谢。

Answer 1

Do you have to use and iframe? 你必须使用和iframe？ Here is an example: http://jsfiddle.net/2YQg6/ 这是一个例子： http ： //jsfiddle.net/2YQg6/

Here is a app using a similar technique: Housing maps 这是一个使用类似技术的应用程序：住房地图

Answer 2

Sure. 当然。

Here is a rough example (can be seen here as well) 这是一个粗略的例子（这里也可以看到）

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>ExtJS Google Maps Integration</title>

        <!-- Google Map API -->
        <style type="text/css">
            html { height: 100% }
            body { height: 100%; margin: 0; padding: 0 }
            #map_canvas { height: 100% }
        </style>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false&region=US"></script>

    </head>
    <body>
        <div id="map_canvas" style="width:50%; height:50%;"></div>
        <input id="lat" type="text" value="40.714623"></input>
        <input id="lng" type="text" value="-74.006605"></input>

        <script>
            var options = {
            zoom: 15,
            disableDefaultUI: true,
            zoomControl: true,
            zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL,
            position: google.maps.ControlPosition.TOP_LEFT
            },
            mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById("map_canvas"), options);

            function updateLatLng() 
            {
                var lat = document.getElementById( "lat" ).value;
                var lng = document.getElementById( "lng" ).value;
                var latLng = new google.maps.LatLng( lat , lng );
                map.setCenter( latLng );
            }

            function updateAddress() 
            {
                var address = document.getElementById( "address" ).value;
                var geocoder = new google.maps.Geocoder();
                geocoder.geocode( { address: address }, function( results, status )
                {
                     var latLng = new google.maps.LatLng( results[0].geometry.location.Pa, results[0].geometry.location.Qa );
                    map.setCenter( latLng  );
                } );
            }
        </script>

        <button type="button" onClick="updateLatLng()">Update</button>
        <input id="address" type="text" value="NYC"></input>
        <button type="button" onClick="updateAddress()">Update</button>
    </body>
</html>

In the example - you put a latitude and longitude values in input fields (could have been links just as easily) and click update. 在示例中 - 您将纬度和经度值放在输入字段中（可能就像链接一样容易）并单击更新。 You can change the values and see that it updates properly. 您可以更改值并查看它是否正确更新。 In that case you would have to map your addresses to lat/lng values and go from there. 在这种情况下，您必须将地址映射到lat / lng值并从那里开始。

There is an additional input field that you can put your text address into - works just the same. 您可以将文本地址放入其他输入字段 - 工作方式相同。

可以将Google Maps API v3页面与其他页面连接起来吗？

问题描述

2 个解决方案

解决方案1
1 已采纳 2011-09-07 19:43:24

解决方案2
1 2011-09-07 19:44:35

可以将Google Maps API v3页面与其他页面连接起来吗？

问题描述

2 个解决方案

解决方案1 1 已采纳 2011-09-07 19:43:24

解决方案2 1 2011-09-07 19:44:35

解决方案1
1 已采纳 2011-09-07 19:43:24

解决方案2
1 2011-09-07 19:44:35