Giter VIP home page Giter VIP logo

embed-google-map's Introduction

Embed Google Map

Embed Google Map is a plugin for embedding one or more Google Maps to Joomla articles. Adding maps to an article is very simple, just add the address or the coordinates which location you want to show an a map inside google_maps tags to an article, and that's it! It's also possible to define the version of Google Maps (Google Maps, Google Maps Classic, Google Maps Embed API), the type of the map (normal, satellite, hybrid, terrain), the size of the map, the language of the Google Maps interface, zoom level, border layout and link to the full size map. Embedding maps created in Google Maps Engine is supported as well.

Features

  • It's possible to embed one or more Google Maps within an artice.
  • The address or the coordinates which location is shown on a map is given as a parameter.
  • Define Google Maps version to be used: Google Maps (no API key), Google Maps Classic (no API key), Google Maps Embed API (API key required)
  • Define the type of the map.
    • Google Maps, Google Maps Embed API: normal, satellite
    • Google Maps Classic: normal, satellite, hybrid, terrain
  • Define the size of the map.
  • Define the language of the Google Maps interface. List of language codes.
  • Define the zoom level.
  • Define custom labels. Supported by Google Maps Classic only.
  • Hide/show the info label. Supported by Google Maps Classic only.
  • Define the border width, border style and border color.
  • Add link to the full size map. Supported by Google Maps and Google Maps Classic only.
  • Define the link label. Supported by Google Maps and Google Maps Classic only.
  • Support for HTTP and HTTPS.
  • Embed maps created in Google Maps Engine.
  • Multilingual features for front-end:
    • Use the system language as Google Map language.
    • Use translatable strings as map label, e.g. {TRANSLATABLE_STRING}.
  • Improve performance by loading Google Maps after the rest of the page has loaded.
  • Disable mouse scrolling on embeded Google Map:
    • click the map to enable scroll
    • when mouse leaves the map, disable scroll.
  • English, French, Hungarian, Italian, Japanese and Finnish language support for back-end.

Syntax

  • {google_map}address{/google_map}
  • {google_map}address|version:classic{/google_map}
  • {google_map}address|zoom:10{/google_map}
  • {google_map}address|zoom:10|lang:it{/google_map}
  • {google_map}address|lang:system{/google_map}
  • {google_map}address|width:200|height:200|border:1|border_style:solid|border_color:#000000{/google_map}
  • {google_map}address|width:200|height:200|link:yes|link_label:Label{/google_map}
  • {google_map}address|link:yes{/google_map}
  • {google_map}address|type:satellite{/google_map}
  • {google_map}address|show_info:yes|info_label:Label{/google_map}
  • {google_map}address|link_full:yes{/google_map}
  • {google_map}address|https:yes{/google_map}
  • * {google_map}latitude,longitude{/google_map}

* latitude,longitude = coordinates in decimal degrees

Example 1

Replace the "address" string with the address which location you want to show on the map.

{google_map}Sunset Boulevard West Hollywood{/google_map}

Example 2

Replace the "latitude" and "longitude" strings with the coordinates which location you want to show on the map. The coordinates must be expressed as decimal degrees.

{google_map}60.1705,24.9384{/google_map}

Version

The plugin supports Google Maps, Google Maps Classic and Google Maps Embed API. The version to be used can be set by using the Version setting (supported values: new, classic, embed). The default version is defined in the Backend, but it can be overridden for individual maps.

{google_map}address|version:new{/google_map}
{google_map}address|version:classic{/google_map}
{google_map}address|version:embed{/google_map}

Google Maps and Google Maps Classic do not require an API key, but for Google Maps Embed API an API key is required instead. Not all the parameters are supported by all the versions. Please see the supported parameters below.

Google Maps

  • map type (normal, satellite)
  • zoom level
  • language - By default, visitors will see a map in their own language which is defined by the locale of their browser. The setting takes effect only when a map is opened through the additional link to Google Maps
  • add link
  • link label
  • height
  • width
  • border
  • border style
  • border color
  • HTTPS

Google Maps Classic

  • map type (normal, satellite, hybrid, terrain)
  • zoom level
  • language
  • add link
  • link label
  • link to full screen
  • show info
  • info label
  • height
  • width
  • border
  • border style
  • border color
  • HTTPS

Google Maps Embed API

  • map type (normal, satellite)
  • zoom level
  • language
  • height
  • width
  • border
  • border style
  • border color
  • HTTPS

Multilingual features

This plugin supports English, French, Italian, Japanese and Finnish languages for back-end.

In the front-end it's possible to use the system language as a Google Map language. In multilingual sites this means that it's enough to set the default language to 'system', and the language of the map is set according to the language that the user has chosen. For individual maps the default setting can be overridden by using the 'lang' parameter. Setting the system language for individual maps can be done by setting the 'lang' parameter to 'system'

{google_map}address|lang:system{/google_map}

It's also possible to use translatable strings as map label, e.g. {TRANSLATABLE_STRING}.

Border styles

The default border style can be set in the admin panel, but it can be overridden by using the border_style variable. The following values are supported.

  • none
  • hidden
  • dashed
  • dotted
  • solid
  • double

Border color

The default border color can be set in the admin panel, but it can be overridden by using the border_color variable. Border color must be given in hexadecimal format. The default value is "#000000".

Maps created in Google Maps Engine

It's possible to embed maps created in Google Maps Engine. Before embedding a map please make sure that the map is public and can be viewed by anyone. Please see how to share your map.

The map is shared by using its URL:

{google_map}http://mapsengine.google.com/map/embed?mid=zfQVCQIZMXcw.k_hSHl4b24jM{/google_map}

NB! Only border width, border style, border color, add link, link label, http/https and language parameters can be used with maps created in Google Maps Engine. All the other parameters are ignored.

Language codes

The default language can be set in the admin panel, but it can be overridden by using the lang variable. When using the lang variable, the code of the selected language must be given as a parameter. Below there's a list of languages supported by Google Maps.

Code Language
ar Arabic
eu Basque
bn Bengali
bg Bulgarian
ca Catalan
zh-CN Chinese (simplified)
zh-TW Chinese (traditional)
hr Croatian
cs Czech
da Danish
nl Dutch
en English
en-AU English (Australian)
en-GB English (Great Britain)
fa Farsi
fil Filipino
fi Finnish
fr French
gl Galician
de German
el Greek
gu Gujarati
iw Hebrew
hi Hindi
hu Hungarian
id Indonesian
it Italian
ja Japanese
kn Kannada
ko Korean
lv Latvian
lt Lithuanian
ml Malayalam
mr Marathi
no Norwegian
nn Norwegian Nynorsk
or Oriya
pl Polish
pt Portuguese
pt-BR Portuguese (Brazil)
pt-PT Portuguese (Portugal)
ro Romanian
rm Romansch
ru Russian
sk Slovak
sl Slovenian
sr Serbian
es Spanish
sv Swedish
tl Tagalog
ta Tamil
te Telugu
th Thai
tr Turkish
uk Ukrainian
vi Vietnamese

embed-google-map's People

Contributors

petkivim avatar

Watchers

James Cloos avatar karlitxo avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.