Maps API 2
(version 2.3.8 Beta)
Author: Lincoln Cooper
Intro:
There has been a major rewrite of the API which is now called "PG Maps API 2". If you want to see the documentation relating to the previous version then click here.

To see how to migrate to "PG Maps API 2" then see the Migrate to PG Maps API 2 link.

Otherwise follow this documentation to add a dynamic Map to your web-site. You can create a simple map or build more complex functionality on top of it.



What's New:
Show...


Simple Map:
To display a simple map all you need to do is to create an HTML page which includes the PGMaps.js file and contains a simple div container. Then in Javascript, create a PGMappy object passing in the div:

Show Code...

<html>
<head>
<title>PG Maps API - Example Simple</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
 type="text/javascript"></script>

<script type="text/javascript">
function body_onload() {
  var map1 = new PGMappy({nameContainer: 'mapcontainer'});
}
</script>
</head>

<body onload="body_onload()">

  <div id="mapcontainer"></div>

</body>
</html>
As no specific parameters are passed to the PGMappy object, the default values are used so the map is set to a standard size and centered on Rome.



Simple Map New:
Create a map with lighter map images.

Show Code...

<html>
<head>
<title>PG Maps API - Example Simple New</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
 type="text/javascript"></script>

<script type="text/javascript">
function body_onload() {
  var map1 = new PGMappy({nameContainer: 'mapcontainer',
                          imgType: PGMAP_IMG_TYPE_LIGHT});
}
</script>
</head>

<body onload="body_onload()">

  <div id="mapcontainer"></div>

</body>
</html>



Radar:
A radar layer can be added to the map - the following parameters are available:
  • width - width in pixels
  • height - height in pixels
  • top - position in pixels relative to the top of the main map (has priority over bottom)
  • bottom - position in pixels relative to the bottom of the main map
  • left - position in pixels relative to the left of the main map (has priority over right)
  • right - position in pixels relative to the right of the main map

Show Code...

<html>
<head>
<title>PG Maps API - Radar</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc" 
type="text/javascript"></script>

<script type="text/javascript">
var map1;
function body_onload() {
  map1 = new PGMappy({nameContainer: 'mapcontainer', z:4});
  map1.addRadar({right:30, top:30, width:150, height:100});
}
</script>
</head>

<body onload="body_onload()">

  <div id="mapcontainer"></div>

</body>
</html>



Centering:
The map can be centered on a specific point by passing in the longitude and latitude coordinates when creating the PGMappy object. The "setCenter" method can be called at a later date with the coordinates of a point to center the map there.


Show Code...

<html>
<head>
<title>PG Maps API - Example Centering</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
 type="text/javascript"></script>

<script type="text/javascript">
var map1;
function body_onload() {
  map1 = new PGMappy({nameContainer: 'mapcontainer',
                          lon:9.08005,
                          lat:45.80798});
}
</script>
</head>

<body onload="body_onload()">

  <a href="javascript:map1.setCenter(9.19378,45.46347)">Milano</a>
  <div id="mapcontainer"></div>

</body>
</html>



Drag & Zoom modes:
You can switch between the two main modes of the map "Drag" and "Zoom" by calling the "setActionType" method with the value "PGMAP_ACTION_DRAG" for drag mode (default) or "PGMAP_ACTION_ZOOM" for zoom mode. In Drag mode the map can be dragged in any direction using the mouse; in Zoom mode the mouse can be used to draw a zoom box to zoom to a specific area:

Show Code...

<html>
<head>
<title>PG Maps API - Example Drag & Zoom modes</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
 type="text/javascript"></script>

<script type="text/javascript">
var map1;
function body_onload() {
  map1 = new PGMappy({nameContainer: 'mapcontainer',
                          lon:9.08005,
                          lat:45.80798});
}
</script>
</head>

<body onload="body_onload()">

  <a href="javascript:map1.setActionType(PGMAP_ACTION_DRAG);">drag</a> | 
  <a href="javascript:map1.setActionType(PGMAP_ACTION_ZOOM);">zoom</a>
  <div id="mapcontainer"></div>

</body>
</html>
Hint: To cancel zooming while the left-mouse button is down and the zoom box displayed, press the ESC key.



Zoom:
You can Zoom to a specific level using the "setZoom" method (values 0-11) or zoom In or Out using the "zoomIn" and "zoomOut" methods:

Show Code...

<html>
<head>
<title>PG Maps API - Example Zoom</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
 type="text/javascript"></script>

<script type="text/javascript">
var map1;
function body_onload() {
  map1 = new PGMappy({nameContainer: 'mapcontainer',
                          lon:9.08005,
                          lat:45.80798});
}
</script>
</head>

