Flexible Map

Beskrivelse

Flexible Map lar deg legge inn Google Maps på ditt WordPress-nettsted med enkle snarveikoder.

Features

  • three ways to load a map:
    • by center coordinates
    • by street address
    • by URL to a Google Earth KML file
  • simple shortcode for adding maps to pages/posts
  • PHP function flexmap_show_map() for theme and plugin developers
  • supports multiple maps on a page/post
  • supports responsive design — specify width / height in percent
  • map marker doesn’t have to be the center of the map
  • optional description for info window
  • optional directions link for info window
  • directions can be dropped into any div element with an ID
  • minimal dependencies — just WordPress and the Google Maps API

Get started with Flexible Map.
Read the manual online.

Sponsorships

  • directions on KML maps generously sponsored by Roger Los

Thanks for sponsoring new features on WP Flexible Maps!

Translations

Many thanks to the generous efforts of our translators:

The initial translations for all other languages were made using Google Translate, so it’s likely that some will be truly awful! If you’d like to help out by translating this plugin, please sign up for an account and dig in.

Privacy

Flexible Map embeds Google Maps into your web pages. Please review Google’s Privacy and Personal Information for information about how that affects your website’s Privacy Policy. By using this plugin, you are agreeing to the terms of use for Google Maps.

The Flexible Map plugin itself does not collect any personally identifying information, and does not set any cookies itself.

Skjermskudd

  • [flexiblemap center="-32.918657,151.797894" title="Nobby's Head" zoom="14" width="100%" height="400px" directions="true" maptype="satellite"]
  • [flexiblemap address="116 Beaumont Street Hamilton NSW Australia" title="Raj's Corner" description="SWMBO's favourite Indian diner" width="100%" height="400px" directions="true"]
  • [flexiblemap src="https://webaware.com.au/maps/example-toronto.kml" width="100%" height="400px" maptype="satellite"]
  • [flexiblemap center="-34.916721,138.828878" width="100%" height="400px" title="Adelaide Hills" directions="true" showdirections="true" directionsfrom="Adelaide" region="au"]
  • Setting screen with API key field

Installasjon

  1. Upload this plugin to your /wp-content/plugins/ directory.
  2. Activate the plugin through the ‘Plugins’ menu in WordPress.
  3. Get an API Key from Google and add it to Settings > Flexible Map
  4. Add the shortcode [flexiblemap] to your pages / posts to embed maps

There are two ways to load maps with this plugin:

  • specify the map’s coordinates or street address
  • specify the URL to a KML file (e.g. from Google Earth)

To add a Flexible Map to a post or a page, add a shortcode [flexiblemap] and give it some useful attributes. A map can either be specified using center coordinates or street address, or by loading a KML file.

Get started with Flexible Map.
Read the manual online.
Refer to the attribute reference for detailed information.

FAQ

Do I need an API key?

Yes. You will need at minimum an API key for Maps, so that the Maps JavaScript API will work. If you want to add maps by address (not just coordinates or KML file), you will also need to select Places. If you want to use directions features of this plugin, you will also need to select Routes.

Get your API keys from the Google Maps Platform
Read more about API keys for Google Maps

Hvor finner jeg innstillingene?

You can set your API keys in the WordPress admin:

Settings > Flexible Map

For everything else, just add some attributes to your shortcode telling the map what to do.

Of course, in WordPress there is a plugin for everything 🙂 so if you want more settings, please install the Flexible Map Options plugin. That plugin lets you set some defaults so that if you use the same attributes over and over, you can put them all in one place.

Kan jeg legge inn flere markører på et kart?

Using a KML file, you can have as many markers on a map as you like, with as much detail in the info windows. With KML you can also change marker icons and add other nice features. You can generate your KML file from an application like Google Earth, or you can create it yourself (in a text editor or with your own programming). Learn more about KML.

Hvorfor vil ikke mitt KML-kart oppdatere seg når jeg redigerer KML-filen?

