title: Removing Google Map V3 additional styles and links from head
body: <p>I am working in CMS Made Simple 1.11.11 and normally, this is what my <code>&lt;head&gt;</code> looks like on most pages...</p>
  
  <pre><code>&lt;head&gt;
  &lt;base href="http://np.dev/"&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
  &lt;meta name="viewport" content="width=device-width, user-scalable=no"&gt;
  &lt;meta name="description" content=""&gt;
  &lt;meta name="keywords" content=""&gt;
  &lt;meta name="language" content="en_US"&gt;
  &lt;meta name="url" content="http://np.dev"&gt;
  &lt;meta name="identifier-URL" content="http://np.dev"&gt;
  &lt;meta name="revised" content="Sun, 19 Oct 2014 23:00:50"&gt;    
  &lt;title&gt;My localhost demo site&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="http://np.dev/tmp/cache/stylesheet_combined_b494846cba46cad77e309f4df2e3bfe7.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="http://np.dev/tmp/cache/stylesheet_combined_d3f3ceb94300bf27c9a51ce2e1404348.css"&gt;
  ...
  &lt;/head&gt;
  </code></pre>
  
  <p>The above layout is fine.  But if I attach and run Google Maps v3 API onto this template, Google Maps will prepend several <code>&lt;style&gt;</code> and <code>&lt;link&gt;</code> elements to the <code>&lt;head&gt;</code>
  producing the following....</p>
  
  <pre><code>   &lt;head&gt;
     /*I WANT TO USE JQUERY TO REMOVE THESE 5 ELEMENTS WHEN THE WINDOW IS READY*/
     &lt;style type="text/css"&gt;.gm-style .gm-style-mtc label,.gm-style .gm-style-mtc div{font-weight:400 &lt;/style&gt;
     &lt;style type="text/css"&gt;.gm-style .gm-style-cc span,.gm-style .gm-style-cc a,.gm-style .gm-style-mtc div{font-size:10px}&lt;/style&gt;
     &lt;link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700"&gt;
     &lt;style type="text/css"&gt;@media print {  .gm-style .gmnoprint, .gmnoprint {    display:none  }}@media screen {  .gm-style .gmnoscreen, .gmnoscreen {    display:none  }}&lt;/style&gt;
     &lt;style type="text/css"&gt;.gm-style{font-family:Roboto,Arial,sans-serif;font-size:11px;font-weight:400;text-decoration:none}&lt;/style&gt;
  
      &lt;base href="http://np.dev/"&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
      &lt;meta name="viewport" content="width=device-width, user-scalable=no"&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="keywords" content=""&gt;
      &lt;meta name="language" content="en_US"&gt;
      &lt;meta name="url" content="http://np.dev"&gt;
      &lt;meta name="identifier-URL" content="http://np.dev"&gt;
      &lt;meta name="revised" content="Sun, 19 Oct 2014 23:00:50"&gt;    
      &lt;title&gt;My localhost demo site&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="http://np.dev/tmp/cache/stylesheet_combined_b494846cba46cad77e309f4df2e3bfe7.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="http://np.dev/tmp/cache/stylesheet_combined_d3f3ceb94300bf27c9a51ce2e1404348.css"&gt;
      ...
      &lt;/head&gt;
  </code></pre>
  
  <p>I don't think its possible to "prevent" the first 5 <code>&lt;head&gt;</code> child elements from loading onto the DOM from Google Maps API, so I want to do the next best thing...I want to use jQuery to remove these elements from the <code>&lt;head&gt;</code> once the window is ready.  Is this possible?</p>