Panoramio Help

Help topics

Embedding a Panoramio map into your web page

Add a bit of Panoramio to your website or blog! It's a nice way to show off your vacation photos, photos of the place you're visiting, and so on. With just a snippet of code, your page can display a small map of the world or a portion of the world with up to twenty photos. Here's an example.

Embedded Panoramio map

To embed a Panoramio map in your web page or blog, you'll need to enter a bit of HTML code, as the next sections explain. The embedded map isn't quite the same as the regular Panoramio map. You specify the area you want to show and the embedded Panoramio shows just the photos in the specified map area. If you change the location on the map, no photos appear.

On your own website or blog, a Panoramio icon will appear in the lower right corner.

Format for your code

Following is the format of the code that inserts the embedded Panoramio map. You can enter this into your website's HTML code or into your blog, replacing each value in colored italics with your own values.

If you use Blogger, write the code above in the Edit HTML tab.

The code is shown in multiple lines to make it easy to read, but your own line of code do not need to have any line breaks.

<iframe src="http://www.panoramio.com/plugin/?
    lt="latitude"&amp;ln=longitude&amp";z="zoom"&amp;k="map-type"" width="widthpx" height="heightpx">
      </iframe>

In this format:

latitude is the latitude of the center of the map, in decimal format.
longitude is the longitude to show at the center of the map, in decimal format.
zoom is the zoom level of the map. The available range depends on the location where you've centered the map. Lower numbers indicate a closer look, such as -2 or -3, which is the closest view of a city. Level 7 indicates the approximate size of a country, and level 15 indicates the entire world.
map-type is one of the following numbers:
- 0 (zero) creates a plain map
- 1 creates a satellite map
- 2 creates a hybrid map with both a satellite view and a plain view
width and height specify the size of the frame in pixels. Try experimenting with this parameter to determine how wide you want the map. You can create a map of any square or rectangular size, but the map might behave differently at different sizes.

Here's some example code to use for experimenting. Copy it and put it into an HTML page to show the world in an embedded Panoramio frame.

<iframe src="http://www.panoramio.com/plugin/?lt=28&amp;ln=-33&amp;z=17&amp;k=2" width="250px" height="250px"></iframe>

In this example:

The latitude is 28.
The longitude is -33.
The zoom level is 17.
The map type is 2 (hybrid).
The map is 250 pixels high and 250 pixels wide.

Tips on writing the code

To find information to help you write your code:

In Panoramio, display the world map.
Search for a place, and adjust the zoom level the way you like it.
In the browser address bar, note the URL. You'll see values for the latitude (lt value) , longitude (ln value) , zoom level (z value) and map type (k value). For example, a map of Central Park, New York might have the following URL:
```
http://www.panoramio.com/map/#lt=40.782719&ln=-73.964767&z=3&k=1&a=1&tab=1
```
In this example, the latitude is 40.782719, the longitude is -73.964767, the zoom level is 3, and the map type (kind of map) is 1. The last two attributes are not available for use with the embedded Panoramio map.

Put the code on your website. Here's the code that you'd use for the previous example, with line breaks added for readability in this document:

<iframe src="http://www.panoramio.com/plugin/?
        lt="40.782719"&amp;ln="-73.964767"&amp;z="3"&amp;k="1"&amp;
        width="500px" height="500px">
      </iframe>