API Documentation
Embedding the waze map in an external website
Insert the following before the closing 'body' tag:
<script type="text/javascript">
<!--
g_waze_config = {
div_id:"map", //id of the div that contains the map, must have width and height defined
locale : "israel",//locale of the map, for now only 'israel' is supported
center_lon:34.79000,//center of the map longitude
center_lat:32.08600,//center of the map latitude
zoom:2,//zoom level of the map (0-10 supported)
token:'xxxx-xxxx-xxxx-xxxx-xxxx'//your waze token
};
-->
</script>
<script type="text/javascript">
<!--
//function callback you can define that will be called once the map is ready
function onWazeMapInit(){
var map = g_waze_map.map;//obtain the map variable
// your code here ...
};
-->
</script>
<script type="text/javascript" src="http://www.waze.co.il/js/WazeEmbeddedMap.js"></script>
The API uses jQuery. If your site already includes jQuery, to avoid conflicts use WazeEmbeddedMapNoJQuery.js instead of WazeEmbeddedMap.js. The API will rely on your JQuery include.
Obtain your waze token by registering to the API.
After the page uploads you can access the global variable g_waze_map. This variable has a field "map" which is an OpenLayers' Map object.
The API therefore relies on the open source OpenLayers project so please take a look at their documentation and check out these examples for more information on how you can expand functionality if needed.
Search (Geocoding) snippet
<script type="text/javascript">
<!--
//search callback called when search returns with the search results as parameter 'response'
function find_callback(response){
//output the first (and best) result returned
alert(response[0].name+", lon: "+response[0].location.lon+", lat: "+response[0].location.lat);
};
function onWazeMapInit(){
/**
* g_waze_map.find = function(term,callback_name,ignore_location)
* @param term - the term to search for
*
* @param callback_name - callback to call when find returns, notice the the callback
* parameter is the NAME of the function as a String not the function itself
*
* @param ignore_location - if true, search will ignore the current position of the map and
* results will be returned solely by string matching, disregarding proximity
*/
g_waze_map.find('ה באייר תא','find_callback',true);
};
-->
</script>
The returned JSON response is structured as follows:
/*
array of search results (up to 10) sorted by relevancy
*/
[
//search result example:
{
//bounds that contain the this map feature (set map to this extent for closest zoom)
"bounds":{"bottom":32.0880470275879,
"left":34.7883338928223,
"right":34.7912673950195,
"top":32.0854721069336},
//location of the feature
"location":{"lat":32.08560397003471,"lon":34.78999763465419},
//name of feature
"name":"ה' באייר, תל אביב - יפו"
}
//up to 9 more results
// ...
]
Example Page
view the example page<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Test API</title>
</head>
<body>
<div id="map" style="width:100%;height:480px;">
</div>
<script type="text/javascript">
<!--
function find_callback(response){
var map = g_waze_map.map;
var first_result = response[0];
var lonlat = new OpenLayers.LonLat(first_result.location.lon,first_result.location.lat);
g_waze_map.map.setCenter(lonlat);
var size = new OpenLayers.Size(36,47);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('http://www.waze.co.il/images/home.png',size,offset);
var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
markers.addMarker(new OpenLayers.Marker(lonlat,icon));
map.addPopup(new OpenLayers.Popup.FramedCloud("test",lonlat,null,
"<div style='font-family:Arial,sans-serif;font-size:0.8em;'>"+first_result.name+"<div>",
anchor=null,true,null));
};
//called when map loads
function onInit(){
var map = g_waze_map.map;
var shapes = new OpenLayers.Layer.Vector( "Shapes" );
map.addLayer(shapes);
var pentagon = OpenLayers.Geometry.Polygon.createRegularPolygon(new OpenLayers.Geometry.Point(34.78441,32.08946),0.001,5,0);
var pentagon_feature = new OpenLayers.Feature.Vector(pentagon);
shapes.addFeatures([pentagon_feature]);
var line = new OpenLayers.Geometry.LineString([
new OpenLayers.Geometry.Point(34.79514,32.09127),
new OpenLayers.Geometry.Point(34.79544,32.08985),
new OpenLayers.Geometry.Point(34.79544,32.08861),
new OpenLayers.Geometry.Point(34.79544,32.08736),
new OpenLayers.Geometry.Point(34.79514,32.08577)
]);
var line_feature = new OpenLayers.Feature.Vector(line);
shapes.addFeatures([line_feature]);
//search API example, calls 'find_callback' when search returns
g_waze_map.find('ה באייר תא','find_callback');
g_waze_map.find('זבוטינסקי תא','find_callback');
};
-->
</script>
<script type="text/javascript">
<!--
g_waze_config = {
div_id:"map",
locale : "israel",
center_lon:34.7898,
center_lat:32.08676,
zoom:8,
token:"example-token",
alt_base_layer:"israel_colors",
alt_map_servers:"http://ymap1.waze.co.il/wms-c/",
callback:onInit
//framed_cloud_image_url:"http://www.waze.co.il/test_api/cloud.png"
};
-->
</script>
<!--<script type="text/javascript" src="http://www.waze.co.il/js/WazeEmbeddedMap.js"></script>-->
<!-- _DEBUG_INC_ --> <script type="text/javascript" src="/js/OpenLayers.js"> </script>
<!-- _DEBUG_INC_ --> <script type="text/javascript" src="/js/jquery.js"></script>
<!-- _DEBUG_INC_ --> <script type="text/javascript" src="/js/mapnik.js"></script>
<!-- _DEBUG_INC_ --> <script type="text/javascript" src="/js/WazePanZoomBar.js"></script>
<script type="text/javascript" src="http://www.waze.co.il/js/WazeEmbeddedMap.js"></script>
<!--<script type="text/javascript" src="http://192.168.111.118/js/WazeEmbeddedMap.js"></script>-->
</body>
</html>
Loading the map on demand
Instead of having the map load after the page finishes loading you can have the map on demand as follows:
<script type="text/javascript">
<!--
g_waze_config = {
//... rest of the config
init_on_page_load:false
};
-->
</script>
<script type="text/javascript" src="http://www.waze.co.il/js/WazeEmbeddedMap.js"></script>
<script type="text/javascript">
<!--
//init the map later in your code
g_waze_map_init();
-->
</script>
Usage Examples
The israeli Hummus Map
iPhone API
Map API*
The waze iPhone API is based on the "route-me" open source project, which allows embedding online maps with native iPhone applications.
The API allows showing the map at specific coordinate and zoom, panning and pinching like the native iPhone map app. It also allows adding markers on map and responding to events. The project can be downloaded from /dev/route-me_waze_il_v1.1.zip.
Embedding the map in a native app is simple. Full step by step guide is posted in the route-me project page: http://code.google.com/p/route-me/wiki/EmbeddingGuide Waze API token must be set in order to show the waze tiles. Use the following code to set the token (replace "token" with the token provided by waze when you registered to get access to the APIs). In your Controller implementation, instead of the following code:
[self setMapView:[[[RMMapView alloc]initWithFrame:CGRectMake(0.0, 0.0, desiredwidth, desiredheight)]autorelease]];
[self setMapView:[[[RMMapView alloc]initWithFrame:CGRectMake(0.0, 0.0, desiredwidth, desiredheight)
andApiToken:@"token"]autorelease]];
[mapView.contents.tileSource setApiToken:@"token"];
Launching waze iPhone client with parameters
URL scheme can be used to launch waze with parameters from 3rd party app, email, SMS, web page link etc.
Following are the available parameters at the moment:
search for address:
waze://?q=<address search term>
center map to lat / lon:
waze://?ll=<lat>,<lon>
set zoom (minimum is 6):
waze://?z=<zoom>
Examples:
center map to Ayalon and set zoom to 10waze://?ll=32.10176,34.80374&z=10
search for address:
waze://?q=San%20Jose%20California