How to run the map locally for future experiments?

L

lilandre22017-05-21 19:06:30

Google Maps

lilandre2, 2017-05-21 19:06:30

Found the required map type on Fiddle. I insert into 3 files on the PC, it does not work. I write in the file:
- html:

<!DOCTYPE html>
<html>
<head>
    <title>Styled Maps - Night Mode</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="map"></div>
<script type="text/javascript" src="script.js"></script>
   <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDvTwZDuyc74Us1DONjuX6hnjYiJa4Yh7A&callback=initMap"
    async defer></script><script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<div id="map"></div>
</body>
</html>

- style.css :

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

-script.js :

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {
      lat: -15.7942357,
      lng: -47.8821945
    }
  });
  var infoWin = new google.maps.InfoWindow();
  // Add some markers to the map.
  // Note: The code uses the JavaScript Array.prototype.map() method to
  // create an array of markers based on a given "locations" array.
  // The map() method here has nothing to do with the Google Maps API.
  var markers = locations.map(function(location, i) {
    var marker = new google.maps.Marker({
      position: location
    });
    google.maps.event.addListener(marker, 'click', function(evt) {
      infoWin.setContent(location.info);
      infoWin.open(map, marker);
    })
    return marker;
  });

  // Add a marker clusterer to manage the markers.
  var markerCluster = new MarkerClusterer(map, markers, {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
  });

}
var locations = [{
  lat: -19.9286,
  lng: -43.93888,
  info: "marker 1"
}, {
  lat: -19.85758,
  lng: -43.9668,
  info: "marker 2"
}, {
  lat: -18.24587,
  lng: -43.59613,
  info: "marker 3"
}, {
  lat: -20.46427,
  lng: -45.42629,
  info: "marker 4"
}, {
  lat: -20.37817,
  lng: -43.41641,
  info: "marker 5"
}, {
  lat: -20.09749,
  lng: -43.48831,
  info: "marker 6"
}, {
  lat: -21.13594,
  lng: -44.26132,
  info: "marker 7"
}, ];

google.maps.event.addDomListener(window, "load", initMap);