Tag Archive for: Google Maps API

Allow markers only within an area

/in /by

Map area for your makers using a polygon.

This was used as a challenge during one of our selection processes.

Text flickering when Google Maps loads

/in , /by

The solution to this issue is easier than you think. You have the Roboto font in your CSS but the user maybe doesn’t so the browser falls back to another font. As soon as Google Maps loads Roboto is available producing a kind of flickering effect when changing fonts.

One of the many solutions is to ensure the user gets Roboto in first place. Just add the next code into your head tag.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">

Rotate Markers in Google Maps

/in /by

Still as of today (post’s date) you cannot rotate markers in Google Maps, you only can resize them, however if you are using SVGs (what I always recommend) you can do any transformation you want 🙂

Google Maps clusterization

/in , , /by

We are going to fetch flights data to create our makers. Do not set the map in each marker, the clusterization will set it up instead.

Draggable marker in Google Maps without API Key

/in , /by

There is a really good documentation about how to use Google Maps API, many of the Google examples are with an API Key but you don’t need it. Use the API Key if you want to monitor your apps or if you want to buy additional usage quota (less than 2.5000 loads per day it’s free).

All Maps API applications should load the Maps API using an API key. Using an API key enables you to monitor your application’s Maps API usage, and ensures that Google can contact you about your application if necessary. If your application’s Maps API usage by exceeds the Usage Limits, you must load the Maps API using an API key in order to purchase additional quota.

So, for this basic example, we use Google Maps API without Key to add a draggable Marker in a map that is always centered on our marker position.