Add marker to center of static google map

Question

It is very simple to create a google map and center on a given location (see below). It is also similarity simple to create a google map and show markers on it by doing something like markers=color:blue%7Clabel:S%7C11211%7C11206%7C11222.

How would I just create a simple centered map like the below, but add a single marker in the very center? Thanks

<img alt="Map" src="http://maps.google.com/maps/api/staticmap?center=+AUBURN+WA+98001&amp;zoom=14&amp;size=400x400&amp;sensor=false">

Have you already read this? https://developers.google.com/maps/documentation/staticmaps/#Markers — Dr.Molle, Jan 03 '13 at 14:29
@Dr.Molle. Yes I have. It describes adding markers, but not at the center. I suppose I can create a map which specifies the center as I did in my example, and then create a marker with the exact same address, however, I expect there is a more efficient way to do it all at once with one call to google's database (or however they do it) — user1032531, Jan 03 '13 at 14:36
[This](http://maps.googleapis.com/maps/api/staticmap?size=400x400&markers=color:blue%7Clabel:S%7CWilliamsburg,Brooklyn,NY&sensor=false) works for me (and should work according to the documentation). — geocodezip, Jan 03 '13 at 14:43
It is close to centered, but isn't. Probably good enough. Only way I can center is do the following: http://maps.googleapis.com/maps/api/staticmap?size=400x400&markers=color:blue|label:S|Williamsburg,Brooklyn,NY&sensor=false&center=Williamsburg,Brooklyn,NY — user1032531, Jan 03 '13 at 14:46
see this answer http://stackoverflow.com/questions/4180006/google-maps-api-static-custom-marker-not-showing-up — Karim Samir, Jan 30 '13 at 14:56

score 7 · Answer 1 · edited Apr 18 '18 at 19:07

7

I guess that the map automatically will fit to show the specified markers, here you will find

Marker Locations

Each marker descriptor must contain a set of one or more locations defining where to place the marker on the map. These locations may be either specified as latitude/longitude values or as addresses. These locations are separated using the pipe character (|).

The location parameters define the marker's location on the map. If the location is off the map, that marker will not appear in the constructed image provided that center and zoom parameters are supplied. However, if these parameters are not supplied, the Static Map server will automatically construct an image which contains the supplied markers. (See Implicit Positioning below.)

edited Apr 18 '18 at 19:07

Bob Stein

16,271
10
88
101

answered Apr 26 '13 at 21:52

Victor

3,841
2
37
63

4

indeed it works :), check this out : https://maps.googleapis.com/maps/api/staticmap?zoom=5&size=250x250&sensor=false&maptype=roadmap&markers=color:red|39.926586,116.405640 – Victor Apr 26 '13 at 21:54
1

^^ Thanks for the above example @Victor! Very helpful :) – Dan Mar 19 '15 at 00:32

score 1 · Answer 2 · answered Jun 14 '15 at 10:38

1

You could also add your own centered background image ontop if the map :)

background: url('yourmarker.png' ) center no-repeat, url(http://maps.google.com/maps/api/staticmap?center=AUBURN+WA+98001&zoom=14&amp&size=400x400);

answered Jun 14 '15 at 10:38

user1087110

3,633
11
34
43

score 1 · Answer 3 · answered Dec 16 '15 at 05:32

here i am giving the code in step by step

NSString *strLat = [NSString stringWithFormat:@"%f",_message.latitude];
NSString *strLong = [NSString stringWithFormat:@"%f",_message.longitude];
NSString *strURL = [NSString stringWithFormat:@"%@center=%@,%@&zoom=15&size=200x200&markers=color:red%%7Clabel:C%%7C%@,%@&key=%@",https://maps.googleapis.com/maps/api/staticmap?,strLat,strLong,strLat,strLong,GOOGLE_API_BROWSER_KEY];
NSLog(@"strURL %@",strURL);
strURL = [strURL stringByReplacingOccurrencesOfString:@"%%" withString:@"%"];

now you have a image url

Thank you dude. Just giving `center` without any value does the job — Akbarsha, Mar 16 '16 at 20:19

score 0 · Answer 4 · answered May 08 '20 at 18:57

Google Static Maps Reference For Addresses:

https://developers.google.com/maps/documentation/maps-static/dev-guide#Addresses

Here's a JavaScript function that I've used recently to do this. The addressElements parameter passed to the function is an array of address elements e.g. ['10 Main St', 'Brownsville', 'MS', '27123', 'USA'].

You can see that I've commented out the center and zoom properties as you don't need those when you define a marker. To remove the marker, just uncomment those two lines and comment out the markers line.

You can obviously construct this image yourself, but I used the URLSearchParams to simplify parameter creation and have them URL encoded automagically.

function getGoogleMapsImage(addressElements) {
    var image = Nucleus.element('img');
    image.width = '256';
    image.height = '256';
    var joined = addressElements.join(',');
    var params = new URLSearchParams();
    //params.append('center', joined);
    //params.append('zoom', '15');
    params.append('size', '256x256');
    params.append('maptype', 'roadmap');
    params.append('key', 'YOUR_API_KEY_HERE');
    params.append('markers', 'color:red|label:C|' + joined);
    var url = 'https://maps.googleapis.com/maps/api/staticmap?' + params.toString();
    image.src = url;
    return image;
}

Add marker to center of static google map

4 Answers4