0

Is it possible to add a custom text to google static map?

I am using google static as following:

https://maps.googleapis.com/maps/api/staticmap?&zoom=7&text=testcenter=51.45400691005982,-4.4439697265625&size=600x600&maptype=roadmap&key=key&path=xxx,yyy
MMSA
  • 810
  • 8
  • 22
  • What do you mean by custom text? Custom marker text? A text overlay with the address? A title overlay that says "Map of XX"? – Luke Oct 30 '17 at 19:06
  • No, just string of text. – MMSA Oct 31 '17 at 12:47
  • Am not sure why I am being down marked for? my question is clearly stating "Custom Text" not a marker or anything else, just text, can be a title "overlay" that a text, then yes? – MMSA Oct 31 '17 at 12:48

1 Answers1

1

Ok so here is the thing, Google Maps Static populates your DOM with an image essentially. Though you can modify characteristics of this image, it comes from google and is not modifiable in your DOM - what you see is all that you get. To overlay text you need to embed the map div inside another div in which you will place the text.

Basically it should look like this:

<div class="wrapper">

    <div id="googleMap">
        <img src="https://maps.googleapis.com/maps/api/staticmap?center=Berkeley,CA&zoom=14&size=400x400">
   </div>

   <div id="mapText">
      <span>THIS IS YOUR TEXT</span>
   </div>

</div>

Then you can use CSS to style exactly how and where you want this text to appear overlayed on the map.

.wrapper {
  position: relative;
}

#mapText {
  position: absolute;
  bottom: 50%;
  font-family: sans-serif;
  font-size: 30px;
  color: red;
}

Tested this on fiddle and it works fine. Hope this helped!

Luke
  • 943
  • 6
  • 12
  • Thanks, Luke, but that won't be saved when I download the static image or save it with PHP? – MMSA Nov 01 '17 at 14:16
  • No this would be a DOM manipulation only. I haven't had any experience with modifying (saved) images but with my limited exposure I am sure IMagick is worth looking into. Check out this link: https://stackoverflow.com/questions/6021894/draw-text-with-custom-font-using-imagemagick-and-php – Luke Nov 02 '17 at 15:42