<body onload="body_onload()">

  <a href="javascript:map1.setZoom(0);">Level 0</a> | 
  <a href="javascript:map1.setZoom(4);">Level 4</a> | 
  <a href="javascript:map1.setZoom(11);">Level 11</a> | 
  <a href="javascript:map1.zoomIn();">Zoom In</a> | 
  <a href="javascript:map1.zoomOut();">Zoom Out</a>
  <div id="mapcontainer"></div>

</body>
</html>



Size:
The initial size of the map can be set by using the "mapWidth" and "mapHeight" parameters when creating the PGMappy object. You can change the size of the map using the "setSize" method, specifying the width and height values (in pixels):

Show Code...

<html>
<head>
<title>PG Maps API - Example Size</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
 type="text/javascript"></script>

<script type="text/javascript">
var map1;
function body_onload() {
  map1 = new PGMappy({nameContainer: 'mapcontainer',
                          lon:9.08005,
                          lat:45.80798,
                          mapWidth:500,
                          mapHeight:300});
}
</script>
</head>

<body onload="body_onload()">

  <a href="javascript:map1.setSize(800,600);">Size to 800x600</a> | 
  <a href="javascript:map1.setSize(500,300);">Size to 500x300</a>
  <div id="mapcontainer"></div>

</body>
</html>



Map Type:
You can choose from 3 map types - MAP, PHOTO or MIXED.

Show Code...

<html>
<head>
<title>PG Maps API - Example Map Type</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc" 
type="text/javascript"></script>

<script type="text/javascript">
var map1;
function body_onload() {
  var pgPoint = new PGPoint({lon:9.19173, lat:45.464102});
  map1 = new PGMappy({nameContainer:'mapcontainer', z:0, pgPoint:pgPoint, 
  mapType:PGMAP_TYPE_ORTO});
  map1.pointAdder(pgPoint);
}
</script>
</head>

<body onload="body_onload()">
  <a href="javascript:map1.setZoom(-3);">Level -3</a> | 
  <a href="javascript:map1.setZoom(0);">Level 0</a> | 
  <a href="javascript:map1.setZoom(4);">Level 4</a> | 
  <a href="javascript:map1.setZoom(11);">Level 11</a> | 
  <a href="javascript:map1.zoomIn();">Zoom In</a> | 
  <a href="javascript:map1.zoomOut();">Zoom Out</a>

  <br />

  <a href="javascript:map1.setMapType(PGMAP_TYPE_MAP);">Map</a> | 
  <a href="javascript:map1.setMapType(PGMAP_TYPE_ORTO);">Orto photo</a> | 
  <a href="javascript:map1.setMapType(PGMAP_TYPE_MIXED);">Mixed</a>
  <div id="mapcontainer"></div>

</body>
</html>



Pan:
You can Pan the map using the "panMapBy" method which moves the map by the specified number of pixels in the "x" and/or "y" directions:

Show Code...

<html>
<head>
<title>PG Maps API - Example Pan</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
 type="text/javascript"></script>

<script type="text/javascript">
var map1;
function body_onload() {
  map1 = new PGMappy({nameContainer: 'mapcontainer'});
}
</script>
</head>

<body onload="body_onload()">

  <a href="javascript:map1.panMapBy(0,-200);">North</a> | 
  <a href="javascript:map1.panMapBy(200,0);">East</a> | 
  <a href="javascript:map1.panMapBy(0,200);">South</a> | 
  <a href="javascript:map1.panMapBy(-200,0);">West</a>
  <div id="mapcontainer"></div>

</body>
</html>



Compass:
The Compass is a "layer" type object which can be created and then added to the map using the addLayer method. The removeLayer can then be used to remove the Compass from the map:

Show Code...

<html>
<head>
<title>PG Maps API - Example Compass</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc" 
type="text/javascript"></script>

<script type="text/javascript">
var map1, comp;
function body_onload() {
  map1 = new PGMappy({nameContainer: 'mapcontainer'});
}
</script>
</head>

<body onload="body_onload()">

  <a href="javascript:comp = new SEAT.Compass();map1.addLayer(comp);">Add Compass</a><br/>
  <a href="javascript:map1.removeLayer(comp);">Remove Compass</a><br/>
  <div id="mapcontainer"></div>

</body>
</html>



Simple Point:
You can display a simple point on the map by first creating a PGPoint object using the longitude and latitude coordinates and then passing the point to the PGMappy object using the "pointAdder" method. An optional "txt" value can be specified in the PGPoint object and the value is displayed in the point:

Show Code...

<html>
<head>
<title>PG Maps API - Example Simple Point</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
 type="text/javascript"></script>

<script type="text/javascript">
var map1;
function body_onload() {
  map1 = new PGMappy({nameContainer: 'mapcontainer'});
  var point1 = new PGPoint({lon:12.49553, lat:41.89504});
  var point2 = new PGPoint({lon:12.48953, lat:41.89904, txt:'A'});
  map1.pointAdder(point1);
  map1.pointAdder(point2);
}
</script>
</head>

