hpneo / gmaps

the easiest way to use Google Maps
https://hpneo.dev/gmaps/
7.03k stars 1.29k forks source link

Where to put reference to Google API Key? #537

Open Byter-Bit opened 7 years ago

Byter-Bit commented 7 years ago

Where to put a reference to Google's API Key?

Also: tests show me Google behaves differently if the call is from a named server or an IP address. From an IP address, no problems; from a named server I get “Oops! Something went wrong.” Let’s assume they are more strict on what they see as commercial operations.

Back to “Where do I put the key?”
I had an nicely working app written two years ago. I found time today to buy a domain and set it up, discovering this issue. I got myself a key and tried putting it in at line 1694 of a two year old gmaps.js as in

GMaps.staticMapURL = function(options){ var parameters = [], data, // static_root = (location.protocol === 'file:' ? 'http:' : location.protocol ) + '//maps.googleapis.com/maps/api/staticmap'; static_root = (location.protocol === 'file:' ? 'http:' : location.protocol ) +'https://maps.googleapis.com/maps/api/js?key=AsXxxxxxxxxxxxxxxxxxxxxxxxxxxxC8c&callback=initMap';

Needless to say it did not work. I’m not god’s gift to JS programmers and could use some help as to where to use it in the old or new code. Many thanks -

Fleeck commented 7 years ago

@Byter-Bit

image

More info here: https://developers.google.com/maps/documentation/javascript/tutorial

giovannipds commented 7 years ago

@Fleeck, @Byter-Bit has made a good note, he's not mentioning a script request, but a static img url request. When requesting an img, according to the documentation here and also to the common error messages here, the API key must be included, and GMaps's gmaps.static.js is not inserting it, generating errors after some user requests. I'm experiencing that myself right now.

More info to read about it here if needed.

I'll try to just add an '&key=' + my_gmaps_key to the static map url to see if it solves, like this (example):

var static_map_url = GMaps.staticMapURL({
    lat:     your_lat,
    lng:     yout_lng,
    markers: [{
        lat: your_lat,
        lng: your_lng
    }],
    zoom:    zoom,
    size:    [507, 396]
});
static_map_url += '&key=' + google_maps_key;
$('<img/>').addClass('img-responsive')
           .attr('src', static_map_url)
           .appendTo('body');

Hope to have helped someone somehow.

Another note, it's important to enable request to the static gmaps api here, otherwise it won't work.

Keep this issue opened 'till someone improves that file.

ifin2000 commented 6 years ago

REPLACE

WITH