View the Google Static Map Marker.

See the Pen Google Static Map Maker by Katy DeCorah (@katydecorah) on CodePen

After working with Google Static Maps for some of my posts (re: Static Google Maps Image for Jekyll Posts), I started scheming on an easier way to arrive at a map. I thought this might be helpful for other people too.

This project is powered with Angular. I’ve only dabbled in Angular, but it came in handy because it’s so great with forms.

Head scratcher

One thing that had me scratching my head: how to evaluate an expression, but then output something else. For instance, when I don’t have a value for the API Key input, then I don’t want the parameter to be displayed in the API call. Because if the value of api is blank, it can throw an error. I knew I needed a way to check the value of the input and output code based on that evaluation, but I couldn’t figure out how to write it.

Finally, I figured it out.

{{ e.API !== '' && '&key='+e.API || ''}}

Wherever this is present, it will evaluate the input and then output based on evaluation. If the input does not equal an empty string, or if the input has a value, (e.API !== '') then output &key=[whatever the api key is] otherwise (||) show '' (empty string).

I evaluated the checkbox for the Map Marker (showMarker) the same way:

{{ showMarker == 'true' && '&markers=size:'+e.markerSize+'%7Ccolor:'+e.markerColor+'%7C'+e.location.split(' ').join('+') || '' }}

Angular is pretty cool.