Today’s post is rather unusual because… it slightly touches JavaScript! The language I used to hate with the whole of my heart and now I’m starting to tolerate it (or maybe even… like it? Yeah, that’s strange). So let me tell you about my recent discoveries concerning Google Maps API (v3)!

• Chrome doesn’t allow you to get user location on pages without https!

Yep, that’s sad (hmm or not ;)), https is becoming a must! Of course, it doesn’t apply to localhost, but when you deploy your code to the production, keep it in mind. Chrome will warn you with the appropriate messages in its console but it’s better to be aware than surprised ?.

 

• Why the heck the center point of my map is in the left top corner?

This problem is the most noticeable when you want to put a marker in the center of your map and it doesn’t show until you try to move the map and realize your marker is in the left, top corner of the map. Seems familiar?
If so, you probably put the map inside a hidden div (or other html tag).
To solve this problem – make sure you initialize the map AFTER all of its parent divs became visible.

 

• My Google Map is grey, with only Google logo visible!

I encountered it a lot lately! There is a lot of reasons (and solutions) for that problem, for example:

–    zoom is not set (let’s set it in the options passed to the Google Maps API when creating the map!)
–    center of the map is not set (the same situation – let’s set it!)
–    a parent div has the following css style:

‘display: none’.

To solve the problem, remove the above style from the parent div and resize the map, ex. like this:

google.maps.event.trigger(myMap.map, 'resize')

Right now I can’t remember any more reasons of gray map background but I’m sure I encountered a few more…

 

• Pay attention to Google Maps API version!

Google tutorials describe the experimental version of Google Maps Api. But you probably link the release version so if something from the tutorial doesn’t work, it doesn’t have to be your fault ?.
Of course if you need the experimental version in your app, you can simply include Google Maps scripts in the following way:

<script async defer src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=YOUR_API_KEY&callback=initMap">

 

• Google release a new version of its API each week.

Wow, that’s impressive!

 

• You can easily hide the controls from the Google Map

To achieve this, you need to set only one attribute:

disableDefaultUI: true

Like in the following example:

var map = new google.maps.Map(document.getElementById('MyMapId'), {
          zoom: 4,
          center: {lat: 52, lng: 21},
          disableDefaultUI: true
        });

More info here.

 

• You can add a custom controls to the Google Maps.

Don’t you think it would be nice to have a custom legend on the top of your map? That’s not a problem, just add a div and set its position with css styles. More information here

 

Featured image by Annie Spratt