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!
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!
Share Improve this question edited Sep 21, 2019 at 19:14 supersam654 3,25435 silver badges35 bronze badges asked Jun 18, 2012 at 0:38 AliHAliH 873 silver badges8 bronze badges2 Answers
Reset to default 7I made several changes,
(1) map bees 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 ma
(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