How to build this product with google maps? - google-maps

Question

I want to build an exact replica of a website with a different landmark to point towards.
Could you please tell me what I should learn in order to do it please ?
So far, I've created this and don't know what to do next :
https://jsfiddle.net/hasnain721/01v7s2m4/6/
I am a very basic coder btw!
Thanks in advance!
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(53.3478, -6.2597),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infoWindow = new google.maps.InfoWindow({
map: map
});
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
//infoWindow.setPosition(pos);
// infoWindow.setContent('<b>You are here.</b><br><b>Lat:</b> '+position.coords.latitude+'<br><b>Lon:</b> '+position.coords.longitude);
map.setCenter(pos);
var marker = new google.maps.Marker({
position: pos,
map: map,
title: String(pos.lat) + ", " + String(pos.lng),
});
//draws out the path from current location to landmark
var flightPlanCoordinates = [{
lat: position.coords.latitude,
lng: position.coords.longitude
},
{
lat: 21.4224779,
lng: 39.8251832
}
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
//draws out the path from current location to landmark
},
function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}

Answer 1

You need to change the coordinates of the "flightPlanCoordinates" variable.
sample pointing at the Statue of Liberty :
var flightPlanCoordinates = [
{lat: position.coords.latitude, lng: position.coords.longitude},
{lat: 40.689249, lng: -74.0445}
];