PG Maps API

Intro:

Add a dynamic Map to your web-site by using the PG Maps API. You can create a simple map or build more complex functionality on top of it, just read the easy to follow instructions below.

N.B. This version has been frozen - for new developments you should use the PG Maps API 2 version. See Documentation PG Maps API 2.

What's New:

Version 0.8.6 (8/8/2008):
- Point geo services directly at the geo server.
Version 0.8.5:
- Correct printing alignment in Explorer.
Version 0.8.4:
- Correct internal button up check on mousemove in Explorer.
Version 0.8.3:
- Correct internal Easting and Northing values.
Version 0.8.2:
- Finish the implementation of the methods disableMap and enableMap.
Version 0.8.1:
- New method preventMapMouseDown added which can be called from a onMouseDown event of an element which is on the map to prevent the map drag events being activated. An example could be to prevent the map being draggable when an element in a Big Point is clicked.
- Internal changes to the main Map mouse and key events.
Version 0.8:
- The new parameters offsetX and offsetY have been added to the opened point so it can be positioned. See Opener Position
- The onOpen parameter has been added to the opened point and gets called when the point is clicked to be opened. Dynamic HTML can then be created and used for the opened point. See Opener Dynamic

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:

<html>
<head>
<title>PG Maps API - Example Simple</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap.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>

Try the example (example_simple.html)

Top

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.

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.

<html>
<head>
<title>PG Maps API - Example Centering</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap.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>

Try the example (example_centering.html)

Top

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:

<html>
<head>
<title>PG Maps API - Example Drag & Zoom modes</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap.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>

Try the example (example_dragZoom.html)

Top

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-10) or zoom In or Out using the "zoomIn" and "zoomOut" methods:

<html>
<head>
<title>PG Maps API - Example Zoom</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap.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(10);">Level 10</a> | 
  <a href="javascript:map1.zoomIn();">Zoom In</a> | 
  <a href="javascript:map1.zoomOut();">Zoom Out</a>
  <div id="mapcontainer"></div>

</body>
</html>

Try the example (example_zoom.html)

Top

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):

<html>
<head>
<title>PG Maps API - Example Size</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap.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>

Try the example (example_size.html)

Top

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:

<html>
<head>
<title>PG Maps API - Example Pan</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap.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>

Try the example (example_pan.html)

Top

Compass:

Add the Compass controls to the map by calling the "addCompass" method:

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

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

<body onload="body_onload()">

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

</body>
</html>

Try the example (example_compass.html)

Top

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:

<html>
<head>
<title>PG Maps API - Example Simple Point</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap.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>

Try the example (example_simplePoint.html)

Top

Custom Point:

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

<html>
<head>
<title>PG Maps API - Example Custom Point</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap.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>

Try the example (example_customPoint.html)

Top

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:

<html>
<head>
<title>PG Maps API - Example Point Position</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap.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>

Try the example (example_pointPosition.html)

Top

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:

<html>
<head>
<title>PG Maps API - Example Point Opener</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap.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>

Try the example (example_pointOpener.html)

Top

Custom Opener:

You can design your own 'opener' too by placing your custom HTML in the "html" attribute of the "opened" attribute:

<html>
<head>
<title>PG Maps API - Example Custom Opener</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap.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>'
                           }
                  });
  map1.pointAdder(point1);
}
</script>
</head>

<body onload="body_onload()">

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

</body>
</html>

Try the example (example_customOpener.html)

Top

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:

<html>
<head>
<title>PG Maps API - Example Opener Position</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap.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>

Try the example (example_openerPosition.html)

Top

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.

<html>
<head>
<title>PG Maps API - Example Opener Dynamic</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap.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>

Try the example (example_openerDynamic.html)

Top

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.

<html>
<head>
<title>PG Maps API - Geo Code Point</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap.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>

Try the example (example_geoCode.html)

Top

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:

<html>
<head>
<title>PG Maps API - Example Point Centering Map</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap.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>

Try the example (example_pointCenteringMap.html)

Top

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:

<html>
<head>
<title>PG Maps API - Example Point Centering</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap.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>

Try the example (example_pointCentering.html)

Top

Point Centering Many:

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

<html>
<head>
<title>PG Maps API - Example Point Centering Many</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap.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>

Try the example (example_pointCenteringMany.html)

Top

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:

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

<script type="text/javascript">
var map1;
function body_onload() {
  map1 = new PGMappy({nameContainer: 'mapcontainer'});
  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({points:[p1, p2, p3, p4]});
  
  map1.pgLineAdder(pgLine);
}
</script>
</head>

<body onload="body_onload()">

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

</body>
</html>

Try the example (example_polyline.html)

Top

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.

<html>
<head>
<title>PG Maps API - Example Pixel from Lon Lat</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap.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>

Try the example (example_pixelFromLonLat.html)

Top

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.

<html>
<head>
<title>PG Maps API - Example Lon Lat From Pixel</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap.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>

Try the example (example_lonlatFromPixel.html)

Top

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.

<html>
<head>
<title>PG Maps API - Example Mouse Events</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap.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>

Try the example (example_mouseEvents.html)

Top

Reverse Geo Code:

Use this functionality to find the address of the closest street to the coordinates specified.

<html>
<head>
<title>PG Maps API - Geo Code Point</title>
<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap.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>

Try the example (example_geoRevCode.html)

Top

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:

PGROUTE_TYPE_CAR - route by car.
PGROUTE_TYPE_PED - pedestrian route.
PGROUTE_TYPE_CAR_BEST_DIST - shortest route by car.
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:

To create a multi point route, pass the intermediate points in the new pItn parameter.
The getRoute method is now used instead of the getMapRoute method.
The format of the JSON that contains the textual part of the route has changed.

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

<script src="http://api.visual.paginegialle.it/tcolnew/mapsapi/pgMap.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>

Try the example (example_route.html)

Top