<body onload="body_onload()">

  <div id="mapcontainer"></div>

</body>
</html>



Custom Point:
A custom point can be created by passing in the Point HTML in the "html" attribute:

Show Code...

<html>
<head>
<title>PG Maps API - Example Custom Point</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
 type="text/javascript"></script>

<script type="text/javascript">
var map1;
function body_onload() {
  map1 = new PGMappy({nameContainer: 'mapcontainer'});
  var point1 = new PGPoint({ lon:12.49653,
    lat:41.89304,
    html:'<div style="width:55px; height:40px; background:#FBE600; 
    border:2px solid #000">Custom Point</div>'});
  map1.pointAdder(point1);
}
</script>
</head>

<body onload="body_onload()">

  <div id="mapcontainer"></div>

</body>
</html>



Point Position:
If you want to change the position of your point from the default, you can do so by specifying the number of pixels you want to move it by in the "offsetX" and "offsetY" attributes of the PGPoint object:

Show Code...

<html>
<head>
<title>PG Maps API - Example Point Position</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
 type="text/javascript"></script>

<script type="text/javascript">
function body_onload() {
  var map1 = new PGMappy({nameContainer: 'mapcontainer'});
  var point1 = new PGPoint({lon:12.49553, lat:41.89504});
  var point2 = new PGPoint({lon:12.49553, lat:41.89504, txt:'Off', offsetX:50, offsetY:30});
  map1.pointAdder(point1);
  map1.pointAdder(point2);
}
</script>
</head>

<body onload="body_onload()">

  <div id="mapcontainer"></div>

</body>
</html>



Point Opener:
By using the "opener" attribute of the PGMappy object, the point becomes clickable and when clicked a popup opens with custom information displayed. There are two attributes that can be used, the first "name" is used to display the first line of highlighted information while the attribute "info" is an array of strings to display subsequent information:

Show Code...

<html>
<head>
<title>PG Maps API - Example Point Opener</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
 type="text/javascript"></script>

<script type="text/javascript">
var map1;
function body_onload() {
  map1 = new PGMappy({nameContainer: 'mapcontainer'});
  var point1 = new PGPoint({ lon:12.49053,
                    lat:41.89004,
                    txt:'Q',
                    title:'Q SpA',
                    opened:{name: 'ACME Services Ltd',
                            info: ['Via Grande 34, 21000, Milano(MI)', 
                            'tel: 02-33445566', 'fax: 02-3124567', 
                            'email: acme@server.com']
                           }
                  });
  map1.pointAdder(point1);
}
</script>
</head>

<body onload="body_onload()">

  <div id="mapcontainer"></div>

</body>
</html>



Custom Opener:
You can design your own 'opener' too by placing your custom HTML in the "html" attribute of the "opened" attribute. By passing the 'closeID' parameter, you can specify which element is used to close the opener, otherwise clicking on any part of it will close it:

Show Code...

<html>
<head>
<title>PG Maps API - Example Custom Opener</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc" 
type="text/javascript"></script>

<script type="text/javascript">
var map1;
function body_onload() {
  map1 = new PGMappy({nameContainer: 'mapcontainer'});
  var point1 = new PGPoint({ lon:12.49053,
                    lat:41.89004,
                    txt:'Q',
                    title:'Q SpA',
                    opened:{html:'<div style="width:200px; height:100px; 
                    background:orange; border:2px solid #000;">Custom Opener
                    <div id="close" style="position:absolute;top:2px;right:2px;">X</div>
                    </div>',
                    closeID:'close'
                           }
                  });
  map1.pointAdder(point1);
}
</script>
</head>

<body onload="body_onload()">

  <div id="mapcontainer"></div>

</body>
</html>



Opener Position:
If you want to change the position of your opened html from the default, you can do so by specifying the number of pixels you want to move it by in the "offsetX" and "offsetY" attributes of the PGPoint opened object:

Show Code...

<html>
<head>
<title>PG Maps API - Example Opener Position</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc" 
type="text/javascript"></script>

<script type="text/javascript">
var map1;
function body_onload() {
  map1 = new PGMappy({nameContainer: 'mapcontainer'});
  var point1 = new PGPoint({ lon:12.49053,
                    lat:41.89304,
                    txt:'Q',
                    title:'Q SpA',
                    opened:{html:'<div style="width:200px; height:100px; 
                    background:orange; border:2px solid #000;">Custom Opener</div>',
                            offsetX:-100,
                            offsetY:-100
                           }
                  });
  map1.pointAdder(point1);
}
</script>
</head>

<body onload="body_onload()">

  <div id="mapcontainer"></div>

</body>
</html>



Opener Dynamic:
The HTML used to create an opened point can be specified by the user dynamically at the moment the point is clicked. This is done by specifying a callback function in the onOpen parameter and optionally an object of parameters in the onOpenParams parameter. When the point on the map is clicked, the callback function is called and if a value has been assigned to the onOpenParams parameter then this value gets passed in as the only parameter. You can now generate the HTML to be used for the opened point and when ready, just call the openBig method of the point object passing this value in. When the opened point is closed, the user generated HTML is physically removed from the DOM so has to be regenerated everytime the point is opened. The advantage of this method is twofold - there is less HTML in the page at any one time and also the HTML is dynamic, so can change everytime the point is opened.

Show Code...

<html>
<head>
<title>PG Maps API - Example Opener Dynamic</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc" 
type="text/javascript"></script>

<script type="text/javascript">
var map1, point1;
function body_onload() {
  map1 = new PGMappy({nameContainer: 'mapcontainer'});
  point1 = new PGPoint({ lon:12.49053,
                    lat:41.89304,
                    txt:'Q',
                    opened:{onOpen:myOpened,
                            onOpenParams:{url: 'http://www.aaa.it', city:'milano'}
                           }
                  });
  map1.pointAdder(point1);
}
function myOpened(params) {
  var html = '<div style="width:150px; height:150px; background:yellow; 
  border:2px solid #000;">' + params.city + '</div>';
  point1.openBig(html);
}
</script>
</head>

<body onload="body_onload()">

  <div id="mapcontainer"></div>

</body>
</html>



Geo Code Point:
Instead of specifying the longitude and latitude coordinates of a point to display, you can specify the address instead and the coordinates will be automatically calculated. First, a PGGeoCod object needs to be created where the address is specified using the relevant attributes. One of the attributes is called "onComplete" and specifies the function to call with the result of the Geocoding. The first parameter of this function call contains a PGAddress object and this then gets used to create a PGPoint object using the "pgAddress" attribute. This PGPoint object can now be used as before to display the point on the map.
Show Code...

<html>
<head>
<title>PG Maps API - Geo Code Point</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
 type="text/javascript"></script>

<script type="text/javascript">
var map1;
function body_onload() {
  map1 = new PGMappy({nameContainer: 'mapcontainer'});
  var g = new PGGeoCod({provincia:    null,
                        comune:       'roma',
                        indirizzo:    'via leonina',
                        civico:       null,
                        onComplete:   'afterGeoCod'});
}
function afterGeoCod(pgAddress) {
  if (pgAddress) {
    var pgPoint = new PGPoint({ pgAddress:pgAddress,
                                    txt: 'Geo'});
    map1.pointAdder(pgPoint);
  }
}
</script>
</head>

<body onload="body_onload()">

  <div id="mapcontainer"></div>

</body>
</html>



Point Centering Map:
You can visualise the map starting from a specific point by first creating the point (either by specifying the coordinates or using the PGGeoCode object to Geo Code an address) and then passing this as a parameter when creating the map:

Show Code...

<html>
<head>
<title>PG Maps API - Example Point Centering Map</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
 type="text/javascript"></script>

<script type="text/javascript">
var map1;
function body_onload() {
  var g = new PGGeoCod({provincia:    null,
                        comune:       'milano',
                        indirizzo:    'via grosio',
                        civico:       '8',
                        onComplete:   'afterGeoCod'});
}
function afterGeoCod(pgAddress) {
  if (pgAddress) {
    var pgPoint = new PGPoint({ pgAddress:pgAddress,
                                txt: 'Work'});
    map1 = new PGMappy({nameContainer: 'mapcontainer', z:1, pgPoint:pgPoint});
    map1.pointAdder(pgPoint);
  }
}
</script>
</head>

<body onload="body_onload()">

  <div id="mapcontainer"></div>

</body>
</html>



Point Centering:
You can also center the map using a PGPoint object after the map has been created. The method to do this is "setCenterPoint" and accepts one parameter - a PGPoint object. In the example below a PGPoint object is created using the Geocoding object and the map centered to this point:

Show Code...

<html>
<head>
<title>PG Maps API - Example Point Centering</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
 type="text/javascript"></script>

<script type="text/javascript">
var map1;
function body_onload() {
  map1 = new PGMappy({nameContainer: 'mapcontainer', z:1});
}
function centerPoint() {
  var g = new PGGeoCod({provincia:    null,
                        comune:       'milano',
                        indirizzo:    'via moscova',
                        civico:       '50',
                        onComplete:   'afterGeoCod'});
}
function afterGeoCod(pgAddress) {
  if (pgAddress) {
    var pgPoint = new PGPoint({ pgAddress:pgAddress,
                                txt: 'Casa'});
    map1.setCenterPoint(pgPoint);
    map1.pointAdder(pgPoint);
  }
}
</script>
</head>

<body onload="body_onload()">

  <a href="javascript:centerPoint()">Milano, Via Moscova 50</a>
  <div id="mapcontainer"></div>

</body>
</html>



Point Centering Many:
Using the setCenterAndZoom method you can center and zoom the map so that all current points are visible.

Show Code...

<html>
<head>
<title>PG Maps API - Example Point Centering Many</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc" 
type="text/javascript"></script>

<script type="text/javascript">
function body_onload() {
  var map1 = new PGMappy({nameContainer: 'mapcontainer',
                          lon:9.122285, 
  	                      lat:45.498595});
  
  var p1 = new PGPoint({lon:9.21800,lat:45.47600});		
  var p2 = new PGPoint({lon:9.14200,lat:45.47600});		
  var p3 = new PGPoint({lon:9.181,lat:45.442});		
  var p4 = new PGPoint({lon:9.181,lat:45.496});		
  	
  map1.pointAdder(p1);
  map1.pointAdder(p2);
  map1.pointAdder(p3);
  map1.pointAdder(p4);
  map1.setCenterAndZoom();
}
</script>
</head>

<body onload="body_onload()">

  <div id="mapcontainer"></div>

</body>
</html>



Point Drag:
You can enable dragging of a PGPoint by using the PGDragDrop object. Optionally events can be attached to the PGPoint which will fire during dragging and dropping. See the PGEvents page for a full list of events available.

Show Code...

<html>
<head>
<title>PG Maps API - Example Point Drag</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc" 
type="text/javascript"></script>

<script type="text/javascript">
var map1;
function body_onload() {
  map1 = new PGMappy({nameContainer: 'mapcontainer', z:4});
  var point1 = new PGPoint({lon:12.49553, lat:41.89504});
  map1.pointAdder(point1);
  PGDragDrop.addDragDrop(point1);
  PGEvent.addListener(point1, 'dragafter', function(data) {alert(data.lon+','+data.lat);});
}
</script>
</head>

<body onload="body_onload()">

  <div id="mapcontainer"></div>

</body>
</html>



Polyline:
A line can be drawn on the map by creating a number of PGPoint objects, using these to create a PGLine object and then passing this to the PGMappy object.The parameters available are:
  • id - An optional string identifier
  • points - An array of PGPoint objects
  • rgb - A JSON object specifying the line colour e.g. {r:0, g:255, b:0}
  • lineWidth - A number indicating the width of the line (in pixels)
  • opacity - The opacity of the line (a number from 0 to 1)

Show Code...

<html>
<head>
<title>PG Maps API - Polyline</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc" 
type="text/javascript"></script>

<script type="text/javascript">
var map1, pgPolyline1;
function body_onload() {
  map1 = new PGMappy({nameContainer: 'mapcontainer', z:3});
}
function addPolyline() {
  var p1 = new PGPoint({lon:12.48853, lat:41.88804});
  var p2 = new PGPoint({lon:12.48953, lat:41.89504});
  var p3 = new PGPoint({lon:12.49553, lat:41.89904});
  var p4 = new PGPoint({lon:12.49753, lat:41.88804});
  var pgLine = new PGLine({id:'polyline1', points:[p1, p2, p3, p4], 
  rgb:{r:0, g:255, b:0}, lineWidth:20, opacity:0.8});
  
  pgPolyline1 = map1.pgLineAdder(pgLine);
}
</script>
</head>

<body onload="body_onload()">

  <a href="javascript:addPolyline();">Add Polyline</a><br/>
  <a href="javascript:map1.removeLine('polyline1');">Remove Polyline</a><br/>
  <div id="mapcontainer"></div>

</body>
</html>



Polygon:
A shape can be drawn on the map by creating a number of PGPoint objects, using these to create a PGPolygon object and then passing this to the PGMappy object. The parameters available are:
  • id - An optional string identifier
  • points - An array of PGPoint objects
  • rgb - A JSON object specifying the background colour e.g. {r:0, g:255, b:0}
  • opacity - The opacity of the background (a number from 0 to 1)
  • borderRgb - A JSON object specifying the colour of the border e.g. {r:0, g:0, b:0}
  • borderWidth - A number indicating the width of the border (in pixels),
  • borderOpacity - The border opacity (a number from 0 to 1)
The Polygon can be removed from the map using the remove method.

Show Code...

<html>
<head>
<title>PG Maps API - Polygon</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc" 
type="text/javascript"></script>

<script type="text/javascript">
var map1, pgPolygon1;
function body_onload() {
  map1 = new PGMappy({nameContainer: 'mapcontainer', z:4});
}
function addPolygon() {
  var p1 = new PGPoint({lon:12.49853, lat:41.88804});
  var p2 = new PGPoint({lon:12.49953, lat:41.89504});
  var p3 = new PGPoint({lon:12.50553, lat:41.90104});
  var p4 = new PGPoint({lon:12.51753, lat:41.88804});
  pgPolygon1 = new PGPolygon({id:'poly1',
                              points:[p1, p2, p3, p4],
                              rgb:{r:0, g:255, b:0},
                              opacity:0.5,
                              borderRgb:{r:0, g:0, b:0},
                              borderWidth:3,
                              borderOpacity:0.9});
  map1.pgPolygonAdder(pgPolygon1);    
}
</script>
</head>

<body onload="body_onload()">

  <a href="javascript:addPolygon();">Add Polygon</a><br/>
  <a href="javascript:pgPolygon1.remove();">Remove Polygon</a><br/>
  <div id="mapcontainer"></div>

</body>
</html>



Lon Lat to Pixels:
By calling the getPixelFromLonLat method and supplying the lon and lat values, the position in pixels of that point relative to the top left corner of the visible map are returned.

Show Code...

<html>
<head>
<title>PG Maps API - Example Pixel from Lon Lat</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc" 
type="text/javascript"></script>

<script type="text/javascript">
var map1;
function body_onload() {
  map1 = new PGMappy({nameContainer: 'mapcontainer',
                          lon:9.08005,
                          lat:45.80798});
}

function addPoint(lon, lat) {
  var px = map1.getPixelFromLonLat(lon, lat);
  var pt = new PGPoint({lon:lon, lat:lat, 
  html:'<div style="background:yellow;">'+px.x+', '+px.y+'</div>'});
  map1.pointAdder(pt);
}
</script>
</head>

<body onload="body_onload()">

  <a href="javascript:map1.removeAllPoints();">Remove ALL</a> | 
  <a href="javascript:addPoint(9.07571, 45.81101);">9.07571, 45.81101</a> | 
  <a href="javascript:addPoint(9.0786, 45.80494);">9.0786, 45.80494</a> | 
  <div id="mapcontainer"></div>

</body>
</html>



Pixels to Lon Lat:
By calling the getLonLatFromPixel method and supplying the pixel position (relative to the top left hand corner of the visible map) the relative lon and lat values are returned.

Show Code...

<html>
<head>
<title>PG Maps API - Example Lon Lat From Pixel</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc" 
type="text/javascript"></script>

<script type="text/javascript">
var map1;
function body_onload() {
  map1 = new PGMappy({nameContainer: 'mapcontainer',
                          lon:9.08005,
                          lat:45.80798
                    });
}

function addPoint(pxX, pxY) {
  var px = map1.getLonLatFromPixel(pxX, pxY);
  var pt = new PGPoint({lon:px.lon, lat:px.lat, 
  html:'<div style="background:yellow;">'+px.lon+', '+px.lat+'</div>'});
  map1.pointAdder(pt);
}
</script>
</head>

<body onload="body_onload()">

  <a href="javascript:map1.removeAllPoints();">Remove ALL</a> | 
  <a href="javascript:addPoint(10,10);">20,20</a> | 
  <a href="javascript:addPoint(250,40);">250,40</a> | 
  <a href="javascript:addPoint(150,325);">150,325</a> | 
  <a href="javascript:addPoint(320,240);">320,240</a>
  <div id="mapcontainer"></div>

</body>
</html>



Mouse Events:
Custom methods can be called before and after the "mouseup", "mousedown" and "mousemove" events. To hook into the methods the following initialisation can be used: onMapMouseDownPre, onMapMouseDownPost, onMapMouseUpPre, onMapMouseUpPost, onMapMouseMovePre and onMapMouseMovePost.

Show Code...

<html>
<head>
<title>PG Maps API - Example Mouse Events</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc" 
type="text/javascript"></script>

<script type="text/javascript">
var map1;
function body_onload() {
  map1 = new PGMappy({nameContainer: 'mapcontainer',
                      onMapMouseDownPre:function() {m('onMapMouseDownPre');},
                      onMapMouseDownPost:function() {m('onMapMouseDownPost');},
                      onMapMouseUpPre:function() {m('onMapMouseUpPre');},
                      onMapMouseUpPost:function() {m('onMapMouseUpPost');},
                      onMapMouseMovePre:function() {m('onMapMouseMovePre');},
                      onMapMouseMovePost:function() {m('onMapMouseMovePost');}
  });
}
function m(a) {$('msg').innerHTML = $('msg').innerHTML+'\n'+a;}

</script>
</head>

<body onload="body_onload()">

  <div id="mapcontainer"></div>
  <textarea id="msg" rows="20"></textarea>

</body>
</html>



Reverse Geo Code:
Use this functionality to find the address of the closest street to the coordinates specified.

Show Code...

<html>
<head>
<title>PG Maps API - Geo Code Point</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc" 
type="text/javascript"></script>

<script type="text/javascript">
function body_onload() {
  var g = new PGGeoRevCod({lon:9,
                           lat:45,
                           onComplete:'afterGeoRevCod'});
}
function afterGeoRevCod(pgAddressRev) {
  if (pgAddressRev) {
    var a = pgAddressRev.nc +',' +
            pgAddressRev.toponimo +',' +
            pgAddressRev.com +',' +
            pgAddressRev.prov +',' +
            pgAddressRev.lon +',' +
            pgAddressRev.lat;
    $('georev').innerHTML = a;
  }
}
</script>
</head>

<body onload="body_onload()">

  <div id="georev"></div>
  
</body>
</html>



Route:
Add Routing information to the map by first using the getRoute method to get the route JSON object and then add it to the map using the addRoute method. Either a simple route can be created using just the start and end points, or a more complex route can be created adding in some intermediate points using the pItn parameter.

You can create different types of route by passing the following contants to the rt parameter:
  1. PGROUTE_TYPE_CAR - route by car.
  2. PGROUTE_TYPE_PED - pedestrian route.
  3. PGROUTE_TYPE_CAR_BEST_DIST - shortest route by car.
  4. PGROUTE_TYPE_CAR_NO_TOLL - route by car avoiding tolls.


NOTE: As of version 0.7.5 of the API the routing functionality has changed as follows:
  1. To create a multi point route, pass the intermediate points in the new pItn parameter.
  2. The getRoute method is now used instead of the getMapRoute method.
  3. The format of the JSON that contains the textual part of the route has changed.

Show Code...

<html>
<head>
<title>PG Maps API - Route</title>

<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc" 
type="text/javascript"></script>

<script type="text/javascript">
var map1,p1,p2,p3,p4,routeParams1,r1,pCenter;


function body_onload() {
  map1 = new PGMappy({nameContainer: 'mapcontainer'});
}  
  
function addRoutes() {
  p1 = new PGPoint({lon:12.49353, lat:41.89504, txt:'P1'});
  p2 = new PGPoint({lon:12.497615, lat:41.896445, txt:'P2'});
  p3 = new PGPoint({lon:12.507045, lat:41.89355, txt:'P3'});
  p4 = new PGPoint({lon:12.50615, lat:41.8893, txt:'P4'});
  
  map1.pointAdder(p1);
  map1.pointAdder(p2);
  map1.pointAdder(p3);
  map1.pointAdder(p4);
  
  // Get the center point and zoom
  pCenter = map1.getRouteCenter([p1,p2,p3,p4]);
  
  routeParams1 = {id:'myroute1',
                  pStart:p1,
                  pEnd:p4,
                  pItn:[p2, p3],
                  rt:PGROUTE_TYPE_CAR,
                  rgb:{r:255, g:0, b:0},
                  lineWidth:15,
                  initLon:pCenter.lon,
                  initLat:pCenter.lat,
                  initZ:pCenter.z};
  map1.getRoute(routeParams1, 'afterRoute1');

}

function afterRoute1(route) {
  r1 = route;
  
  var routeList = [{routeParams:routeParams1, route:r1}];
  map1.addRoute(routeList);
}

function addRouteText() {
  if (r1) {
    var s='';
    
    s += 'total time: ' + r1.tt + ' secs<br/>';
    s += 'total dist: ' + r1.td + ' m<br/>';
    
    $.each(r1.rplan, function(i,v){
      s += '<br/>leg ' + (i+1) + '<br/>';
      s += 'time: ' + v.tt + ' secs<br/>';
      s += 'dist: ' + v.td + ' m<br/>';
      
      $.each(v.rleg, function(i,v){
        var d = '';
        switch (v.dir) {
          case 0:
             d = "Continua in";
             break;
           case 1:
             d = "Gira a sinistra";
             break;
           case 2:
             d = "Gira a destra";
             break;
           case 3:
             d = "Subito a sinistra";
             break;
           case 4:
             d = "Subito a destra";
             break;
           case 5:
             d = "Esci in";
             break;
           case 6:
             d = "Immetiti";
             break;
        }
        s+=(i+1)+'. '+d+v.dsc+'('+v.loc+') '+v.pdes+' mt.<br/>';
      });
      
    });
    $('#rtxt').html(s);
  }
}
</script>
</head>

<body onload="body_onload()">

  <div style="width:150px;float:left;">
    <a href="javascript:addRoutes();">add Routes</a><br/>
    <a href="javascript:addRouteText();">Route Text</a><br/>
    <a href="javascript:map1.removeRoute('myroute1');">remove Route</a><br/>
    <a href="javascript:map1.zoomIn();">zoomIn</a><br/>
    <a href="javascript:map1.zoomOut();">zoomOut</a>
  </div>
  <div id="mapcontainer" style="float:left;"></div>
  <div id="rtxt" style="float:left;margin-left:20px;"></div>

</body>
</html>



Route Format (GPX/KML):
The URL of a file GPX or KML can be passed to this method to design a custom route on the map. If the file also contains Waypoints then these can be displayed as well. Make sure that the URL of the file is correctly encoded.

Show Code...

<html>
<head>
<title>PG Maps API - Route Format</title>

<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
 type="text/javascript"></script>

<script type="text/javascript">
var map1,routeParams1,r1, way;

function body_onload() {
  map1 = new PGMappy({nameContainer: 'mapcontainer', mapWidth:800, mapHeight:600});
}  
  
function addRouteFormat(id, url) {
  
  routeParams1 = {id:id,
                  url:url,
                  rgb:{r:0, g:255, b:0},
                  lineWidth:5};
                  
  map1.getRouteFormat(routeParams1, 'afterRoute1');
}

function afterRoute1(route) {
  r1 = route;
  
  var routeList = [{routeParams:routeParams1, route:r1}];
  map1.addRouteFormat(routeList);
}

function addWayPoints() {
  PGWayPoint.addWayPoints(map1, r1, {onComplete:onCompleteWayPoints});
}

function addWayPointsDyn() {
  PGWayPoint.addWayPoints(map1, r1, {onOpen:onOpenWaypoint, onComplete:onCompleteWayPoints});
}

function onOpenWaypoint(wp) {
  return  '<div style="width:400px;height:200px;background:purple;color:white;">' +
            '<div id="' + wp.closeID + 
            '" style="position:absolute;top:5px;right:5px;width:14px;height:14px;">
            <img src="http://img.tuttocitta.it/nuovotcol/img/fumetti/icoChiudiFumetto.gif"
             width="14" height="14"/></div>' +
            (wp.name ? '<b>' + wp.name + '</b>' : '') +
            (wp.dsc ? '<br/><br/>' + wp.dsc : '') +
            (wp.cmt ? '<br/><br/>' + wp.cmt : '') +
          '</div>';
}

function onCompleteWayPoints(w) {
  way = w;
}

function removeRouteFormat(id) {
  map1.removeRouteFormat(id);
}

function removeWayPoints() {
  PGWayPoint.removeWayPoints(way);
}
</script>
</head>

<body onload="body_onload()">

  <div style="width:150px;float:left;">
    <a href="javascript:map1.zoomIn()">Zoom In</a> | 
    <a href="javascript:map1.zoomOut()">Zoom Out</a><br/>
    <a href="javascript:addRouteFormat('myroute1', 
    'http://api.visual.paginegialle.it/tcolnew/mapsapi/examples/'
     + encodeURIComponent('FTommaselli.gpx'));">Add Route Format 1</a><br/>
    <a href="javascript:addWayPoints();">Add Way Points</a><br/>
    <a href="javascript:addWayPointsDyn();">Add Way Points Dyn</a><br/>
    <a href="javascript:removeRouteFormat();">Remove Route Format 1</a><br/>
    <a href="javascript:removeWayPoints();">Remove Way Points</a><br/>
  </div>
  <div id="mapcontainer" style="float:left;"></div>

</body>
</html>



Additional functionality:

Various functionality.


Show Code ...

<html>
<head>
<title>PG Maps API - Example Additional Functionality</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap2.js?id=abc"
 type="text/javascript"></script>

<script type="text/javascript">
var map1, point1;
function body_onload() {
  map1 = new PGMappy({nameContainer: 'mapcontainer'});
  point1 = new PGPoint({ lon:12.49053,
                    lat:41.89304,
                    txt:'Q',
                    opened:{onOpen:myOpened,
                            onOpenParams:{url: 'http://www.aaa.it', city:'milano'}
                           }
                  });
  map1.pointAdder(point1);
  map1.pointAdder(new PGPoint({lon:12.49353, lat:41.89504}));
}
function myOpened(params) {
  return '<div style="width:150px; height:150px; background:yellow; border:2px
   solid #000;">' + params.city + '</div>';
}

</script>
</head>

<body onload="body_onload()">

  <a href="javascript:map1.removeAllPoints();">Remove All Points</a>
  <br/>
  <a href="javascript:alert(map1.getCenter().lon + ', ' + 
  map1.getCenter().lat);">Get Center</a>
  <br/>
  <a href="javascript:alert(map1.getMapType());">Get Map Type</a>
  <br/>
  <a href="javascript:map1.setMapType(PGMAP_TYPE_MAP);">Map</a> | 
  <a href="javascript:map1.setMapType(PGMAP_TYPE_ORTO);">Orto photo</a> | 
  <a href="javascript:map1.setMapType(PGMAP_TYPE_MIXED);">Mixed</a>
  <br/>
  <div id="mapcontainer"></div>

</body>

</html>