Image map, how to implement?

The task to create a map of any location available to scaling, tobish if you want a closer look - closer(further removed). The whole thing need to implement on the website(html,css,svg,js), I in this case is zero. Please tell me what development environment to do all this? And how it to make(or at least the source where to get info)? Please advice.

upd: of course you know, the Internet is the bulk of the information, but I would like to discuss with people live, who really experienced this.
April 3rd 20 at 18:24
1 answer
April 3rd 20 at 18:26
I'm not experienced with this, and that even a novice, but I've seen code for this in the book "Web programming for dummies" Nikhil Abraham, there is an example of creating an app for a fictional restaurant "McDuck", which would have tied the user to a particular café, considered the distance between the user and the restaurant (with the Haversine theorem) and indicates the time needed to travel, and the distance that can be overcome in less than 5 minutes the customer is given a coupon

<!DOCTYPE html>
<html>
the <head>
 <title> McDuck's </title>
</head>
the <body>
 <h1>McDuck''s Local Offers</h1>
 <div id="geodisplay"></div>
 <div id="effect"></div>
</body>
</html>


body {
 text-align: center;
 background: white;
}
h1, h2, h3, p{
 font-family: Sans-Serif;
 color: black;
}
p{
 font-size: 1em;
}


function getLocation() {
 if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition
(showLocation);
}
}

function showLocation(position) {
 var mcduckslat=40.735383; // "40.735383" comes as the first value that comes after the "@" in the address bar of Google Maps
 var mcduckslon=-74.002994 //"-74.002994" comes as the second value after the comma
 var currentpositionlat=position.coords.latitude;
 var cureentpositionlon=position.coords.longitude;
 // Calculating the distance between the current location and the location of the restaurant
 var distance=getDistanceFromLatLonInMiles(mcduckslat, mcduckslon, currentpositionlat, currentpositionlon);

document.getElemtById("geodisplay").innerHTML="Latitude: "+currentpositionlon;
// Haversine formula to calculate distances between points on a sphere

Find more questions by tags CSSJavaScriptHTMLSVG