How to add custom marker image Google Static Map?
I am using the following URL in order to get a static map
https://maps.googleapis.com/maps/api/staticmap?size=250x250&markers=color:red%7C$marker_start&markers=color:green%7C$marker_end&path=weight:3%7Ccolor:red%7Cenc:$encodedString
I am only able to change color and add a marker that already exists but not the image that created by me.
Yes, the documentation has a section explaining how to use your own images instead of their markers:
https://developers.google.com/maps/documentation/staticmaps/intro#CustomIcons
e.g.
https://maps.googleapis.com/maps/api/staticmap?markers=icon:http://www.example.com/yourimage.png
Here's an example using an encoded polyline too.
https://maps.googleapis.com/maps/api/staticmap?markers=icon:http://www.gravatar.com/avatar/e5594b71e9f54f3e73f6294b054f5616?s=32%26d=identicon%26r=PG|54.763228,-130.617302&size=400x400&path=weight:3%7Ccolor:orange%7Cenc:_fisIp~u%7CU}%7Ca#pytA_~b#hhCyhS~hResU%7C%7Cx#oig#rwg#amUfbjA}f[roaAynd#%7CvXxiAt{ZwdUfbjAewYrqGchH~vXkqnAria#c_o#inc#k{g#i%60]o%7CF}vXaj\h%60]ovs#?yi_#rcAgtO%7Cj_AyaJren#nzQrst#zuYh%60]v%7CGbldEuzd#%7C%7Cx#spD%7CtrAzwP%7Cd_#yiB~vXmlWhdPez\_{Km_%60#~re#ew^rcAeu_#zhyByjPrst#ttGren#aeNhoFemKrvdAuvVidPwbVr~j#or#f_z#ftHr{ZlwBrvdAmtHrmT{rOt{Zz}E%7Cc%7C#o%7CLpn~AgfRpxqBfoVz_iAocAhrVjr#rh~#jzKhjp#%60%60NrfQpcHrb^k%7CDh_z#nwB%7Ckb#a{R%7Cyh#uyZ%7CllByuZpzw#wbd#rh~#%7C%7CFhqs#teTztrAupHhyY}t]huf#e%7CFria#o}GfezAkdW%7C}[ocMt_Neq#ren#e~Ika#pgE%7Ci%7CAfiQ%7C%60l#uoJrvdAgq#fppAsjGhg%60#%7ChQpg{Ai_V%7C%7Cx#mkHhyYsdP%7CxeA~gF%7C}[mv%60#t_NitSfjp#c}Mhg%60#sbChyYq}e#rwg#atFff}#ghN~zKybk#fl}A}cPftcAite#tmT__Lha#u~DrfQi}MhkSqyWivIumCria#ciO_tHifm#fl}A{rc#fbjAqvg#rrqAcjCf%7Ci#mqJtb^s%7C#fbjA{wDfs%60BmvEfqs#umWt_Nwn^pen#qiBr%60xAcvMr{Zidg#dtjDkbM%7Cd_#
it is very common question and very simple soluion for that to Add only
&markers=icon:http://tinyurl.com/2ftvtt6|lat,lng
while hitting that Api.so simply
your APi must be see like this
http://maps.google.com/maps/api/staticmap?center=40.714728,-73.998672&markers=icon:http://tinyurl.com/2ftvtt6|40.714728,-73.998672&zoom=12&size=400x400&sensor=false
and for more info please visit http://phpidiots.in/android/google-static-map-api/
:) enjoy your code
I help solution here for the marker in google compose Android : enter link description here
Related
please i am new to flutter googlemaps., I would like to take a screenshot of googlemap showing directions between two markers, currently i used the screenshot plugin but this only captured a blank image. Please help a brother.
You can use the takeSnapshot method from the GoogleMapController class of the google_maps_flutter package. This method returns an image bytes of the map.
Here's the github link for the sample code.
I'll suggest to use "Map Static API" which gives you a jpg image (with markers and anything you want) passing the lat and long.
Link: https://developers.google.com/maps/documentation/maps-static/overview
Example:
https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap
&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318
&markers=color:red%7Clabel:C%7C40.718217,-73.998284
&key=YOUR_API_KEY
Result:
i am not fluent in js and Html, i am trying to fix the map on our website that shows dashed border :
And the actual map look like this (on google map) :
There is a political issue and google shows the map without border(dashed) to users inside Morocco and show the other map to the rest of the world users, we need to fix this as 90% of the target users on our website are from Morocco.
I have tried to fix it using this method :
https://daker.me/2017/08/fix-morocco-borders-on-google-maps-2017-version.html
But either the map vanish or no changes, the original map code :
http://pasted.co/46e7141b
I also tried to change the Google Map API domain from google .com to .co.ma
Please if there is any solution i would like to fix this as soon as i can, thank you in advance.
This sounds like something that you may not be able to change, but some of the styling of the map certainly can be altered. Google has a great tool here you can check out to investigate with:
https://mapstyle.withgoogle.com/
Further details can be found here:
https://developers.google.com/maps/documentation/javascript/styling
Use region=MA query parameter in your API calls, see localization docs,
and demo.
Is it possible to link to a Google map (hosted by google, link starting with maps.google.com) and include a marker/icon?
E.g. I have the following link:
https://www.google.ch/maps/#47.5677272,7.6109065,14z?hl=de
Can I do something like this:
https://www.google.ch/maps/#47.5677272,7.6109065,14z?hl=de&iconurl=url/on/my/server&iconpos=47.5677272,7.6109065
If I understand correctly you want a map that displays a marker at the specified coordinates. See if this link is what you need. just add place and two slash
map link
I've been wondering about this for some time:
Is it possible to let a custom marker for a place on a google map display an infowindow with the same information that the infowindows on maps.google.com display when clicking on a place, without having to generate the HTML for the content yourself (using the places library)? I hope you know what I mean. Please let me know if I'm being unclear.
It would be great if one could pull the information straight from google instead of having to do it manually. I mean, why do something that's already there, right? ;)
Thanks for sharing your thoughts!
edit: I've tried rephrasing my question to make it clearer. I've removed the example code because it was just adding to the confusion. Sorry, English isn't my first language ...
There is currently no API call from Google that will provide the default InfoWindow content for a Lat/Long location.
The only thing google currently provides is some Reverse Geocoding Infomation.
URL:
http://maps.google.com/maps/api/staticmap?center=40.714728,-73.998672&markers=icon:http://tinyurl.com/2ftvtt6&zoom=12&size=400x400&sensor=false
I have no clue what I'm doing wrong here.
Developer Guide:
API - Custom Icons
...markers=icon:url[stop]&zoom=...
It seems that you defined marker style, but didn't define marker location. It should be:
http://maps.google.com/maps/api/staticmap?center=40.714728,-73.998672&markers=icon:http://tinyurl.com/2ftvtt6|40.714728,-73.998672&zoom=12&size=400x400&sensor=false
I had some problems with the markers, too.
Maybe these hints help other guys
Marker should be max 64x64 pixels in size
long marker filenames can cause issues
always define a marker location - see accepted answer
Another point I wanted to add for future reference. Don't use svg files. They won't be rendered in the final map image.