将自定义文本添加到 Google Maps Static？

Question

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

Answer 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!