Google Maps API caches the KML file, so it can take a while for your new changes to appear. To force a change, append a URL query parameter with a number (known as a cache buster) and increment the number each time you change the KML file. A nice simple and commonly used parameter name is v (for version), like this: http://example.com/my-map.kml?v=2

If your map is auto-generated or changes frequently, add the kmlcache attribute to ask Google to fetch a new copy periodically. You can specify the interval in minutes (e.g. «90 minutes»), hours (e.g. «2 hours»), or days (e.g. «1 day»). The minimum interval is 5 minutes.

[flexiblemap src="https://webaware.com.au/maps/example-toronto.kml?v=2"]
[flexiblemap src="https://webaware.com.au/maps/example-toronto.kml" kmlcache="8 hours"]

Hvilke deler av KML støttes?

The Google Maps API supports many commonly used KML elements, but has some restrictions. Read about Google Maps support for KML in the developers’ guide, and also see the list of supported KML elements on that page.

Hvorfor vil ikke kartet vise mitt valgte sted når jeg bruker adresse-attributten?

When you use a street address instead of center coordinates, you are effectively searching Google Maps for your location. Try being very specific about your address, including your town / city, state / province, and country to make sure Google can find where you mean. You can also specify your region with the region attribute to help Google Maps refine its search. If the marker is still in the wrong place, you might need to specify the location using center coordinates instead.

How can I use center coordinates for the map and have directions to my address?

When you use just center coordinates for your map, the directions may send people to the location opposite your location! Yes, I know… anyway, if you specify both the center coordinates and the street address, the map will be centered correctly and the directions will be to your address.

Hvordan får jeg kartene til å bruke mitt språk?

The plugin uses localized messages for things like the Directions link and the default message on links in info windows. If you have your WordPress installation set to use your language, the plugin should automatically pick it up. If you need to force it to pick up your language (or want to offer a different language), use the locale attribute, e.g. locale="ru" or locale="zh-TW".

Google Maps will use the locale information from your web browser to help display maps and directions in your language (see your browser’s language settings). If you want to force the Google Maps language for every map on a page, you can use a filter hook. For example, here’s how to force the Google Maps language to match the language of the page / post its on (e.g. when using WPML translated content):

add_filter('flexmap_google_maps_api_args', 'force_flexmap_map_language');

function force_flexmap_map_language($args) {
    $args['language'] = get_locale();
    return $args;
}

Dere har oversatt mitt språk feil / det mangler

The initial translations were made using Google Translate, so it’s likely that some will be truly awful! If you’d like to help out by translating this plugin, please sign up for an account and dig in.

Kartet er ødelagt i faner / trekkspillvisninger

When you hide the map in a tab, and then click on the tab to reveal its contents, sometimes the map doesn’t know how big to draw until it is revealed. Since v1.9.0 most such problems are automatically resolved for modern browsers, including Internet Explorer 11 or later. If you need to support earlier versions that don’t support MutationObserver, add some script to your website to handle this yourself.

For faner og trekkspillvisninger med jQuery UI, last ned .php-filen fra dette gist-området, og installér / aktiver den. Hvis du foretrekker å legge til jQuery-koden self, legg den til på et eller annet sted på denne siden (f.eks. i bunnteksten av ditt tema):

<script>
(function($) {

    function mapRedraw(event, ui) {
        if (ui.newPanel.length) {
            $("#" + ui.newPanel[0].id + " div.flxmap-container").each(function() {
                var flxmap = window[this.getAttribute("data-flxmap")];
                flxmap.redrawOnce();
            });
        }
    }

    $("body").on("accordionactivate", mapRedraw).on("tabsactivate", mapRedraw);

})(jQuery);
</script>

Hvordan får jeg tilgang til kartobjektet?

