Google Maps

Hi I have Google Maps on my PAGE but it is not showing.
I have everything in there. The HTML CSS AND JS

 <input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map-canvas"></div>


                                                                                                                                                       // This example adds a search box to a map, using the Google Place Autocomplete
// feature. People can enter geographical searches. The search box will return a
// pick list containing a mix of places and predicted search terms.

function initialize() {

  var markers = [];
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    mapTypeId: google.maps.MapTypeId.ROADMAP

  var defaultBounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(-33.8902, 151.1759),
      new google.maps.LatLng(-33.8474, 151.2631));

  // Create the search box and link it to the UI element.
  var input = /** @type {HTMLInputElement} */(

  var searchBox = new google.maps.places.SearchBox(
    /** @type {HTMLInputElement} */(input));

  // [START region_getplaces]
  // Listen for the event fired when the user selects an item from the
  // pick list. Retrieve the matching places for that item.
  google.maps.event.addListener(searchBox, 'places_changed', function() {
    var places = searchBox.getPlaces();

    if (places.length == 0) {
    for (var i = 0, marker; marker = markers[i]; i++) {

    // For each place, get the icon, place name, and location.
    markers = [];
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0, place; place = places[i]; i++) {
      var image = {
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(25, 25)

      // Create a marker for each place.
      var marker = new google.maps.Marker({
        map: map,
        icon: image,
        position: place.geometry.location



  // [END region_getplaces]

  // Bias the SearchBox results towards places that are within the bounds of the
  // current map's viewport.
  google.maps.event.addListener(map, 'bounds_changed', function() {
    var bounds = map.getBounds();

google.maps.event.addDomListener(window, 'load', initialize);                      

The problem is you’re trying to access google.maps object before it was actually loaded.

Ok so is there something in the wrong position or something missing?

Where are you calling your initialize function?

in my bootstrap.js.min file…

<script src=""></script>
<script src=""></script>
<script src="Scripts/dropdown_language.js" ></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="" type="text/javascript"></script>
<script src="Scripts/jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script>
<script src="Scripts/productpages_carousel.js"></script>
<script src=""></script>

According to firefox - developers - console - ‘google’ is not defined.

Think you need to include the map.googleapis… before you include the bootstrap.

That’s exactly what I ment in first post. If you include google API after your own code, how your code will know what is google.maps?

You also seem to have 3 versions of jquery running which will create conflicts.

Try removing the older versions and move your bootstrap.min.js to the end as the others have suggested.


<script src=""></script>
<script src="" ></script>
<script src="" type="text/javascript"></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>

I believe you will also need to set a width and height for the map canvas or nothing will show.



Also there’s an error in the sticky header routine that you stuck in there also. There is no fxd-nav on that page so you get an error.

Change this line:

  if (typeof sticky != "undefined") {

to this:

 if ( $(sticky).length) {
1 Like

It works now but I think this was the problem because I was
doing what they suggested but it didnt seem to work.

I want to set the zoom and location but doesnt seem to grab this
script. The current script that I put doesnt come with a zoom.

var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(37.09024, -95.712891),
    disableDefaultUI: true

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.