getting google map to appear in a specific div

Question

I have a very simple web site with a set of div's comprising banner(full width), left menu(200px) and right content(600px). I have five menu items which use a simple jquery script to load the right hand side content when clicked. Everything works well except for google maps which won't open. when I goto localhost/contact.html it loads fine so the functionality is there. it just doesn't like being embedded in the overall document/html.

Code for the Menu:

    $(document).ready(function() {
    $("#about").on("click", function() {
        $("#content").load("about-us.html");
    });
    $("#candidate").on("click", function() {
        $("#content").load("candidate.html");
    });
    $("#client").on("click", function() {
        $("#content").load("client.html");
    });
    $("#meet").on("click", function() {
        $("#content").load("meet.html");
    });
    $("#contact").on("click", function() {
        $("#content").load("contact.html");
    });
});

Code for contact.html

<body>
    <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script>
        var myCenter = new google.maps.LatLng(51.510252,-0.086585);

            function initialize()
            {
                var mapProp = {
                    center: myCenter,
                    zoom: 15,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

                var marker = new google.maps.Marker({
                    position: myCenter,
                    animation:google.maps.Animation.BOUNCE
                });

                marker.setMap(map);
            }
    </script>

       <table border="3px">
            <tr><td align="right">
                    t: <br>
                    1st Floor<br>
                    Regis House<br>
                    45 King William Street<br>
                London, EC4R 9AN
                </td>
                <td id="googleMap" width="300px" height="300px">
                </td>
            </tr>
        </table>
        <script type="text/javascript">initialize('googleMap');</script>
</body>

Just sniffed with chrome and seeing this error:

Uncaught ReferenceError: google is not defined VM500:1
(anonymous function) VM500:1
o.extend.globalEval jquery-2.1.0.min.js:2
o.fn.extend.domManip jquery-2.1.0.min.js:3
o.fn.extend.append jquery-2.1.0.min.js:3
(anonymous function) jquery-2.1.0.min.js:3
o.access jquery-2.1.0.min.js:2
o.fn.extend.html jquery-2.1.0.min.js:3
(anonymous function) jquery-2.1.0.min.js:4
j jquery-2.1.0.min.js:2
k.fireWith jquery-2.1.0.min.js:2
x jquery-2.1.0.min.js:4
(anonymous function)

You need to add more information to your question. Here (http://jsfiddle.net/PdcE9/) the Google maps works. — Praveen, Feb 16 '14 at 14:21

score 0 · Answer 1 · answered Feb 25 '14 at 18:25

I'm a numpty ... this was easy to solve in the end .. given my is a component of the main an the simple js is switching out the I simply needed to put the API call into the main index.html and not the child ... so moved this

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

into the index.html ... all working fine .. now I have a different issue with housing the map within the when using Firefox ... IE and Chrome fine with the code but Firefox builds the map into the whole page ..

getting google map to appear in a specific div

1 Answers1