Can't remove map part of function

Question

I have some code heavily borrowed from Google's examples. All I'm using is the Google Places results part of this code, so I'd like to remove the map part out. So, when I do, it throws an error of Cannot read property 'innerHTML' of undefined, since I'm guessing it's needed for the var service function.

Any help removing this area of code?

var map;
var infowindow;

// Create Google Map with location at center

function initMap(latitude, longitude) {
  var location = {lat: latitude, lng: longitude};
  console.log(location);

  // REMOVE THIS SECTION
  map = new google.maps.Map(document.getElementById('map'), {
    center: location,
    zoom: 15
  });
  // ^^ REMOVE THIS SECTION

  var service = new google.maps.places.PlacesService(map);
  service.nearbySearch({
    location: location,
    radius: 3200,
    types: ['school']
  }, callback);
}

// List nearby places

function callback(results, status) {
  if (status === google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      listPlaces(results[i]);
    }
  }
}

it seems google map creates some html elements(in element with id "map").. but when you remove that section, then other code which uses those html elements throw exception. and yes your guess is right. — Sachin, Jan 09 '16 at 16:50
Yeah, and I'm simply hiding the `
` on the page. But I'd like to do without it! — user1661677, Jan 09 '16 at 16:58
What is `listPlaces`? Please provide a [Minimal, Complete, Tested and Readable example](http://stackoverflow.com/help/mcve) that demonstrates your issue. — geocodezip, Jan 09 '16 at 19:09

score 0 · Answer 1 · answered Jan 09 '16 at 17:01

0

Well, it's called "Googgle Maps API" for a reason :-)

In addition, you can hide the map, but the terms of service are including a requirement to show the "powered by Google" logo somewhere on your page.

answered Jan 09 '16 at 17:01

Ilya

5,377
2
18
33

score 0 · Answer 2 · answered Jan 09 '16 at 17:04

0

you can use

<div id="map" style='display:none'></div>

on your map.
That way it will still be there for other code to work and won't show up on your page

answered Jan 09 '16 at 17:04

Sachin

1,208
1
10
20

score 0 · Answer 3 · edited May 23 '17 at 12:31

Ilya is correct that the license by which you use Googles data requires attribution (see https://developers.google.com/maps/documentation/javascript/places?hl=en#LogoRequirements).

A similar question has been asked before here: google places library without map

To get rid of the map, I would think you could do something like this:

map = new google.maps.Map(document.createElement('div'), {
    center: location,
    zoom: 15
});

This way you never add anything to the DOM. Just remember to add the Powered by Google graphic. (https://developers.google.com/places/documentation/images/powered-by-google.zip)

geocodezip · Answer 4 · 2016-01-09T19:24:54.360

According to the documentation:

a map isn't required, but if one isn't displayed you must show a "Powered by Google" logo with that data:

If your application displays Google Places API data on a page or view that does not also display a Google Map, you must show a "Powered by Google" logo with that data.

The PlacesService Constructor takes either a google.maps.Map object or a HTMLDivElement (you don't have to provide a map, you can provide a div to display the manadatory attributions)

Constructor

PlacesService(attrContainer:HTMLDivElement|Map) Creates a new instance of the PlacesService that renders attributions in the specified container.

code snippet:

function initMap(latitude, longitude) {
  var location = {
    lat: latitude,
    lng: longitude
  };
  console.log(location);

  var service = new google.maps.places.PlacesService(document.getElementById('map'));
  service.nearbySearch({
    location: location,
    radius: 3200,
    types: ['school']
  }, callback);
}

// List nearby places
function callback(results, status) {
  if (status === google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      document.getElementById('places').innerHTML += results[i].name + ", " + results[i].vicinity + "<br>";
      // listPlaces(results[i]);
    }
  } else {
    document.getElementById('places').innerHTML += "Status: " + status + "<br>";
  }
}
google.maps.event.addDomListener(window, "load", function() {
  initMap(40.7127837, -74.0059413);
});

#map {
  height: auto;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div id="map"></div>
<div id="places"></div>
<img src="https://developers.google.com/places/documentation/images/powered-by-google-on-white.png" alt="Google Logo" />

Can't remove map part of function

4 Answers4

Linked