HERE Maps alternative to Google Maps
1

CHOOSE A MAP DEVELOPER ENVIRONMENT

Choose among the most popular mapping frameworks. 
<!DOCTYPE html>
<html>
  <head>
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.css" type="text/css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js"></script>
	<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
	<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
	<style>
	  #map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
	</style>
  </head>
  <body>
	<div id="map"></div>
	<p><a href="https://developer.here.com/" target="_blank">HERE</a> <a href="https://placematic.pl" target="_blank">Placematic</a></p>
	<script>
	  var map = new ol.Map({
		layers: [
		  new ol.layer.Tile({
			source: new ol.source.XYZ({
			  url: 'https://1.base.maps.api.here.com/maptile/2.1/maptile/newest/normal.day/{z}/{x}/{y}/256/png?app_id=ruFsc1KKjD9bMV63zEMj&app_code=j_Lv7sBQPeDBybjfbTTnAA',
			  crossOrigin: 'anonymous'
			})
		  })
		],
		target: 'map',
		view: new ol.View({
		  center: ol.proj.fromLonLat([19.28, 51.98]),
		  zoom: 7
		})
	  });
	</script>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
	<style>
	  #map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
	</style>
  </head>
  <body>
	<div id="map"></div>
	<p><a href="https://developer.here.com/" target="_blank">HERE</a> <a href="https://placematic.pl" target="_blank">Placematic</a></p>
    <script>
	  var map = L.map('map').setView([51.98, 19.28], 7);
	  L.tileLayer('https://1.base.maps.api.here.com/maptile/2.1/maptile/newest/normal.day/{z}/{x}/{y}/256/png?app_id=ruFsc1KKjD9bMV63zEMj&app_code=j_Lv7sBQPeDBybjfbTTnAA',{
		attribution: '<a href="https://developer.here.com/" target="_blank">© HERE</a> <a href="https://placematic.pl/en/" target="_blank">Placematic</a>'
	  }).addTo(map);
	</script>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, width=device-width" />
    <link rel="stylesheet" type="text/css" href="https://js.cit.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1526040296" />
    <script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-core.js"></script>
    <script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-service.js"></script>
    <script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-ui.js"></script>
    <script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
  </head>  
  <body>
    <div id="map" style="width:100%; height:800px;" />
    <script  type="text/javascript" charset="UTF-8" >
	  var platform = new H.service.Platform({
	    app_id: 'ruFsc1KKjD9bMV63zEMj',
	    app_code: 'j_Lv7sBQPeDBybjfbTTnAA',
	    useCIT: true,
	    useHTTPS: true
	  });
	  var pixelRatio = window.devicePixelRatio || 1;
	  var defaultLayers = platform.createDefaultLayers({
	    tileSize: pixelRatio === 1 ? 256 : 512,
	    ppi: pixelRatio === 1 ? undefined : 320
	  });

	  var map = new H.Map(document.getElementById('map'),
	    defaultLayers.normal.map, {pixelRatio: pixelRatio});

	  var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

	  var ui = H.ui.UI.createDefault(map, defaultLayers);
	
	  function initView(map){
	    map.setCenter({lat:51.98, lng:19.28});
	    map.setZoom(7);
	  }
	
	  initView(map);
    </script>
  </body>
</html>
2

CHOOSE A MAP

Choose from one of our professionally designed maps for your application or project. You can also look further in the official Map Tile API documentation and example pages.
3

ADD YOUR POINTS

Select the form in which you want to put your locations on the map.
Address:

or fill in the following fields:
X
Y


or click a point on the map.

An example of the REST service response:
[
	{
	52.2330886261725,
	20.993505214481658
	},
	{
	52.21721053535026,
	21.016336177616424
	},
	{
	52.2344553486779,
	21.03384563806564
  }
]

POS-Eye
Smart but simple localization software for your website.


POS-Eye is a modern and flexible service of the point of sale search engine, which can be integrated with any website. Help find places where customers can buy your product or use services. Adding new or managing existing locations is very easy thanks to the POS-Manager application. You can also use your solution and we will integrate it.

Learn more about POS-Eye >>

4

ADDRESS AUTOCOMPLETE

A simple and real-time service aimed at improving the address when it is entered.
API can be integrated in browser-based applications, online forms or thin-client environments.
Is designed to handle a huge number of queries with a reliable response time.

You can also look further in the official Geocoding Autocomplete API documentation and example pages.
Click point on map:



5

OUTPUT

Paste this code on your website.
Powered by