Embellishing an embedded Gmap

Greetings,

Rookie here:
So I have an embedded map on a page:

<iframe style=”border: 0;” src=”https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d44841.91957184977!2d-73.48592535063469!3d45.376663205928814!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4cc90c22121db963%3A0x6a7c38f4325f101b!2s16+Rue+de+Dinard%2C+Candiac%2C+QC+J5R+6V5!5e0!3m2!1sen!2sca!4v1442699501415&#8243; width=”600″ height=”450″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>

and want to add some borders, drop shadows, etc… like here:
http://www.westchasestampede.com/events/u9-stampede-vs-clearwater/

I even have the code:
.em-location-map {
border:2px solid gray;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.42);
-moz-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.42);
-webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.42);
}

Here is where the rookie part comes in: Where do I place the code? i.e.: what is the entire syntax for what I am trying to do, I tried before, after, wrapping, etc… I just can’t get it right.

Can someone please right the entire thing so that I can just learn by seeing and understand for the next time I need to do this.

Thank you