Skip to content

Instantly share code, notes, and snippets.

@oriolrivera

oriolrivera/maps.html

Created April 10, 2015 18:32
Show Gist options
  • Save oriolrivera/725f3f6c9b05334a2e91 to your computer and use it in GitHub Desktop.
Save oriolrivera/725f3f6c9b05334a2e91 to your computer and use it in GitHub Desktop.
Download ZIP
mapa form contact google maps
Raw
maps.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>
Página con toda la documentación: Google Maps Javascript API V3 Reference
<br/><a href="https://developers.google.com/maps/documentation/javascript/reference?hl=es">https://developers.google.com/maps/documentation/javascript/reference?hl=es</a>
</p>
<p>
<script src="https://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<!-- definimos la anchura del mapa -->
<div id="map_canvas" style="width: 700px; height: 500px"></div>
<script type="text/javascript">
// definimos las coordenadas
var latlng = new google.maps.LatLng(40.689913, -74.045341);
// definimos un array de opciones que se añadiran al mapa
var myOptions = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// definimos una marca
var marker = new google.maps.Marker({
// definimos la poisicion de nuestra marca en el mapa
position: map.getCenter(),
map: map,
// titulo que aparecera cuando pongamos el cursor encima
title: 'Titulo',
// aqui encontraras muchos tipos de iconos:
//http://gmaps-samples.googlecode.com/svn/trunk/markers/
icon: 'http://gmaps-samples.googlecode.com/svn/trunk/markers/green/blank.png',
cursor: 'default',
draggable: true
});
// definimos una viñeta de información
var popup = new google.maps.InfoWindow({
content: 'Información para la<br/>viñeta. Permite \
poner algo de<br/>código <strong>html</strong>',
position: map.getCenter()
});
popup.open(map);
</script>
</p>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment