Menu
Can someone tell me how I get a simple embed code from here maps? I simply can't find the Embed button which in my opinion should be there on any map website. Ironically I'm making a website for here so I'm not allowed to get a google map.
812
Costs. All Maps Embed API requests are available at no charge with unlimited usage.
For a simple static HERE Map you should look at the Map Image API - this will embed a simple image. However if you want a moveable map, you can use the HERE Maps API for JavaScript in an IFrame and pass the latitude, longitude and zoom level of your choice e.g. something like:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" type="text/css"
href="http://js.api.here.com/v3/3.0/mapsjs-ui.css" />
<script type="text/javascript" charset="UTF-8"
src="http://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
<script type="text/javascript" charset="UTF-8"
src="http://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script type="text/javascript" charset="UTF-8"
src="http://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
<script type="text/javascript" charset="UTF-8"
src="http://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 100%; background: grey" />
<script type="text/javascript" charset="UTF-8" >
/**
* Obtains a value from a query string
* @param {String} name key in the query string
* @return {String} value
*/
function getParameterByName(name) {
name = name.replace(/[\[]/, '\\\[').replace(/[\]]/, '\\\]');
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)'),
results = regex.exec(location.search);
return results === null ? '' :
decodeURIComponent(results[1].replace(/\+/g, ' '));
}
/**
* Moves the map to display at agiven location
* @param {H.Map} map A HERE Map instance within the application
*/
function moveMap(map, location, zoom){
var lat = getParameterByName('lat'),
lng = getParameterByName('lng');
zoom = getParameterByName('zoom');
map.setCenter({lat: lat, lng: lng});
map.setZoom(zoom);
}
/**
* Boilerplate map initialization code starts below:
*/
//Step 1: initialize communication with the platform
var platform = new H.service.Platform({
app_id: '<YOUR APP ID>',
app_code: '<YOUR APP CODE>',
useHttps: true
});
var defaultLayers = platform.createDefaultLayers();
//Step 2: initialize a map - not specificing a location will give a whole world view.
var map = new H.Map(document.getElementById('map'),
defaultLayers.normal.map);
//Step 3: make the map interactive
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
// Create the default UI components
var ui = H.ui.UI.createDefault(map, defaultLayers);
// Now use the map as required...
moveMap(map);
</script>
</body>
</html>
The Iframe can be called specifying the height and width:
<iframe src=".../path-to-file/embed.html?lat=40.7057&lng=-73.9306&zoom=12" width="600" height="450" frameborder="0" style="border:0"></iframe>
The result is something like this:
Of course you could then add in all the usual other stuff as well, such as adding markers and so on, to make the map do what you want, not just what the provider offers. Why should you be restricted to a single look-and-feel as offered by the map provider?
165
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
