<select id="location_distance">
<option value="500">500m</option>
<option value="1000">1km</option>
<option value="3000">3km</option>
<option value="5000">5km</option>
</select>
<div id="map"></div>
<script>
function zoomOption(){
/* /* var value= */
if(value=="500"){
map.setZoom(16);
}
if(value=="1000"){
map.setZoom(15);
}
if(value=="3000"){
map.setZoom(10);
}
if(value=="5000"){
map.setZoom(7);
}
}
}
</script>
Please take a close look at this part~~~
Note: Full Code
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<meta charset="UTF-8">
<%@include file="/importhead.jsp" %>
<div data-role="page" id="store_nearby">
<%@include file="/header.jsp" %>
<%@include file="/panel.jsp" %>
<div id="store_nearby_detail" data-role="content" style="text-align:center;">
<select id="location_distance">
<option value="500">500m</option>
<option value="1000">1km</option>
<option value="3000">3km</option>
<option value="5000">5km</option>
</select>
<div id="map"></div>
<script>
function zoomOption(){
/* /* var value= */
if(value=="500"){
map.setZoom(16);
}
if(value=="1000"){
map.setZoom(15);
}
if(value=="3000"){
map.setZoom(10);
}
if(value=="5000"){
map.setZoom(7);
}
}
}
</script>
<script>
/* /* cordova.plugins.diagnostic.isLocationEnabled(gpsOnOff, gpsError); */
function initMap(){
var options = {
zoom:17,
center:{lat:37.519747,lng:126.930340},
disableDefaultUI: true
/* /* center: myLatlng,
mapTypeControl: false,
draggable: false,
scaleControl: false,
scrollwheel: false,
navigationControl: false, */
/* /* streetViewControl: false, */
/* /* mapTypeId: google.maps.MapTypeId.ROADMAP */
}
function gpsOnOff(available){
if(available){
alert('gps on');
//Processing function when receiving current My Position coordinates
navigator.geolocation.getCurrentPosition(showLocation, failLocation,{maximumAge : 5000, timeout: 25000, enableHighAccuracy : true});
}else{
alert ('Please turn on GPS');
cordova.plugins.diagnostic.switchToLocationSettings();
//navigator.geolocation.getCurrentPosition(showLocation, failLocation,{enableHighAccuracy : true , timeout: 25000});
navigator.geolocation.getCurrentPosition(showLocation, failLocation,{maximumAge : 5000, timeout: 25000, enableHighAccuracy : true});
}
}
//new map
var map = new google.maps.Map(
document.getElementById('map'), options);
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(initialLocation); //current position getting codes Get current location
});
}
// // The marker, positioned at Uluru
var marker = new google.maps.Marker({
position: {lat:37.519747,lng:126.930340},
map:map,
icon: {
url: 'https://developers.google.com/maps/documentation/javascript/images/circle.png',
anchor: new google.maps.Point(10, 10),
scaledSize: new google.maps.Size(13, 20)
}
/* /* icon: */
});
var infoWindow = new google.maps.InfoWindow({
Content: '<h3> Yeouido Coffee House</h3>'
/* '<h4>Yeouido-dong Yeouido-dong, 67-gil, 11</h4>' */
});
marker.addListener('click', function(){
infoWindow.open(map, marker);
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBPwhDtefvg2PSzwiBibrJ3FVL4QU79Iyo&callback=initMap">
</script>
</div>
<%@include file="/footer.jsp" %>
</div>
var map = blah blah Behind the line (because...) It's a given, but... map should exist) so try controlling it with a script like this.
// This code has not been tested. Could be a typo or grammar mistake
// Locate the #local_distance object in the document.
var dropdown = document.getElementById('location_distance')
// If an onChange event is triggered for that drop-down object,
dropdown.addEventListener('change', function (e) {
// with the current value of the object
var scale = parseInt(e.target.value) || 500 // <-- The default value to put just in case is 500, and the scale is called reduced scale in English.
// Convert it to the zoom value you want
The var zoom = 17 - scale/500 // <-- zoomOption() function seems to be optimized as a linear function like this.
// We will type the setZoom method of the map object that already exists.
map.setZoom(Math.floor(zoom)) // <-- Lowering treatment to use integers
})
© 2024 OneMinuteCode. All rights reserved.