Home/ Questions/Q 8102331
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T23:13:01+00:00

I need someone to lead/guide me where have I code wrongly because I can’t

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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