Quiero saber como anadir una carta dentre de una pagina web que estoy desarollando. En efecto, intenté de usar la pagina web de developers.google.com para las Maps JavaScript API. Sin embargo, después de agregar el código en las partes que lo necesitan en mi opinión, después de agregar mi clave API, no apareció sobre la pagina web.
Aqui esta el repositorio sobre Bitbucket.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- build:css css/main.css -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap-social.css">
<link href="css/styles.css" rel="stylesheet">
<!-- endbuild -->
<!-- Added link by Santiago Roldan from es.stackoverflow.com -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<!--#meta charset="utf-8">
<!--#meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--#meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head
content must come *after* these tags -->
<title>Find your musician</title>
<!-- Bootstrap -->
<!--#link href="css/bootstrap.min.css" rel="stylesheet">
<!--#link href="css/bootstrap-theme.min.css" rel="stylesheet">
<!--#link href="css/mystyles.css" rel="stylesheet">
<!--#link href="css/font-awesome.min.css" rel="stylesheet">
<!--#link href="css/bootstrap-social.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Info windows</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-toggleable-sm fixed-top" role = "navigation">
<div class="container">
<a class="navbar-brand" href="#"><img src="img/logo.png" height="30" width="41"></a>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav nav">
<li class="nav-item active"><a class="nav-link" href="#"><span class="fa fa-home fa-lg"></span> Home</a></li>
<li class="nav-item"><a class="nav-link" href="./aboutus.html"><span class="fa fa-info fa-lg"></span> About</a></li>
<li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-list fa-lg"></span> Menu</a></li>
<li class="nav-item"><a class="nav-link" href="./contactus.html"><span class="fa fa-address-card fa-lg"></span> Contact</a></li>
</ul>
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" data-toggle="modal" data-target="#loginModal"><span class="fa fa-sign-in"></span> Login</a></li>
</ul>
</div>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<div id="loginModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg" role="content">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login </h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control form-control-sm mr-1" id="exampleInputEmail3" placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control form-control-sm mr-1" id="exampleInputPassword3" placeholder="Password">
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary btn-sm">Sign in</button>
</div>
</div>
</div>
</div>
<header class="jumbotron">
<!-- Main component for a primary marketing message or call to action -->
<div class="container">
<div class="row row-header">
<div class="col-12 col-sm-12">
<h1>Find your musician</h1>
<p style="padding:40px;"></p>
<p>You wish to play and have no band ? A thousands profiles wait for you here to join you or teach you how to pass wolrd level auditions</p>
</div>
<div class="col col-sm align-self-center">
<p style="padding:20px;"></p>
<img src="img/logo.png" class="img-fluid">
</div>
<div class="col-12 col-sm align-self-center">
<p style="padding:40px;"></p>
<a type="button" class="btn btn-warning btn-sm btn-block" data-toggle="modal" data-target="#myModal">Create a profile</a>
</div>
</div>
</div>
</header>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
<h4 class="modal-title" id="exampleModalLabel">Create a profile</h5>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">Number of Guests</label>
<div class="radio col-sm-10">
<label class="radio-inline"><input name="guests" type="radio" value=""> 1 </label>
<label class="radio-inline"><input name="guests" type="radio" value=""> 2 </label>
<label class="radio-inline"><input name="guests" type="radio" value=""> 3 </label>
<label class="radio-inline"><input name="guests" type="radio" value=""> 4 </label>
<label class="radio-inline"><input name="guests" type="radio" value=""> 5 </label>
<label class="radio-inline"><input name="guests" type="radio" value=""> 6 </label>
</div>
</div>
<div class="form-group">
<label for="date" class="col-sm-2 control-label">Date and Time</label>
<div class="col-sm-4 has-feedback">
<input type="text" class="form-control" id="date" placeholder="Date">
<i class="glyphicon glyphicon-calendar form-control-feedback"></i>
</div>
<div class="col-sm-4 has-feedback">
<input type="text" class="form-control" id="time" placeholder="Time">
<i class="glyphicon glyphicon-time form-control-feedback"></i>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-push-2">
<a class="btn btn-primary" type="submit" href="#">Reserve</a>
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Cancel</button>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-push-1 alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<p><strong>Warning:</strong> Please <a href="tel:85212345678" class="alert-link">call</a> us to reserve for more than six guests</p>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!--Carroussel-->
<div class="container">
<div class="row row-content">
<div class="col">
<div id="mycarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid"
src="img/chanteurGuitariste.jpeg" alt="Uthappizza">
<div class="carousel-caption d-none d-md-block">
<h2>Bernard <span class="badge badge-danger">HOT</span> <span class="badge badge-pill badge-default">$19.99/hour</span></h2>
<p class="hidden-xs-down">Teacher, a unique combination of Indian singing and guitar playing</p>
</div>
</div>
<div class="carousel-item">
<img class="media-object img-thumbnail" src="img/batteur.jpeg" alt="Buffet">
<div class="carousel-caption d-none d-md-block">
<h2>James</h2>
<p>Super drummer wishing to play with anybody on any styles</p>
<p><a class="btn btn-primary btn-xs"href="#">More »</a></p>
</div>
</div>
<div class="carousel-item">
<img class="d-flex mr-3 img-thumbnail align-self-center" src="img/guitariste.jpg" alt="Alberto Somayya">
<div class="carousel-caption d-none d-md-block">
<h2 class="mt-0">Alberto Somayya</h2>
<p class="hidden-xs-down">Love Django Reinhardt. Anyone to play with me?
</p>
</div>
</div>
</div>
<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0" class="active"></li>
<li data-target="#mycarousel" data-slide-to="1"></li>
<li data-target="#mycarousel" data-slide-to="2"></li>
</ol>
<a class="carousel-control-prev" href="#mycarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#mycarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
<div class="btn-group" id="carouselButtons">
<button class="btn btn-danger btn-sm" id="carousel-button">
<span id="carousel-button-icon" class="fa fa-pause"></span>
</button>
</div>
</div>
</div>
</div>
<div class="row row-content align-items center">
<div id="map"></div>
</div>
</div>
<footer class="row-footer">
<div class="container">
<div class="row">
<div class="col-xs-5 col-xs-offset-1 col-sm-2 col-sm-offset-1">
<h5>Links</h5>
<ul class="list-unstyled">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="col-xs-6 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
<i class="fa fa-phone"></i>: +852 1234 5678<br>
<i class="fa fa-fax"></i>: +852 8765 4321<br>
<i class="fa fa-envelope"></i>: <a href="mailto:[email protected]">[email protected]</a>
</address>
</div>
<div class="col-xs-12 col-sm-4">
<div class="nav navbar-nav" style="padding: 40px 10px;">
<a class="btn btn-social-icon btn-google-plus" href="http://google.com/+"><i
class="fa fa-google-plus"></i></a>
<a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id="><i
class="fa fa-facebook"></i></a>
<a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i
class="fa fa-linkedin"></i></a>
<a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i class="fa fa-twitter"></i></a>
<a class="btn btn-social-icon btn-youtube" href="http://youtube.com/"><i class="fa fa-youtube"></i></a>
<a class="btn btn-social-icon" href="mailto:"><i class="fa fa-envelope-o"></i></a>
</div>
</div>
<div class="col-xs-12">
<p style="padding:10px;"></p>
<p align=center>© Copyright 2015 Ristorante Con Fusion</p>
</div>
</div>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!-- # script src="js/bootstrap.min.js"></script>
<!-- build:js js/main.js -->
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/tether/dist/js/tether.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
<!-- endbuild -->
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<script>
$('#myModal').modal.("show")
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus()
})
</script>
<script src="js/scripts.js"></script>
<script>
// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
'<div id="bodyContent">'+
'<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
'sandstone rock formation in the southern part of the '+
'Northern Territory, central Australia. It lies 335 km (208 mi) '+
'south west of the nearest large town, Alice Springs; 450 km '+
'(280 mi) by road. Kata Tjuta and Uluru are the two major '+
'features of the Uluru - Kata Tjuta National Park. Uluru is '+
'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
'Aboriginal people of the area. It has many springs, waterholes, '+
'rock caves and ancient paintings. Uluru is listed as a World '+
'Heritage Site.</p>'+
'<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
'(last visited June 22, 2009).</p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: uluru,
map: map,
title: 'Uluru (Ayers Rock)'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&callback=initMap">
</script>
</body>
</html>