Intergrating chalkley's responsive google map I frame code (videos from 'Build an Interactive Website') with wordpress

I have the full code from the videos working on both the test project and a personal HTML/Sass prototype. I think my problem is coming with the wordpress intergration.

In the original videos the main google map functions, initialize, add markers e.t.c. are moved to a seperate html file, map.html. Then called from a script in the locations.html page via this code:

$("#location").prepend('<iframe id="map" src="map.html" scrolling="no" style="border: 0px;"></iframe>');

This creates a responsive Iframe showing the map in full detail.

When attempting this in wordpress, inline with the Jquery no conflict issues I am trying to call the google map functions via the wordpress functions.php file. I have therefore created a map.js file with Chalkleys code in, registered and enqueued it

// *****Google Maps*****
function location_map() {  
wp_enqueue_script( 'google-maps-api', '//maps.googleapis.com/maps/api/js?key=*******&sensor=false', array( 'jquery' ), false, null);

wp_register_script('map_js', get_template_directory_uri() . '/js/map.js', array( 'jquery' ), '', true );  
    if ( is_page('map') ) {
    wp_enqueue_script( 'map_js' );
    }
}   

I have also created a Map page template containing the required div element html<div id="map"></div> (required due to this peice of google map code html new google.maps.Map(document.getElementById("map") as per video.

I have changed the call from the locations page to reflect the new wordpress src file and this seems to be where the error is -

$("#location").prepend('<iframe id="map" src="http://localhost/my-site/map/" scrolling="no" style="border: 0px;"></iframe>');

The result is I am getting the Iframe prepended correctly, but no map shown. The map page appears within the Iframe complete with the wordpress admin toolbar!. When viewing the source for locations page it shows the correct JS files loaded (all of them but the map.js) then if I right click on the Iframe, then the option to view frame source it shows the map.js has now been loaded but nothing appears to have triggered. I get no console errors. I have also tried changing the src file to the locations page.

My conclusion is either i'm not using the correct src path in the iframe prepend call or I have not marked up the Jquery correctly in the map.js file. Either way I am at a loss and cannot find anything relevant to check it against via google. I am trying to avoid using the wordpress googlemaps plugins so any ideas here would be appreciated.

my map.js mark up - Does this possibly need to be wrapped up in one function in order to be called?

Thanks in advance

jQuery(document).ready(function($) {

          var map;
          var bounds;
          var geocoder;
          var center;
          function initialize() {
            var mapOptions = {
              center: new google.maps.LatLng(***),
              zoom: 20
            };
            map = new google.maps.Map(document.getElementById("map"),
                mapOptions);
            geocoder = new google.maps.Geocoder();
            bounds = new google.maps.LatLngBounds();
            };
            function addMarkerToMap(location, address){
              var marker = new google.maps.Marker({map: map, position: location});
              bounds.extend(location);
              map.fitBounds(bounds);          
              var infoWindow = new google.maps.InfoWindow({ content : address});
              google.maps.event.addListener(marker, "click", function(){
                infoWindow.open(map, marker);
              });
            }

          initialize();

          $("address", parent.window.document).each(function(){
            var $address = $(this);
            geocoder.geocode({address: $address.text()}, function(results, status){
                if(status == google.maps.GeocoderStatus.OK) addMarkerToMap(results[0].geometry.location, $address.html());
            });
          });

          google.maps.event.addDomListener(map, "idle", function(){
            center = map.getCenter();
          });

          $(window).resize(function(){
            map.setCenter(center);
          });    

});