Google Maps: Setting a new centre point using a menu

center, google-maps-api-3, javascript, onclick

Solution

I made several changes,

(1) `map` becomes a global variable (placed at a level outside the functions) so it can be modified in `init` and `resetMap`

(2) the option values hold a string with the coordinates, but `google.maps.LatLng` expects two parameters, so the string gets split at the comma

(3) `setOptions` is called to recenter and zoom, you can also call individual functions setZoom and setCenter

Demo and updated code

function resetMap() {
    // retrieve new selection
    var latlongChoice = document.getElementById("placeSelect").value;

    // separate into lat and long
    var latlongParts = latlongChoice.split(",");
    var newPos = new google.maps.LatLng(latlongParts[0], latlongParts[1]);

    map.setOptions({
        center: newPos,
        zoom: 15
    });

    //add a marker
    var marker = new google.maps.Marker({
        position: newPos,
        map: map,
        title: "New marker"
    })
}​

...

    <select id="placeSelect" onchange="resetMap()">
        <option value="53.39433,-1.25754">Thurcroft</option>
        <option value="53.41615,-1.27833">Wickersley</option>
        ...

Problem

I'm pretty new to Google Maps. What I'm trying to do is set up a map which will center to points when an HTML menu is clicked. Am I right in saying I don't need an event listener if the control is outside the map? This is my code from the head section: ``` <script type="text/javascript"> function init() { var myLatlng = new google.maps.LatLng(53.53562,-1.05642); var myOptions = { zoom: 8, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } //draw the map var map = new google.maps.Map(document.getElementById("map"), myOptions); //set up the marker var marker = new google.maps.Marker({ position: myLatlng, map: map, }); } function resetMap(lat,long) { var latlong = lat+","+long; var newPos = new google.maps.LatLng(latlong)({ setCenter: latlong, map: map, zoom:15, }) //add a marker var marker = new google.maps.Marker({ position: myLatlng, map: map, title:"New marker", }) } </script> ``` and the HTML goes like so: ``` <body onLoad="init()"> <div id="selecter"> <select> <option onClick="resetMap(53.39433,-1.25754);">Thurcroft</option> <option onClick="resetMap(53.41615,-1.27833);">Wickersley</option> <option onClick="resetMap(53.47929,-1.14828);">M18/A1</option> <option onClick="resetMap(53.47802,-1.06633);">Rossington</option> <option onClick="resetMap(53.53562,-1.05642);">Armthorpe</option> <option onClick="resetMap(53.5914,-0.98797);">J5 M180</option> <option onClick="resetMap(53.61159,-0.96308);">Thorne</option> <option onClick="resetMap(53.62769,-0.95181);">Moorends</option> </select> </div> <div id="map"> </div> </body> ``` ...But nothing happens when the menu is accessed. Can anyone point me in the right direction - all suggestions appreciated ta!

Original source