Removing Google Map V3 additional styles and links from head

I am working in CMS Made Simple 1.11.11 and normally, this is what my <head> looks like on most pages...

<head>
<base href="http://np.dev/">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="language" content="en_US">
<meta name="url" content="http://np.dev">
<meta name="identifier-URL" content="http://np.dev">
<meta name="revised" content="Sun, 19 Oct 2014 23:00:50">    
<title>My localhost demo site</title>
<link rel="stylesheet" type="text/css" href="http://np.dev/tmp/cache/stylesheet_combined_b494846cba46cad77e309f4df2e3bfe7.css">
<link rel="stylesheet" type="text/css" href="http://np.dev/tmp/cache/stylesheet_combined_d3f3ceb94300bf27c9a51ce2e1404348.css">
...
</head>

The above layout is fine. But if I attach and run Google Maps v3 API onto this template, Google Maps will prepend several <style> and <link> elements to the <head> producing the following....

   <head>
   /*I WANT TO USE JQUERY TO REMOVE THESE 5 ELEMENTS WHEN THE WINDOW IS READY*/
   <style type="text/css">.gm-style .gm-style-mtc label,.gm-style .gm-style-mtc div{font-weight:400 </style>
   <style type="text/css">.gm-style .gm-style-cc span,.gm-style .gm-style-cc a,.gm-style .gm-style-mtc div{font-size:10px}</style>
   <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
   <style type="text/css">@media print {  .gm-style .gmnoprint, .gmnoprint {    display:none  }}@media screen {  .gm-style .gmnoscreen, .gmnoscreen {    display:none  }}</style>
   <style type="text/css">.gm-style{font-family:Roboto,Arial,sans-serif;font-size:11px;font-weight:400;text-decoration:none}</style>

    <base href="http://np.dev/">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="language" content="en_US">
    <meta name="url" content="http://np.dev">
    <meta name="identifier-URL" content="http://np.dev">
    <meta name="revised" content="Sun, 19 Oct 2014 23:00:50">    
    <title>My localhost demo site</title>
    <link rel="stylesheet" type="text/css" href="http://np.dev/tmp/cache/stylesheet_combined_b494846cba46cad77e309f4df2e3bfe7.css">
    <link rel="stylesheet" type="text/css" href="http://np.dev/tmp/cache/stylesheet_combined_d3f3ceb94300bf27c9a51ce2e1404348.css">
    ...
    </head>

I don't think its possible to "prevent" the first 5 <head> 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 <head> once the window is ready. Is this possible?

Solution

Deleting all the head style and link elements this way would work as you can expect, adding an lt() selector would limit the selection to the first N of each type.

http://api.jquery.com/lt-selector/

$(function() {
    $('head style[type="text/css"]:lt(4)').remove();
    $('head link[type="text/css"]:lt(1)').remove();
});

Overriding the properties set by Google may be a more maintainable solution.