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>

First thing's first, have you checked the console for any errors? — Christian
– Christian, Commented Jun 19, 2012 at 3:19
Hi Christian Varga, I checked using validator.w3.org and my Chrome javascript console — kokloong
– kokloong, Commented Jun 19, 2012 at 4:44

Ja͢ck · Accepted Answer · 2012-06-19 06:07:31Z

1

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]);
}

edited Jun 19, 2012 at 6:07

answered Jun 19, 2012 at 3:26

Ja͢ck

174k39 gold badges269 silver badges317 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kokloong Over a year ago

Hi Jack, I tried ammend as what in your snippet but now all browser also not working.

Ja͢ck Over a year ago

@kokloong didn't test my code, that's why :) I've updated the answer.

Wolf Wetzel · Accepted Answer · 2012-06-19 03:26:07Z

0

Whats about removing center: ramkySG in your code?

answered Jun 19, 2012 at 3:26

Wolf Wetzel

132 bronze badges

1 Comment

kokloong Over a year ago

no use and actually it was typo error. instead of 'ramkySG' it was 'singapore'

Collectives™ on Stack Overflow

javascript onclick not working in chrome

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related