Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by gareth connop
gareth connop
14,865 Points

Google static maps custom markers

I'm in the process of adding a static map to my site, as a fallback for browsers with javascript turned off. I'm using Andrew Chalkleys method from the "Building an interactive website" course and all has gone well. To finish off I have decided to customize the markers in the static map to match the ones in my javascript version but I don't seem to be able to get it to work.

The code I am using is as follows:

    <p id="static_map">
        <img src="http://maps.googleapis.com/maps/api/staticmap?key?=AIzaSyDiEeLEXEf0DOThDfp9DBYbugN29EQaZsM&size=600x314&sensor=false&zoom=12&maptype=roadmap&visual_refresh=true&style=feature:transit.line|visibility:off&style=feature:poi|visibility:off&markers=icon:http://garethconnop.com/images/logo-marker.png%7C113+Warburton+Road,+Canford+Heath,+Poole,+Dorset,+BH17+8SD,+United Kingdom" alt="113 Warburton Road, Canford Heath, Poole, Dorset, BH17 8SD, United Kingdom">
    </p>

Any help with this would be appreciated.

Thanks

2 Answers

Valery Kukatov
Valery Kukatov
6,996 Points
Valery Kukatov
Valery Kukatov
6,996 Points

I think your marker is too big. If you were to get it shrunk it should show up. I tried this with http://stackoverflow.com/questions/4180006/google-maps-api-static-custom-marker-not-showing-up the answer provided there and your icon didn't work as well.

But when I switched the icon link with the one provided it worked. Here is what I got using their link for the icon.

http://maps.googleapis.com/maps/api/staticmap?key?=AIzaSyDiEeLEXEf0DOThDfp9DBYbugN29EQaZsM&size=600x314&sensor=false&zoom=12&maptype=roadmap&visual_refresh=true&style=feature:transit.line|visibility:off&style=feature:poi|visibility:off&markers=icon:http://www.nonprofitcenters.org/fileadmin/templates/images/map_assets/img/map_pin_green.png%7C113+Warburton+Road,+Canford+Heath,+Poole,+Dorset,+BH17+8SD,+United%20Kingdom

Valery Kukatov
Valery Kukatov
6,996 Points

And of course I was right, it's the size that makes yours not work. You are limited to 64x64 custom icons. Here is a direct link to where you should read: https://developers.google.com/maps/documentation/staticmaps/#CustomIcons

gareth connop
gareth connop
14,865 Points
gareth connop
gareth connop
14,865 Points

Hi Valery,

Thanks for taking the time to look at this.

The reason I was using a larger image, is due to retina displays. Is there a way to use the existing image but set the size to half of the width and height? Or is there another way of doing this?

Thanks again.