Pete February 2016

Google Maps API get place text like on iframe map

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:

enter image description here

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:

enter image description here

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

Answers


geocodezip February 2016

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);
}

Google Maps Javascript API v3 map with label

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 


Pete February 2016

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",  

Post Status

Asked in February 2016
Viewed 2,968 times
Voted 5
Answered 2 times

Search




Leave an answer