I am using Geocoder Gem to generate a location's geo-position[latitude, longitude]. I am displaying the searched location as a map in <%= image_tag "http://maps.google.com/maps/api/staticmap?size=850x300&sensor=false&zoom=16&markers=#{location.latitude}%2C#{location.longitude}" %>Can anyone help me use a dynamic map for the same??static map's good too but the dynamic map would be even better. Does anyone know how to use a dynamic map for this??
Use the Maps API.
This is a JavaScript API, and you write JavaScript code to use it. There are many examples and tutorials linked on that page, along with the reference docs.
Note that you won't be using Ruby or Rails at all to do this, except for serving up the JavaScript code (likely as a static asset) and generating any dynamic data the JavaScript code needs. Other that that, it's pure JavaScript.
You can use <iframe> tags.
<iframe width="300" height="300" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?
key=YOUR_API_KEY&q=ADDRESS_OR_COORDINATES"
allowfullscreen>
</iframe>
Related
In Google map-generator, I generated the code in which the Java script code is. Is it possible to give this google map code (with api v3 key) in amp-html? We know that you can not use any additional Java-script code in the amp-html.
<div class="google-map" id="map">
<amp-iframe width="300" height="450"
sandbox="allow-scripts allow-same-origin allow-popups"
layout="responsive"
frameborder="0"
src="https://www.google.com/maps/embed/v1/place?
key=ur_key=ur_lat, ur_lang">
</amp-iframe>
</div>
This is pretty simple just add ur proper map link in src. u can even also used ur dynamic value in lat and lang
I am trying to add google maps Embed API to my site. I keep getting this error:
"The Google Maps API server rejected your request. This IP, site or mobile application is not authorized to use this API key."
The API key is correct. I have Static Map turned on. Two of the most common trouble shots.
Code is formatted as follows:
<iframe
width="600"
height="450"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=XXXXXXXXXXXXXXXXXXXX&q=Space+Needle,Seattle+WA">
</iframe>
I put the < infront of iframe in my code. Any help would be great. Thanks!
Any one have any suggesions?
Static Maps and the Embed API are different things and controlled differently. Do what the message suggests (in its round about way) and turn on the Embed API in the Google API console.
Google Maps Embed API
Static Maps API
I found that the placeholder in Google's HTTP referrers inputs of <https (or) http>://*.example.com/* are misleading, because it suggests that the whole <https (or) http> thing is parsed as some actual "or" statement. In reality, it is not.
You must specify your protocol exactly, such as https://*.example.com. And, if you need support for both protocols, you must specify them as unique rows.
Hope that helps someone out there.
I've used a Bootstrap template ("Stylish Portfolio" - http://startbootstrap.com/stylish-portfolio ) to make a simple portfolio page for a friend of mine.
I should say, that I enjoy to do coding in my spare time, and I am as such not a professional in any way, so I apologize for my newbieness! :-)
Anyway, can't figure out how to change the location of the iframe google map which is embedded in the template's html.
As default it is set to locate Twitters HQ. But that's not really what I want.
I need it to just show Philadelphia on the map, but I simply cant get it to work!
To be more specific, this is the exact view the map need to provide:
https://www.google.com/maps/place/Philadelphia,+PA/#40.002498,-75.1180329,11z/data=!3m1!4b1!4m2!3m1!1s0x89c6b7d8d4b54beb:0x89f514d88c3e58c1
When I look at the html code for the map, I have this:
<!-- Map -->
<div id="contact" class="map">
<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&aq=0&oq=twitter&sll=28.659344,-81.187888&sspn=0.128789,0.264187&ie=UTF8&hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&t=m&z=15&iwloc=A&output=embed"></iframe>
<br />
<small>
</small>
</iframe>
</div>
<!-- /Map -->
That's all.
I really could use some assistance here since what I first thought was coordinates, aren't in fact that. But I have no idea how to change the location of the map! Or the small box with the current Twitter information.
Anybody who has any experience with this?
Change iframe with this one,
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d195601.04562769792!2d-75.11803295!3d40.002497999999996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1401521095201" width="100%" height="100%" frameborder="0" style="border:0"></iframe>
The solution to your problem is quite easy...
Follow these steps:
Go to https://developers.google.com/maps/documentation/embed/start
Search for business or place (where it says "Highlight a place or an address") then click "Looks Good!".
Enter your API key, if you dont have an API key follow the istractions bellow and create one (API key), if you have an API key skip steps 3.1, 3.1.1, 3.1.2., 3.1.3., 3.1.4.,
3.1 Creating the API key
3.1.1. Visit the APIs Console at https://code.google.com/apis/console and log in with your Google Account.
3.1.2.Click the Services link from the left-hand menu.
3.1.3.Activate the Google Maps Embed API service.
3.1.4.Click the API Access link from the left-hand menu. Your API key is available from the API Access page, in the Simple API Access section. Maps API applications use the Key for browser apps.
Your API key looks something like this: AIzaSyCwI3k7JC29_KzlX1S_bC8fARpocLX5bRY
After you ender your API key click "DONE"
Copy And Paste the code you'll get to your templates index.html and you're done.
Change the height and width to 100% (where is says
That's all!
Here is the code
<iframe width="100%" height="80%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.com/maps/place/Philadelphia,+PA/#40.002498,-75.1180329,11z/data=!3m1!4b1!4m2!3m1!1s0x89c6b7d8d4b54beb:0x89f514d88c3e58c1"></iframe>
I have changed the language for the google maps to Hebrew in the language setting but I would like to use the <iframe> code for my website. However, I can only seem to get this in English. How do I set it for Hebrew?
The URL has hl=he but I can't seem to get it to work for the <iframe> code.
My code is:
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d27130.99130966173!2d35.186535!3d31.787558!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1502d64c6e5bf91d%3A0x2f55a98e4e4ab5e9!2z15vXoNek15kg16DXqdeo15nXnSAxNQ!5e0!3m2!1siw!2s!4v1395222081666" width="600" height="450" frameborder="0" style="border:0"></iframe>
Thanks
You need to add language parameter of API call for embed map. For Hebrew language, src of <iframe> should be like:
src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d27130.99130966173!2d35.186535!3d31.787558!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1502d64c6e5bf91d%3A0x2f55a98e4e4ab5e9!2z15vXoNek15kg16DXqdeo15nXnSAxNQ!5e0!3m2!1siw!2s!4v1395222081666&language=iw"
More info at Google Maps Embed API
More info about Google Maps API language support:
https://developers.google.com/maps/faq#languagesupport
idk if this is really functional for other countrys but when im building a mock, and i found a google map iframe, and my client is by Example: US but im Mx the:
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3063.7150513838938!2d-84.19918628432937!3d39.83580597943695!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x884081e28cd77f07%3A0xf7f318d105021243!2sBuckeye+Harley-Davidson!5e0!3m2!**1ses!2smx**!4v1556548028269!5m2!**1ses!2smx**"
allowfullscreen></iframe>
i just update this info in the Url, 1sen!2sus, then the iframe is shown in english.
i hope this can helps to you to.
In 2016 it doesn't work anymore for embedded code directly taken from maps.
But &language=ru would work if you generate your code here: https://developers.google.com/maps/documentation/embed/start
You'll have to create api key.
Also you can use link like this -
src="https://maps.google.com.ua/maps?q=Майдан+Незалежності,+Київ&hl=uk&output=embed"
Майдан+Незалежності,+Київ - map locaton
uk - language
While using Google Map embeed iframe you can replace default language parametr on the src , you can look at at my example I point the placement of default language code : For example - az for Azerbaijan language
<iframe class="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3038.7779420053535!2d49.85933131574896!3d40.39161387936813!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40307d151fdf42df%3A0xb3dd9195f4676922!2z0JzQuNC90LjRgdGC0LXRgNGB0YLQstC-INC-0LHRgNCw0LfQvtCy0LDQvdC40Y8g0JDQt9C10YDQsdCw0LnQtNC20LDQvdGB0LrQvtC5INCg0LXRgdC_0YPQsdC70LjQutC4!5e0!3m2!1sru!2s!4v1574328901852!5m2!1s{you can find this point and replace with your locale language for example 'az' then iframe will translate into your locale language}!2s" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
I had the same problem.
I am a Dutchman living in Brazil.
I developed a website for a Brazilian firm.
The result the iframe rendered in the web-page was in Dutch.
Then my client tested the site and everything was in Portuguese.
The answer can be found in the native browser settings (Dutch for me), (Portuguese for my client).
Dirk Detmar
Teresina, Piaui
Brazilie
While using Google Map embed iframe changing the default language parameter works for me. See here which parameter to change:
In the image currently, the Nepalese language is used and if we change the language parament "ne" to "en", all the text in the map will appear in the English language.
Also, you can change the language parameter from the google maps page. In the bottom right corner, click the location icon which shows your location, and change it to the required country you want.
So to sum the answers to this question up, the language key depends on what API you are using:
https://www.google.com/maps/embed
key : hl
list of possible parameters (search page for keyword "hl")
https://www.google.com/maps?output=embed
key : language
list of possible parameters
To insert a map into my website, I have been using server-side code to create something like the following. I thought I had a good reason for originally doing it this way, but now do not recall the reason. Doing a quick search shows that most solutions use an IFRAME. Is the IFRAME solution the best approach, or are there reasons why my IMG solution is sometimes better? Thanks
<img alt="Map" src="http://maps.google.com/maps/api/staticmap?center=5th+%26+College+St%3Ch1%3EHello%3C%2Fh1%3E+SEATTLE+WA+98101&zoom=14&size=400x400&sensor=false">
Using IMG, which uses the Google Maps Static Maps API, creates a static image that your users can only see, for example as seen in this Fiddle:
That uses the following code:
<img alt="Map" src="http://maps.google.com/maps/api/staticmap?center=5th+%26+College+St%3Ch1%3EHello%3C%2Fh1%3E+SEATTLE+WA+98101&zoom=14&size=400x400&sensor=false">
However, when you create an IFrame, that allows the users to interact with the map, for example pan, zoom out, choose between "Map, Sat, Ter, and Earth modes", as seen in this Fiddle:
The code that produced that:
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&ie=UTF8&ll=53.800651,-4.064941&spn=11.629588,33.815918&t=m&z=6&output=embed"></iframe>
So too recap, IMG produces a STATIC image, while IFrame produces a dynamic interaction (Panning, zooming etc.)
NOTE: Google limits you if you go the IMG way to
25 000 free static map requests per application per day.
which should be enough for most but it is useful to know. If you need more, look into Google Maps API for Business.