Question

Hi I am trying to use a dropdown menu containing a list of countries – once selected it should automatically update a googlemap and zoom into that location.

e.g. if user selects ‘Brazil’ from the dropdown then the map should zoom into Brazil – any ideas on how to go about this – or any simple tutorials that explain this.

    geocoder = new google.maps.Geocoder();
    console.log(geocoder);        
    geocoder.getLatLng(
        'Brazil',
        function(point) {
            if (point !== null) {
                console.log(point);
                centre = point;
            }
        }
    );

Answer 1

You need a dropdown menu with geocoordinate value. if the dropdown change, it will call google map function.

<form>  
    <select class="target">     
        <option value="2,3" selected="selected">Brazil</option>
        <option value="4,3">China</option>   
    </select>
</form>

Jquery

$('.target').change(function() {   
    var coordinate = $('select option:selected').val();
    google_map(coordinate);
});


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

}