How to embed a google map with a changeable area?

Question

I haven't worded this very well

But basically, I'd like to embed a map on my site - but the area it shows will change. I've tried doing this, but it never seems to work as it will focus on the wrong area - the old area, rather than the new area.

Basically, I'd like a google map code that uses $place as a location.

Thanks.

Answer 1

// Prepare your coordinates
var latlng1 = new google.maps.LatLng(0.0, 0.0);
var latlng2 = new google.maps.LatLng(100.0, 100.0);

// Initialize your map
var map = new google.maps.Map(document.getElementById('map'), options);
var options = {  
  zoom: 6,  
  center: latlng1,  
  mapTypeId: google.maps.MapTypeId.ROADMAP  
};

// Recenter the map/viewport
map.setCenter(latlng2);

Answer 2

If you don't have the location geocoded, you can look up by address like so: (assume you include your api key above this call - add in the lang vars to output value, in 2 places)

 <script type="text/javascript"> 


  $(document).ready(function() {
    document.onunload = "GUnload()";
    if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));

        map.setCenter(new GLatLng(0.0, 0.0), 13);
        // map.setUIToDefault();


         geocoder = new GClientGeocoder();
            if (geocoder) {
                 geocoder.getLatLng(    '$place', function(point) {
                if (!point) {
                    } else {
                    var topRight = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10,10));var bottomRight = new GControlPosition (G_ANCHOR_BOTTOM_RIGHT, new GSize(10,10));
            var mapTypeControl = new GMapTypeControl(); map.addControl(mapTypeControl, topRight);
            map.addControl(new GSmallMapControl()); var bounds = map.getBounds();
            map.setCenter(point, 13);
            var marker = new GMarker(point);
            map.addOverlay(marker);
             GEvent.addListener(marker, 'click', function() {  marker.openInfoWindowHtml('<a href="http://maps.google.com/maps?f=d&amp;hl=en&amp;geocode=&amp;saddr=&amp;daddr=$place" target="_blank">Get Directions &raquo;</a>' );})
             ;}

            }

            );

        }
        // end geocoding

      }
});

    </script>