All geek questions in one place

HERE Card Insert Code

Can someone tell me how I get simple code to embed maps here? I just can’t find the Embed button, which, in my opinion, should be on any map website. Ironically, I am making a site here, so I am not allowed to receive a google map. thanks

+5
source share
1 answer

For a simple static map, HERE you should look at the Maps API - this will embed a simple picture. However, if you want a mobile map, you can use the HERE Maps API for JavaScript in the IFrame and pass the latitude, longitude, and zoom level of your choice, for example 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>

IFrame can be called with 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 looks something like this:

Embedded new york

Of course, you could add all the usual things, such as adding markers, etc., so that the map does what you do , and not just what the provider offers. Why should you be limited to one look and feel offered by the card provider?

+4
source

Source: https://habr.com/ru/post/1205842/

More articles:


All Articles