Google Maps: Setting a new centre point using a menu

2018-06-29 04:40:36

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: ` 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!

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

You can't put an onclick function in an option, you have to put an onchange function in the select tag like this,

<select onchange="resetMap('53.39433', '-1.25754');">
    <option>Thurcroft</option>
    <option>Wickersley</option>
</select>

You have also make sure that you include the map URL in the file

链接地址: http://www.djcxy.com/p/81506.html

上一篇: 根据纬度和长谷歌地图重新绘制地图

下一篇: Google地图：使用菜单设置新的中心点