MIP III

MIP III

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
  <div class="navbar navbar-default">
    <div class="navbar-header">
      <a class="navbar-brand" href="#"><img src="https://momsinprayer.org/wp-content/uploads/2016/05/imageWebsiteLogo.png" width="150"></a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">


        <li><a href="http://getbootstrap.com/css">Addresses</a></li>
        <li class="active"><a href="http://getbootstrap.com/components">Map</a></li>
        <li><a href="http://getbootstrap.com/javascript">...</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
      <li class="dropdown">
          <a href="http://getbootstrap.com/customize" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Language <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">English</a></li>
            <li><a href="#">German</a></li>
            <li><a href="#">French</a></li>
          </ul>
        </li>
        <li>
          <a href="http://getbootstrap.com/customize">
            <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
          </a>
        </li>
        <li>
          <a href="http://getbootstrap.com/customize">
            <span class="glyphicon glyphicon-off" aria-hidden="true"></span>
          </a>
        </li>
      </ul>
    </div>
  </div>

  <ol class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li class="active">Map</li>
  </ol>





      

      <!-- Replace the value of the key parameter with your own API key. -->
      <script async defer...

CSS

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 500px;
  display: block;
  border: 1px solid;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {
      lat: -28.024,
      lng: 140.887
    }
  });

  // Create an array of alphabetical characters used to label the markers.
  var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

  // 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) {
    return new google.maps.Marker({
      position: location,
      label: labels[i % labels.length]
    });
  });

  // 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: -31.563910,
  lng: 147.154312
}, {
  lat: -33.718234,
  lng: 150.363181
}, {
  lat: -33.727111,
  lng: 150.371124
}, {
  lat: -33.848588,
  lng: 151.209834
}, {
  lat: -33.851702,
  lng: 151.216968
}, {
  lat: -34.671264,
  lng: 150.863657
}, {
  lat: -35.304724,
  lng: 148.662905
}, {
  lat: -36.817685,
  lng: 175.699196
}, {
  lat: -36.828611,
  lng: 175.790222
}, {
  lat: -37.750000,
  lng: 145.116667
}, {
  lat: -37.759859,
  lng: 145.128708
}, {
  lat: -37.765015,
  lng: 145.133858
}, {
  lat: -37.770104,
  lng: 145.143299
}, {
  lat: -37.773700,
  lng: 145.145187
}, {
  lat: -37.774785,
  lng: 145.137978
}, {
  lat: -37.819616,
  lng: 144.968119
}, {
  lat: -38.330766,
  lng: 144.695692
}, {
  lat: -39.927193,
  lng: 175.053218
}, {
  lat: -41.330162,
  lng: 174.865694
}, {
  lat: -42.734358,
  lng: 147.439506
}, {
  lat: -42.734358,
  lng: 147.501315
}, {
  lat: -42.735258,
  lng: 147.438000
}, {
  lat: -43.999792,
  lng: 170.463352
}]