Google Maps API get place text like on iframe map

Question

So I have found a couple of ways to get maps onto my page, the first version is by using an iframe like so:

<iframe src="https://www.google.com/maps/embed/v1/place?key=[APIKEY]&amp;q=place_id:[PlaceID]"></iframe>

which gives a marker like the following image with the name of the place next to the marker:

However, this isn't perfect as it has that massive white box in the top left and according to many SO posts, you are unable to remove it.

So I thought I would try the js route so have the following code:

var map = new google.maps.Map(this, {
  zoom: 15,
  center: { lat: options.latitude, lng: options.longitude }
});

marker = new google.maps.Marker({
  map: map,
  title: options.title
});

marker.setPlace({
  placeId: options.placeId,
  location: { lat: options.latitude, lng: options.longitude }
});

var infowindow = new google.maps.InfoWindow(
  {
    content: '<strong>' + options.title + '</strong><br />' + options.address
  });

google.maps.event.addListener(marker, 'click', function () {
  infowindow.open(map, marker);
});

Where all the options are filled in with proper values. However, this produces the following map which is better as it doesn't have the white box:

However, the second map doesn't have the shop text on the map even though it is using the same place id as the first one is.

Is there any way to change the js code so that it will include the place text like in the iframe version? I have searched all the documentation and examples but couldn't find any setting to do this

Answer 1

You can add that label to the map yourself. One option is to use an InfoBox:

function addMapLabel(text, latlng, map) {
  var labelText = "<b>" + text + "</b>";

  var myOptions = {
    content: labelText,
    boxStyle: {
      border: "none",
      textAlign: "center",
      fontSize: "8pt",
      width: "auto",
      color: "#800000"
    },
    disableAutoPan: true,
    pixelOffset: new google.maps.Size(10, -10),
    position: latlng,
    closeBoxURL: "",
    isHidden: false,
    pane: "mapPane",
    enableEventPropagation: true
  };

  var ibLabel = new InfoBox(myOptions);
  ibLabel.open(map);
}

proof of concept fiddle

code snippet:

function addMapLabel(text, latlng, map) {
  var labelText = "<b>" + text + "</b>";

  var myOptions = {
    content: labelText,
    boxStyle: {
      border: "none",
      textAlign: "center",
      fontSize: "8pt",
      width: "auto",
      color: "#800000"
    },
    disableAutoPan: true,
    pixelOffset: new google.maps.Size(10, -10),
    position: latlng,
    closeBoxURL: "",
    isHidden: false,
    pane: "mapPane",
    enableEventPropagation: true
  };

  var ibLabel = new InfoBox(myOptions);
  ibLabel.open(map);
}
var map;
var options = {
  placeId: "ChIJ68TmaaTCe0gRy70pZDzQ17U",
  latitude: 53.7153659,
  longitude: -1.8790866,
  title: "Dickies Tiles",
  address: "Aachen Way, Halifax HX1 3ND, United Kingdom"
}

function initialize() {
  var map = new google.maps.Map(document.getElementById("map_canvas"), {
    zoom: 15,
    center: {
      lat: options.latitude,
      lng: options.longitude
    }
  });

  marker = new google.maps.Marker({
    map: map,
    title: options.title
  });

  marker.setPlace({
    placeId: options.placeId,
    location: {
      lat: options.latitude,
      lng: options.longitude
    }
  });

  var infowindow = new google.maps.InfoWindow({
    content: '<strong>' + options.title + '</strong><br />' + options.address
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, marker);
  });
  addMapLabel(options.title, new google.maps.LatLng(options.latitude, options.longitude), map);
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div id="map_canvas"></div>

Answer 2

Just in case anyone else needs this type of thing, I found a better plugin than the infobox one in my accepted answer (although I am leaving that as the accepted as it pointed me in the right direction). It is:

MarkerWithLabel.

It offers the same as InfoBox but also lets you click on the label, as you would the marker, to open the info window

An example of how I used it would be:

var map;
var options = {
  placeId: "ChIJ68TmaaTCe0gRy70pZDzQ17U",
  latitude: 53.7153659,
  longitude: -1.8790866,
  title: "Dickies Tiles",
  address: "Aachen Way, Halifax HX1 3ND, United Kingdom"
}

function initialize() {
  var map = new google.maps.Map(document.getElementById("map_canvas"), {
    zoom: 15,
    center: {
      lat: options.latitude,
      lng: options.longitude
    }
  });

  var marker = new MarkerWithLabel({
    position: new google.maps.LatLng(options.latitude, options.longitude),
    map: map,
    title: options.title,
    labelContent: options.title,
    labelAnchor: new google.maps.Point(-13, 15),
    labelClass: "map-label",
    labelStyle: {
      border: 'none',
      textAlign: 'center',
      fontSize: '12px',
      width: 'auto',
      color: '#800000'
    }
  });

  marker.setPlace({
    placeId: options.placeId,
    location: {
      lat: options.latitude,
      lng: options.longitude
    }
  });

  var infowindow = new google.maps.InfoWindow({
    content: '<strong>' + options.title + '</strong><br />' + options.address
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, marker);
  });
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

.map-label { text-shadow: -1px -1px 0 #ffffff,1px -1px 0 #ffffff,-1px 1px 0 #ffffff,1px 1px 0 #ffffff; font-weight:bold; }

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js"></script>
<div id="map_canvas"></div>