javascript onclick not working in chrome
Question
I need someone to lead/guide me where have I code wrongly because I can't figure out where had gone wrong in my code. This code working fine in my IE and also FF but not in Chrome or Safari. By right, when I clicked on the dropdownlist selection it will show the exact map of the selected location. But in my Chrome and Safari, it only showed the initial map rather than showing the selected location from the list.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google Maps JavaScript API Example</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAn5fGcWgolNQy8U9PV2YsP1P3Knn23Jro&sensor=false"></script>
<script type="text/javascript">
// Variables Initialize
var marker;
var map;
var image = "flag.png";
function initialize(lat,lng) {
var singapore = new google.maps.LatLng(lat,lng);
var settings = {
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: singapore,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_RIGHT},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL},
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT,
position: google.maps.ControlPosition.LEFT_TOP},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM_RIGHT}
};
map = new google.maps.Map(document.getElementById("map_canvas"), settings);
marker = new google.maps.Marker({
map: map,
draggable:false,
animation: google.maps.Animation.DROP,
position: singapore,
title:"Singapore",
icon: image
});
}
</script>
</head>
<body onload="initialize('1.28563','103.80918')" onunload="GUnload()">
<select>
<option onclick="initialize('1.28563','103.80918')">--Select Location--</option>
<option onclick="initialize('1.28527','103.82682')">Blk 18A Jalan Membina</option>
<option onclick="initialize('1.28277','103.82562')">Blk 26 Jalan Membina</option>
<option onclick="initialize('1.31546','103.766363')">Blk 321-326 Clementi Ave 5</option>
</select>
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
2 answers
solution1
1 ACCPTED 2012-06-19 03:26:17
Adding onclick to an <option> doesn't seem like a great idea; I would instead use the onchange on the <select> and use the value attribute to store the lat/lng instead:
<select onchange="movemap(this)">
<option value="1.28563,103.80918">Blk 18a Jln Membina</option>
...
function movemap(sel)
{
var opt = sel.options[sel.selectedIndex],
vals = opt.value.split(',');
initialize(vals[0], vals[1]);
}
solution2
0 2012-06-19 03:26:07
删除center: ramkySG代码中的center: ramkySG怎么样？
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.