Можно ли связать страницу Google Maps API v3 с другой страницей? - PullRequest
0 голосов
/ 07 сентября 2011

Мне нужно, чтобы список адресов был размещен в левой части страницы, а Google Карты (API v3) - в правой части (например, через iframe). Так что, если я нажму на адрес с родительской страницы, Google Map увеличит масштаб этого адреса справа.

Это когда-нибудь возможно? Если да, где я могу прочитать? Или вы можете привести мне пример. Спасибо.

Ответы [ 2 ]

1 голос
/ 07 сентября 2011

Конечно.

Вот примерный пример (также можно увидеть здесь )

<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>

В примере - вы вводите значения широты и долготыв полях ввода (могли быть ссылки так же легко) и нажмите обновить.Вы можете изменить значения и увидеть, что он обновляется правильно.В этом случае вам придется сопоставить свои адреса со значениями широты / долготы и перейти оттуда.

Есть дополнительное поле ввода, в которое вы можете поместить свой текстовый адрес - работает точно так же.

1 голос
/ 07 сентября 2011

Вы должны использовать и iframe?Вот пример: http://jsfiddle.net/2YQg6/

Вот приложение, использующее похожую технику: Карты жилья

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...