Google Maps API v3 Not Displaying

Question

I cannot get Google Maps to display for the life of me. I have been going over the code for hours, I am all but certain I am not missing anything.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<title>Profile</title>
<meta property="og:title" content=""/>
<meta property="og:type" content=""/>
<meta property="og:url" content=""/>
<meta property="og:image" content=""/>
<meta property="og:site_name" content=""/>
<meta property="fb:admins" content="USER_ID"/>
<meta property="og:description" content=""/>
<link rel="stylesheet" type="text/css" href="common.css">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<style>
  article, aside, details, figcaption, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>
</head>

<body>
<div id="wrapper">
  <header>
     <div id="logo">
    </div>
  </header>

  <script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=true"></script>

  <div id="profile">

    <div id="info">

    </div>


        <div class="map" id="map4" style=""></div>

        <script type="text/javascript">

        var map4 = document.getElementById('map4');
        var map4_bounds = new google.maps.LatLngBounds(); 
        var map4_center = new google.maps.LatLng(30.27, -86);
        var map4_geocoder = new google.maps.Geocoder();
        var map4_window;
        var map4_markers = [];
        var map4_windows = [];
        var map4_html = [];
        var map4_count = 0;



        var map4_options = {
            center: map4_center,
            draggable: false, 
            mapTypeId: google.maps.MapTypeId.ROADMAP, 
            maxZoom: 15, 
            minZoom: 10, 
            scrollwheel: false, 
            zoom: 12
            }

        var map4_canvas = new google.maps.Map(map4, map4_options);
        (function () {  /* Fixes a known bug with Google's API with displaying the InfoWindow(s) */

        new_location = false;
            new_latitude = '30.27';
            new_longitude = '-86';

            if(new_latitude != '' && new_longitude != '') {

            new_location = new google.maps.LatLng(new_latitude, new_longitude);                         
        var marker = new google.maps.Marker({
            map: map4_canvas, 
            position: new_location
        });


            map4_html[map4_count] = "Indianapolis, IN";
        map4_markers[map4_count] = marker;
        map4_count++;
            }
                    if(new_location) {
                    map4_canvas.setZoom(12)
                    map4_canvas.setCenter(new_location)

                }
            if(new_location) {

                var html = "Indianapolis, IN"       
                if(map4_html[map4_count-1] == "" || map4_html[map4_count] == "{title}")
                    map4_html[map4_count-1] = html;

                var infowindow = new google.maps.InfoWindow({
                    content: html
                });

                map4_windows[map4_count-1] = infowindow;                
                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map4_canvas, marker);
                    map4_window = infowindow;
                });
            }})(); /* End bug fix */

        </script>
    </div>
</div>
</body>
</html>

What in the world could I possibly be doing wrong? No matter what I try, the map area just keeps coming up blank.

Answer 1

Why should it display? You didn't specify any size of your map4 div element and it has no content, so its size is 0x0.

Google Maps API v3 Not Displaying

Question

1 answers

solution1
6 ACCPTED 2011-12-08 20:09:02

Google Maps API v3 Not Displaying

Question

1 answers

solution1 6 ACCPTED 2011-12-08 20:09:02

solution1
6 ACCPTED 2011-12-08 20:09:02