Google Maps

JavaScript
1

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

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

JAVASCRIPT:

                                                                                                                                                       // 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));
  map.fitBounds(defaultBounds);

  // Create the search box and link it to the UI element.
  var input = /** @type {HTMLInputElement} */(
      document.getElementById('pac-input'));
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

  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) {
      return;
    }
    for (var i = 0, marker; marker = markers[i]; i++) {
      marker.setMap(null);
    }

    // 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,
        title: place.name,
        position: place.geometry.location
      });

      markers.push(marker);

      bounds.extend(place.geometry.location);
    }

    map.fitBounds(bounds);
  });
  // [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();
    searchBox.setBounds(bounds);
  });
}

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

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

3

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

4

Where are you calling your initialize function?

5

in my bootstrap.js.min file…

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="Scripts/dropdown_language.js" ></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js" 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="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
6

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

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

7

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?

8

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.

e.g.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://impactograph.com/Scripts/dropdown_language.js" ></script>
<script src="http://impactograph.com/Scripts/jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script>
<script src="http://impactograph.com/Scripts/productpages_carousel.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
<script src="http://impactograph.com/Scripts/bootstrap.min.js"></script>

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

e.g.

#map-canvas{
width:100%;
height:400px;	
margin:auto;
}

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
9

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

10

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
  }
11

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