Hvis du ønsker å legge til din egen scripting for kartet, kan du hente ut kartobjektet ved å identifisere globalvariabelen FlexibleMap for ditt kart, og kalle denne med getMap(). Som standard blir hver FlexibleMap-instans gitt en tilfeldig valgt ID, og det globale variabelnavnet baserer seg på dette. Kartets inneholdende div har en dataegenskap som inneholder dette globale variabelnavnet. Her er eksempelkode for jQuery som henter ut kartobjektet for (det første) kartet:

jQuery(window).load(function() {
    var flxmapName = jQuery("div.flxmap-container").attr("data-flxmap");
    var flxmap = window[flxmapName];
    var map = flxmap.getMap();
    // ... use map ...
});

Alternativt kan du spesifisere ID-en som brukes for et gitt kart, og det vil dermed basere det globale variabelnavnet på dette. Her er et eksempel på en slik snarveikode:

[flexiblemap center="-32.891058,151.538042" id="sugarloaf"]

Og her er noe eksempelkode for jQuery:

jQuery(window).load(function() {
    var map = flxmap_sugarloaf.getMap();
    // ... use map ...
});

Hvorfor vil ikke kartet laste på mitt enkeltside-nettsted med AJAX?

The plugin only loads the required JavaScript scripts when it knows that they are needed. When your website uses AJAX to load a page, the normal WordPress footer action for that page doesn’t happen, and the scripts aren’t loaded. You can make the scripts load on every page by adding this snippet to the functions.php file in your theme:

function my_preload_map_scripts() {
    if (function_exists('flexmap_load_scripts')) {
        flexmap_load_scripts();
    }
}
add_action('wp_enqueue_scripts', 'my_preload_map_scripts', 20);

To make it load locale scripts as well, e.g. for French and Chinese language text, add them to the function call like this:

flexmap_load_scripts(array('fr', 'zh'));

The plugin will detect when AJAX is being used via the WordPress standard method, and adjust accordingly (but you still need to load the scripts as above). If another method is used, add isajax='true' to the shortcode attributes.

NB: currently, only AJAX methods that parse script tags will work correctly; this includes some jQuery methods (but not all). A future version of the plugin will be more AJAX friendly.

I have CloudFlare Rocketscript turned on and the map doesn’t work

Either turn off CloudFlare Rocketscript 🙂 or install the Flxmap No Rocketscript plugin by loading that file into your website’s wp-content/plugins folder and activating through the plugins admin page. Use the plugin if you still want Rocketscript to manage all of your other scripts but leave the Flexible Map scripts alone.

Vurderinger

7. juni, 2021
Can't get much easier to display a .kml file on a webpage. For a time Google had a hard time loading a local .kml file so I stored mine on a public Google.sites page, but that seems to have been resolved. Just paste the shortcode pointing to a local .kml file and it will automatically center the contents on a map that will have Terrain, default or satellite maps. Zoom and scroll work correctly. My page is all about the map so this makes maintaining my webpage simple.
17. mai, 2019
Just works, but you'll need a Google maps API key.
5. september, 2018
I use this on ALL of my websites - at least five as of now. This is by far the easiest and most complete maps plugin out there. No need to create a "post" for every map. Just enter your address and parameters right in the shortcode on the page. Totally awesome, simple, lightweight, and lots of ways to configure your map.
Les alle 66 vurderinger

Bidragsytere og utviklere

“Flexible Map” er programvare med åpen kildekode. Følgende personer har bidratt til denne utvidelsen.

Bidragsytere

“Flexible Map” har blitt oversatt til 13 språk. Takk til oversetterne for deres bidrag.

Oversett “Flexible Map” til ditt språk.

Interessert i utvikling?

Bla gjennom koden, sjekk ut SVN-repositoriet, eller abonner på utviklingsloggen med RSS.

Endringslogg

The full changelog can be found on GitHub. Recent entries:

1.17.1

Released 2019-05-04

  • fixed: KML map with center but no zoom breaks the map
  • fixed: recognize center coordinates with whitespace before and after the separating comma