2 Problems: 1st is making tag appear in 2nd is displaying a grid to separate areas in tag

I got a 1000x1300 map that will hold 20pixel areas but it currently doesn't show any areas within it.(they appear greyed out in firefox inspect). Also I need to make a grid that would separate between the areas for the user to select them more easily. Any help would be great!

  <div id="biggrid">

      <map id="bigmap">
          <area  shape="rect" coords="0,0,10,10" href="images/logoicon.png" 
title="getpixel.net, stock photography">
          <area title="First area ever!"/>

      </map>
      <div>

#biggrid {
position: relative;
top: 0;
right:50px;

width: 1300px;
height: 1000px;
border: 3px solid purple;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#bigmap {
display:inline-block;
height:1000px;
width:1300px;
background-size:cover;
background: url("../images/banner-bg.jpg") no-repeat;
}
area{
border:7px solid grey;
display:inline-block;
}

area greyed out