简体   繁体   中英

It is possible to connect Google Maps API v3 page with another page?

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). So, if i click on address from the parent page, Google Map go zoom to this address on the right.

It is ever possible? If yes, where i can read about? Or can you give me some example. Thanks.

Do you have to use and iframe? Here is an example: http://jsfiddle.net/2YQg6/

Here is a app using a similar technique: Housing maps

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.

There is an additional input field that you can put your text address into - works just the same.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM