00-Google Maps JS API Example.md

Google Maps JavaScript API Example.

01-api-js-es.html

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=TU_CLAVE_DE_API_AQUI"></script>

01-api-js.html

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOU_API_KEY_HERE"></script>

02-empty-custom-script.js

function loadNelioHQMap() {
  // Code here.
}

google.maps.event.addDomListener( window, 'load', loadNelioHQMap );

03-custom-script-no-markers.js

var mapEl = document.getElementById( 'neliohq-map' );
var mapOptions = {
  center: new google.maps.LatLng( 41.406424, 2.192606 ),
  disableDoubleClickZoom: true,
  draggable : true,
  mapTypeControl: false,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  panControl: true,
  scaleControl: false,
  scrollwheel: true,
  streetViewControl: false,
  overviewMapControl: true,
  overviewMapControlOptions: {
    opened: false,
  },
  zoom: 12,
  zoomControl: true,
  zoomControlOptions: {
    style: google.maps.ZoomControlStyle.DEFAULT,
  }
};

var map = new google.maps.Map( mapEl, mapOptions );

04-adding-markers.js

new google.maps.Marker({
  map: map,
  position: new google.maps.LatLng( 41.406424, 2.192606 ),
  icon: {
    path: google.maps.SymbolPath.CIRCLE,
    fillColor: '#80c6dd',
    fillOpacity: 1,
    scale: 6,
    strokeWeight: 6,
    strokeColor: '#80c6dd'
  }
});

05-custom-styles.js

var mapOptions = {
  // ...
  styles: [{"featureType":"water","elementType":"geometry", /* ... */ }]
};