2 replies · opened Sep 30, 2016
Hello
Google maps is not working on my contact page. I already got an API Key and included it following the examples in similar topics. Please look into my file, the maps is showing blank and i cannot find where is the error.
Thank you very much
`<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="SemiColonWeb" />
<!-- Stylesheets
============================================= -->
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,400italic,600,700|Raleway:300,400,500,600,700|Crete+Round:400italic" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="css/dark.css" type="text/css" />
<link rel="stylesheet" href="css/font-icons.css" type="text/css" />
<link rel="stylesheet" href="css/animate.css" type="text/css" />
<link rel="stylesheet" href="css/magnific-popup.css" type="text/css" />
<link rel="stylesheet" href="css/responsive.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<span class="color"></span>
<link rel="stylesheet" href="css/colors.css" type="text/css" />
<!-- Document Title
============================================= -->
<title>Contacto | Recurso V</title>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-68183562-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body class="stretched no-transition">
<!-- Document Wrapper
============================================= -->
<div id="wrapper" class="clearfix">
<!-- Header
============================================= -->
<header id="header" class="full-header">
<div id="header-wrap">
<div class="container clearfix">
<div id="primary-menu-trigger"><i class="icon-reorder"></i></div>
<!-- Logo
============================================= -->
<div id="logo">
<a href="index.html" class="standard-logo" data-dark-logo="images/logo-dark.png"><img src="images/logo.png" alt="Canvas Logo"></a>
<a href="index.html" class="retina-logo" data-dark-logo="images/logo-dark@2x.png"><img src="images/logo@2x.png" alt="Canvas Logo"></a>
</div><!-- #logo end -->
<!-- Primary Navigation
============================================= -->
<nav id="primary-menu">
<ul>
<li class="mega-menu"><a href="index.html"><div>Inicio</div></a>
</li>
<li class="mega-menu"><a href="nosotros.html"><div>¿Por qué Nosotros?</div></a>
<li class="mega-menu"><a href="servicios.html"><div>Servicios</div></a>
</li>
<li class="current"><a href="contacto.html"><div>Contacto</div></a>
</li>
</ul>
</nav><!-- #primary-menu end -->
</div>
</div>
</header><!-- #header end -->
<!-- Page Title
============================================= -->
<!-- Content
============================================= -->
<section id="content">
<div class="section parallax dark notopmargin noborder" style="padding: 80px 0; background-image: url('images/parallax/home/home2.jpg');" data-stellar-background-ratio="0.4">
<div class="container center clearfix">
<div class="emphasis-title">
<h2>Contacto</h2>
</div>
</div>
</div>
<div class="content-wrap">
<div class="container clearfix">
<!-- Contact Form
============================================= -->
<div class="col_half">
<div class="contact-widget">
<div class="contact-form-result"></div>
<form class="nobottommargin" id="template-contactform" name="template-contactform" action="include/sendemail.php" method="post">
<div class="form-process"></div>
<div class="col_one_third">
<label for="template-contactform-name">Nombre <small>*</small></label>
<input type="text" id="template-contactform-name" name="template-contactform-name" value="" class="sm-form-control required" />
</div>
<div class="col_one_third">
<label for="template-contactform-email">Email <small>*</small></label>
<input type="email" id="template-contactform-email" name="template-contactform-email" value="" class="required email sm-form-control" />
</div>
<div class="col_one_third col_last">
<label for="template-contactform-phone">Teléfono</label>
<input type="text" id="template-contactform-phone" name="template-contactform-phone" value="" class="sm-form-control" />
</div>
<div class="clear"></div>
<div class="col_two_third">
<label for="template-contactform-subject">Asunto <small>*</small></label>
<input type="text" id="template-contactform-subject" name="template-contactform-subject" value="" class="required sm-form-control" />
</div>
<div class="col_one_third col_last">
<label for="template-contactform-service">Servicio</label>
<select id="template-contactform-service" name="template-contactform-service" class="sm-form-control">
<option value="">-- Selecciona Uno --</option>
<option value="Diseno">Diseño e Ingeniería</option>
<option value="Certificacion">Certificaciones</option>
<option value="EMAP">Evaluación de Productos</option>
<option value="Cursos">Cursos y Capacitación</option>
</select>
</div>
<div class="clear"></div>
<div class="col_full">
<label for="template-contactform-message">Mensaje <small>*</small></label>
<textarea class="required sm-form-control" id="template-contactform-message" name="template-contactform-message" rows="6" cols="30"></textarea>
</div>
<div class="col_full hidden">
<input type="text" id="template-contactform-botcheck" name="template-contactform-botcheck" value="" class="sm-form-control" />
</div>
<div class="col_full">
<button name="submit" type="submit" id="submit-button" tabindex="5" value="Submit" class="button button-3d nomargin">Envía Comentario</button>
</div>
</form>
</div>
</div><!-- Contact Form End -->
<!-- Google Map
============================================= -->
<div class="col_half col_last">
<!-- Google Map
============================================= -->
<section id="google-map" class="gmap bottommargin" style="height: 300px;"></section>
</div><!-- Google Map End -->
<div class="clear"></div>
</div>
</div>
<div class="content-wrap">
<div class="container clearfix">
<div class="clear"></div>
</div>
</div>
</section><!-- #content end -->
<!-- Footer
============================================= -->
<footer id="footer" class="dark">
<div class="container">
<!-- Footer Widgets
============================================= -->
<div class="footer-widgets-wrap clearfix">
<div class="row">
<div class="col-md-3 bottommargin">
<div class="col_full">
<div class="widget clearfix">
<div>
<address>
<strong>Oficina:</strong><br>
Torre Lovft, M-1, L-4<br>
Francisco Villa 123<br>
Col. El Aguacatal<br>
Santa Catarina, NL. 66197<br>
</address>
</div>
</div>
</div>
</div>
<div class="col-md-3 bottommargin">
<strong>Contacto:</strong><br>
<abbr title="Phone Number"><strong>Teléfono:</strong></abbr> (81) 2141 0971<br>
<abbr title="Email Address"><strong>Email:</strong></abbr> hola@recursov.com
</div>
<div class="col-md-3 bottommargin">
<div class="row">
<div class="col-md-6 clearfix bottommargin-sm">
<a href="#" class="social-icon si-dark si-facebook nobottommargin" style="margin-right: 10px;">
<i class="icon-facebook"></i>
<i class="icon-facebook"></i>
</a>
<a href="#"><small style="display: block; margin-top: 3px;"><strong>Siguenos</strong><br>en Facebook</small></a>
</div>
<div class="col-md-6 clearfix">
<a href="#" class="social-icon si-dark si-rss nobottommargin" style="margin-right: 10px;">
<i class="icon-linkedin"></i>
<i class="icon-linkedin"></i>
</a>
<a href="#"><small style="display: block; margin-top: 3px;"><strong>Siguenos</strong><br>en Linkedin</small></a>
</div>
</div>
</div>
<div class="col-md-3 bottommargin">
</div>
</div>
<div class="widget clearfix" style="margin-bottom: -20px;">
</div>
</div>
</div>
</footer><!-- #footer end -->
</div><!-- #wrapper end -->
<!-- Go To Top
============================================= -->
<div id="gotoTop" class="icon-angle-up"></div>
<!-- External JavaScripts
============================================= -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/plugins.js"></script>
<!-- Footer Scripts
============================================= -->
<script type="text/javascript" src="js/functions.js"></script><script type="text/javascript" src="1
https://maps.google.com/maps/api/js?key=AIzaSyAA9Z_1HumeWA6I4eyU0kwuAtWu6sQ_ROQ"></script>
<script type="text/javascript" src="js/jquery.gmap.js"></script>
<script type="text/javascript">
jQuery('#google-map').gMap({
latitude: -37.9712369,
longitude: 144.4926746,
maptype: 'ROADMAP',
zoom: 9,
markers: [
{
address: "Melbourne, Australia",
html: '<div style="width: 300px;"><h4 style="margin-bottom: 8px;">Hi, we\'re <span>Envato</span></h4><p class="nobottommargin">Our mission is to help people to <strong>earn</strong> and to <strong>learn</strong> online. We operate <strong>marketplaces</strong> where hundreds of thousands of people buy and sell digital goods every day, and a network of educational blogs where millions learn <strong>creative skills</strong>.</p></div>',
icon: {
image: "images/icons/map-icon-red.png",
iconsize: [32, 39],
iconanchor: [13,39]
}
}
],
doubleclickzoom: false,
controls: {
panControl: true,
zoomControl: true,
mapTypeControl: true,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false
}
});</script>
<script>
$(function() {
$( "#side-navigation" ).tabs({ show: { effect: "fade", duration: 100 } });
});
</script>
</body>
</html>
Hello,
Can you please provide us with a Live URL so that we can check out the exact issue and provide you with a more accurate solution for this. Thanks for your Patience.
Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard