화면 전체에 구글 맵을 띄우고, 마커를 클릭하면 구글맵이 줄어들면서 마커 설명이 나오는 스크립트를 짜고 있는데 


마커 클릭하면 크기가 이상하게 바뀌어요 ㅠㅠ 해결방법 아시는분,,,,,,,,




<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<meta charset="utf-8">

<style>

#map{

    width :100%;

    height : 600px;

}

#box{

height : 600px;

}

</style>

[removed]

      var map;

function initMap() {

  // The map, centered at SNU

  map = new google.maps.Map(document.getElementById('map'), {

    zoom: 18, center: new google.maps.LatLng(37.456, 126.95),

  });

        var icons = {

          ScootHigh: {

            name: 'High',

            icon: 'https://i.imgur.com/S9Q3EG0.png'

          },

          ScootMiddle: {

            name: 'Middle',

            icon: 'https://i.imgur.com/Mq8H5gl.png'

          },

          ScootLow: {

            name: 'Low',

            icon: 'https://i.imgur.com/gw7bi2Z.png'

          },

          ScootNone: {

            name : 'No',

            icon : 'https://i.imgur.com/WQcrvPN.png'

          }

        };

          var scooters = [

    {

      scootid : '0000', type : 'ScootLow',

      position : new google.maps.LatLng(37.45642, 126.9505),using : 'yes'

    },{

      scootid : '0001', type : 'ScootHigh',

      position : new google.maps.LatLng(37.456, 126.95),using : 'no'

    },{

      scootid : '0002', type : 'ScootLow',

      position : new google.maps.LatLng(37.45517, 126.9499),using : 'yes'

    },{

      scootid : '0003', type : 'ScootNone',

      position : new google.maps.LatLng(37.45609, 126.9499),using : 'no'

    },{

      scootid : '0004', type : 'ScootMiddle',

      position : new google.maps.LatLng(37.45624, 126.9498),using : 'no'

    },{

      scootid : '0005', type : 'ScootLow',

      position : new google.maps.LatLng(37.45646, 126.9503),using : 'no'

    },{

      scootid : '0006', type : 'ScootMiddle',

      position : new google.maps.LatLng(37.45621, 126.9504),using : 'no'

    },{

      scootid : '0007', type : 'ScootHigh',

      position : new google.maps.LatLng(37.45571, 126.9496),using : 'yes'

    },{

      scootid : '0008', type : 'ScootMiddle',

      position : new google.maps.LatLng(37.45616, 126.9498),using : 'no'

    },{

      scootid : '0009', type : 'ScootLow',

      position : new google.maps.LatLng(37.45557, 126.9504),using : 'no'}

  ];

        // Create markers.

        scooters.forEach(function(scooter) {

var marker = new google.maps.Marker({

scooter.position,

icon: icons[scooter.type].icon,

map: map});

marker.addListener('click',function(){

    document.getElementById('map').style.cssText = 'width : 80%; position : absolute';

    var desc = document.createElement("div");

    document.getElementById('box').appendChild(desc);

    desc.id = 'description';

    document.getElementById('description').style.cssText =

      'width : 20%; background-color : red;  height : 600px; float : right';

    var scootid = document.createElement("div");

    scootid.id = "scootid";

    document.getElementById('description').appendChild(scootid);

    document.getElementById('scootid').style.cssText = 'text-align : center;font-size : 32px;background-color : white; border: 2px solid black;height : 80px;';

    var scootimg = document.createElement("div");

    scootimg.id = "scootimg";

    document.getElementById('description').appendChild(scootimg);

    document.getElementById('scootimg').style.cssText = 'background-color : white; border: 2px solid black; height : 400px; overflow : hidden;';

    var scootstatus = document.createElement("div");

    scootstatus.id = "scootstatus";

    document.getElementById('description').appendChild(scootstatus);

    document.getElementById('scootstatus').style.cssText = 'font-size : 15px; background-color : white; border: 2px solid black; height : 108px; overflow : scroll';

  document.getElementById("scootid")[removed]="스쿠터 ID : " + scooter.scootid;

    document.getElementById("scootimg")[removed] = ""

      document.getElementById("scootstatus")[removed]="이용 가능 여부 : "

      +Usable(Occupied(scooter.using,icons[scooter.type].name),Battery(icons[scooter.type].name))+"
"

      +"배터리 잔량 : "+Battery(icons[scooter.type].name)+"
";

    });

    });

        function Occupied(x){

          switch (x){

            case 'yes' :

            return '이용중';

            break;

            case 'no' :

            return '이용 가능';

            break;

            default:

            return '이용 불가';

          }

        }

        function Battery(x){

          switch (x){

            case 'High' :

            return '높음';

            break;

            case 'Middle' :

            return '중간';

            break;

            case 'Low' :

            return '낮음';

            break;

            default :

            return '없음';

          }

        }

        function Usable(x,y){

          if (y == '없음'){

            return '배터리 부족';

          }

          else if (x == '이용중'){

            return '이미 대여중입니다.';

          }

          else if (x == '이용 불가'){

            return '이용이 불가능합니다.';

          }

          else{

            return '이용 가능';

          }

        }

        var legend = document.getElementById('legend');

        for (var key in icons) {

          var type = icons[key];

          var name = type.name;

          var icon = type.icon;

          var div = document.createElement('div');

          div[removed] = '

This is a paragraph.