Google Map API not showing up

Question

I'm including a Google Map API in my site where it shows several markers with an info popup. I've input all my values into my marker variable but the map itself is not showing up at all. I've included all the javascript files. I can't seem to figure out what is wrong. Any help would be greatly appreciated. Here is the script for the markers:

<script type="text/javascript">

  $(function(){

    $('#test1').gmap3({
      map:{
        options:{
          center:[34.8400335,-115.967051],
          zoom: 7
        }
      },
      marker:{
        values:[
          {latLng:[48.8620722, 2.352047],data:"info"},
           {latLng:[34.1301, -117.286],data:"Client: Hi-Grade Materials, Project: San Bernardino Mine, Surveyed for Desert Tortoise Species"},
           {latLng:[34.8958, -117.016],data:"Client: City of Barstow, Project: South Borrow Area, Surveyed for Desert Tortoise and Burrowing Owl"},
           {latLng:[34, -117.3],data:"Client: R.A.M. Architecture, Project: Hesperia Development, Surveyed for Burrowing Owls"},
           {latLng:[33.6778, -117.215],data:"Client: Brookfield Residential, Project: Audie Murphy Ranch, Surveyed for Burrowing Owls"},
           {latLng:[33.5555, -117.203],data:"Client: Pacific Coast Land Consultants, Project: Westpark Promenade, Surveyed for various sensitive species"},
           {latLng:[34.5221, -117.325],data:"Client: Civic Rogers LLC, Project: Civic Rogers Development, Surveyed for Mojave Ground Squirrel, Desert Tortoise and Burrowing Owl"},
           {latLng:[37.5194, -122.039],data:"Client: Bielectric USA, Project: Navajo Solar Development, Surveyed for Mojave Ground Squirrel"},
           {latLng:[34.134, -118.332],data:"Client: Sunlight Partners, Project: Arrache 4006, Surveyed for Desert Tortoise and Burrowing Owls"},
            {latLng:[33.6885, -117.188],data:"Client: Golden Eagle Properties, Project: Villa Siena, Surveyed for various sensitive species"},
             {latLng:[34.1197, -117.536],data:"Client: Winchester Associates, Project: Moreno Development, Surveyed for Burrowing Owl species"},
             {latLng:[38.3991, -122.84],data:"Client: Dyna Solar, Project: MA Solar Site, Surveyed for Burrowing Owls"},
          {address:"10253 6th Avenue, Hesperia, CA", data:"Client: UEG, Mojave Square Project, Surveyed for Burrowing Owl Species"},
          {address:"", data:"", options:{icon: "http://maps.google.com/mapfiles/marker_green.png"}}
        ],
        options:{
          draggable: false 
        },
        events:{
          mouseover: function(marker, event, context){
            var map = $(this).gmap3("get"),
              infowindow = $(this).gmap3({get:{name:"infowindow"}});
            if (infowindow){
              infowindow.open(map, marker);
              infowindow.setContent(context.data);
            } else {
              $(this).gmap3({
                infowindow:{
                  anchor:marker, 
                  options:{content: context.data}
                }
              });
            }
          },
          mouseout: function(){
            var infowindow = $(this).gmap3({get:{name:"infowindow"}});
            if (infowindow){
              infowindow.close();
            }
          }
        }
      }
    });
  });
</script>

Answer 1

If you don't set the size of the <div> manually, the Google Map will render in a div that won't be visible. A highly irritating error to hunt down.

Try setting the size of the div:

<div id="yourID" style="width:400px; height:400px;"></div>

and include whatever ID you have the script set to operate with. That may be why @geocodezip got proper results with the code - as you are, you just can't see it.

Answer 2

gmap3 is not a google maps api function, is a function or Gmap3 'wrapper' api. See http://gmap3.net/en/ for reference. Be sure you include a reference to scripts for this api Excuse me my poor english level.