I've got a problem with Google Map in a hidden div with jQuery toggle code.
Here's the live example: http://provaeur.altervista.org/13.11/
When I click several times on the "DOVE" panel (.dove related to .dovecart, where the map is located), the map acts strangely. I found on the internet the event trigger solution (google.maps.event.trigger(map, "resize")), but I can't apply to my situation... Can somebody help me?
PS: Excuse me for my bad English.
FIRTS JS CODE -- Toggle
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".homecart").hide();
$(".storiacart").hide();
$(".dovecart").hide();
$(".prodotticart").hide();
$(".contcart").hide();
//toggle on a single class
$(".dove").click(function() {
$(".dovecart").slideToggle(1500);
$(".storiacart").hide();
$(".prodotticart").hide();
$(".contcart").hide();
$(".homecart").hide();
});
});
</script>
--- creating gmaps ---
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDol1rmSCdasx76c4TH0UkTpO7pdkzhjnw&sensor=false">
</script>
<script>
var myCenter=new google.maps.LatLng(45.646938,11.301745);
var marker;
function initialize() {
var mapProp = {
center:myCenter,
zoom:7,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
marker=new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE,
icon:'immagini/punt.png'
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"Veniteci a trovare!"
});
/*google.maps.event.trigger(map, "resize");*/
google.maps.event.addListener(marker,'click',function() {
map.setZoom(14);
map.setCenter(marker.getPosition());
infowindow.open(map,marker);
});
}
</script>
<body>
<div id="wrapper">
<header id="conthead">
<div id="headup"></div>
<nav id="menu">
<ul>
<li class="home">Home</li>
<li class="storia">Storia</li>
<li class="dove" onClick="initialize()">Dove...</li>
<li class="prodotti">Prodotti</li>
<li class="contatti">Contatti</li>
</ul>
</nav>
</header>
<section id="cart" class="dovecart">
<div id="hcart"></div>
<div id="bodycart">
<div id="googleMap" style="width:500px;height:300px;"></div>
</div>
</section>
I had a look at your souce code. You have multiple $(document).ready(function()s. I have incorporated them into one and added initialize() to apri() along with $(".dovecart").hide();.
function apri(){
initialize();
$(".homecart").hide();
$(".dovecart").hide();
$(".homecart").slideToggle(1500);
}
$(document).ready(function()
{
$(".home").click(function()
{
$(".homecart").slideToggle(1500);
$(".storiacart").hide();
$(".dovecart").hide();
$(".prodotticart").hide();
$(".contcart").hide();
});
$(".storia").click(function()
{
$(".storiacart").slideToggle(1500);
$(".dovecart").hide();
$(".prodotticart").hide();
$(".contcart").hide();
$(".homecart").hide();
});
$(".dove").click(function()
{
$(".dovecart").slideToggle(1500);
$(".storiacart").hide();
$(".prodotticart").hide();
$(".contcart").hide();
$(".homecart").hide();
// added
initialize();
});
$(".prodotti").click(function()
{
$(".prodotticart").slideToggle(1500);
$(".storiacart").hide();
$(".dovecart").hide();
$(".contcart").hide();
$(".homecart").hide();
});
$(".contatti").click(function()
{
$(".contcart").slideToggle(1500);
$(".storiacart").hide();
$(".dovecart").hide();
$(".prodotticart").hide();
$(".homecart").hide();
});
});
EDIT
initialize() added to $(".dove").click(function()
Related
I have two reCaptcha V2 controls within two forms in one page, one is visible another is invisible. All is fine except the invisible one's data-callback callback - submitSendForm() did not get called. Once I removed the visible one, the invisible one starts working.
So the process is like once user completed the first visible challenge then the second form(within same page) will show with the invisible one, that's when the call back failed to be called.
It hasn't to be one visible and another invisible. But I found this to be easy when you want to have multiple controls.
Here is the code:
using (Html.BeginForm("Verify", "CertificateValidation", FormMethod.Post, new { id = "verifyForm" }))
{
<div class="form-group">
<div class="g-recaptcha" data-sitekey='site-key' data-callback="enableBtn"
style="transform: scale(0.66); transform-origin: 0 0;">
</div>
<div class="col-sm-3">
<button type="submit" id="verify" disabled>Verify</button>
</div>
</div>
}
using (Html.BeginForm("Send", "CertificateValidation", FormMethod.Post, new { id = "sendForm" }))
{
<div id='recaptcha1' class="g-recaptcha"
data-sitekey='site-key'
data-callback="submitSendForm"
data-size="invisible"></div>
<button type="submit">Send</button>
}
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script type="text/javascript">
function submitSendForm() {
console.log('captcha completed.');
$('#sendForm').submit();
}
$('#sendForm').submit(function (event) {
console.log('form submitted.');
if (!grecaptcha.getResponse()) {
console.log('captcha not yet completed.');
event.preventDefault(); //prevent form submit
grecaptcha.execute();
} else {
console.log('form really submitted.');
}
});
var enableBtn = function (g_recaptcha_response) {
$('#verify').prop('disabled', false);
};
$(document).ready(function () {
$('#verify').click(function () {
$captcha = $('#recaptcha');
response = grecaptcha.getResponse();
if (response.length === 0) {
return false;
} else {
return true;
}
});
});
</script>
I got it figured out somehow:
var CaptchaCallback = function () {
grecaptcha.render('RecaptchaField1', { 'sitekey': 'site-key', 'callback': 'enableBtn' });
window.recaptchaField2Id = grecaptcha.render('RecaptchaField2', { 'sitekey': 'site-key', 'callback': 'submitSendForm', 'size': 'invisible' });
};
function submitSendForm() {
$('#sendForm').submit();
}
$('#sendForm').submit(function (event) {
if (!grecaptcha.getResponse(window.recaptchaField2Id)) {
event.preventDefault();
grecaptcha.execute(window.recaptchaField2Id);
}
});
using (Html.BeginForm("Verify", "CertificateValidation", FormMethod.Post, new { id = "verifyForm" }))
{
<div class="form-group">
<div style="transform: scale(0.66); transform-origin: 0 0;" id="RecaptchaField1"></div>
<div class="col-sm-3">
<button type="submit" id="verify" disabled>Verify</button>
</div>
</div>
}
using (Html.BeginForm("Send", "CertificateValidation", FormMethod.Post, new { id = "sendForm" }))
{
<div id="RecaptchaField2"></div>
<button type="submit">Send</button>
}
This one worked for me, clean and easy.
Javascript
var reCaptcha1;
var reCaptcha2;
function LoadCaptcha() {
reCaptcha1 = grecaptcha.render('Element_ID1', {
'sitekey': 'your_site_key'
});
reCaptcha2 = grecaptcha.render('Element_ID2', {
'sitekey': 'your_site_key'
});
};
function CheckCaptcha1() {
var response = grecaptcha.getResponse(reCaptcha1);
if (response.length == 0) {
return false; //visitor didn't do the check
};
};
function CheckCaptcha2() {
var response = grecaptcha.getResponse(reCaptcha2);
if (response.length == 0) {
return false; //visitor didn't do the check
};
};
HTML
<head>
<script src="https://www.google.com/recaptcha/api.js?onload=LoadCaptcha&render=explicit" async defer></script>
</head>
<body>
<div id="Element_ID1"></div>
<div id="Element_ID1"></div>
</body>
I am having collection issues in my Meteor project. I added the following code to my Resolutions.js file:
Resolutions = new Mongo.Collection('resolutions');
if (Meteor.isClient) {
Template.body.helpers({
resolutions: function() {
Resolutions.find({});
}
});
Template.body.events({
'submit .new-resolution': function(event) {
var title = event.target.title.value;
Resolutions.insert({
title: title,
createdAt: new Date()
});
event.target.title.value = "";
return false;
}
});
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
}
and added the following to my Resolutions.html file:
<head>
<title>Resolutions</title>
</head>
<body>
<div class="container">
<header>
<h1>Monthly Resolutions</h1>
<form class="new-resolution">
<input type="text" name="title" placeholder="A new resolution" />
<input type="submit" value="Submit"/>
</form>
</header>
<ul>
{{#each resolutions}}
{{> resolution}}
{{/each}}
</ul>
</div>
</body>
<template name="resolution">
<li>{{title}}</li>
</template>
After running the app I get zero errors but still the site does not return any of the collection value. I have no clue what is wrong with this project.
Template.body.helpers({
resolutions: function() {
return Resolutions.find({});
}
});
You forgot to use the return keyword.Remember that when creating a helper, you always need to return a value.
I've followed the search and zoom example from here: https://developers.google.com/fusiontables/docs/samples/search_and_zoom
and I've managed to get the "Reset" button to work, but the "Search" button isn't working. I wondered if it was because I am using 2 layers, but I don't know how to correct by java script if that is that case. Any help appreciated. Thanks.
<html>
<head>
<meta charset="UTF-8">
<title>Smithfield Foods UK</title>
<link rel="stylesheet" type="text/css" media="all" href="FusionMapTemplate.css" />
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var defaultZoom = 10;
var defaultCenter = new google.maps.LatLng(52.6500, 1.2800)
var locationColumn = 'geometry'
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: defaultCenter,
zoom: defaultZoom,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infoWindow = new google.maps.InfoWindow();
// Initialize the first layer
var FirstLayer = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: '1hpGzmMBg8bDgPOGrAXvc0_QVLSBqQ0O5vpLbfUE'
},
map: map,
styleId: 3,
templateId: 5,
suppressInfoWindows: true
});
google.maps.event.addListener(FirstLayer, 'click', function(e) {windowControl(e, infoWindow, map);
});
// Initialize the second layer
var SecondLayer = new google.maps.FusionTablesLayer({
query: {
select: 'PostCode',
from: '1RrCcRC-1vU0bfHQJTQWqToR-vllSsz9iKnI5WEk'
},
map: map,
styleId: 2,
templateId: 2,
suppressInfoWindows: true
});
google.maps.event.addListener(SecondLayer, 'click', function(e) {windowControl(e, infoWindow, map);
});
var legend = document.createElement('div');
legend.id = 'legend';
var content = [];
content.push('<h3>Density of Polish speaking population</h3>');
content.push('<p><div class="color red1"></div>=>2%<4%');
content.push('<p><div class="color red2"></div>=>4%<6%');
content.push('<p><div class="color red3"></div>=>6%<10%');
content.push('<p><div class="color red4"></div>=>10%<15%');
content.push('<p><div class="color red5"></div>=>15%<20%')
content.push('<p><img src="Smithfield Black.png" alt="Smithfield Logo" width ="120px">');
legend.innerHTML = content.join('');
legend.index = 1;
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
var legend2 = document.createElement('div');
legend2.id = 'legend2';
var content2 = [];
content2.push("<h3>Smithfield Food's sales in Asda Stores</h3>");
content2.push('<p><img src="red-dot.png"><£1,000');
content2.push('<p><img src="yellow-dot.png">=>£1,000<£20,000');
content2.push('<p><img src="green-dot.png">=>£20,000<£40,000');
legend2.innerHTML = content2.join('');
legend2.index = 1;
map.controls[google.maps.ControlPosition.RIGHT_TOP].push(legend2);
var zoomToAddress = function() {
var address = document.getElementById('address').value;
geocoder.geocode({
address: address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
map.setZoom(10);
} else {
window.alert('Address could not be geocoded: ' + status);
}
});
};
google.maps.event.addDomListener(document.getElementById('search'), 'click', zoomToAddress);
google.maps.event.addDomListener(window, 'keypress', function(e) {
if (e.keyCode ==13) {
zoomToAddress();
}
});
google.maps.event.addDomListener(document.getElementById('reset'), 'click', function() {
map.setCenter(defaultCenter);
map.setZoom(defaultZoom);
layer.setOptions({
query: {
select: 'geometry',
from: '1hpGzmMBg8bDgPOGrAXvc0_QVLSBqQ0O5vpLbfUE'
}
});
});
}
// Open the info window at the clicked location
function windowControl(e, infoWindow, map) {
infoWindow.setOptions({
content: e.infoWindowHtml,
position: e.latLng,
pixelOffset: e.pixelOffset
});
infoWindow.open(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div>
<label>Enter an address:</label>
<input type="text" id="address" value="Leeds">
<input type="button" id="search" value="Search">
<input type="button" id="reset" value="Reset">
</div>
</body>
</html>
I get a "geocoder is undefined" error". Because it isn't defined.
One way to fix it would be to add this to the global scope (just before your initialize function):
var geocoder = new google.maps.Geocoder();
Or you could do it the way it is done in the example you used, it is inside the initialize function there.
working example
I'm trying to build an interactive map using google's map api v3. The idea is to populate a list of markers on the map with some text using asp.
Creating the map, original markers, and content was straightforward, but now I'd like a list of links to the various markers outside of the map. When an item on the list is clicked I'd like it to pan to the location and open the respective text box (infowindow).
Everything works except I can't get the info window to open. Can anyone suggest what I'm doing wrong here?
<script type="text/javascript">
var MapStart = new google.maps.LatLng(32.036020,34.760742);
var marker;
var map;
var infowindow = new google.maps.InfoWindow();
function initialize() {
var mapOptions = {
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: MapStart
};
map = new google.maps.Map(document.getElementById("map"),
mapOptions);
<%
varCount = 0
while not rsListItem.EOF
varCount = varCount + 1
varLong = rsListItem.Fields.Item("custom_text1").Value
varLat = rsListItem.Fields.Item("custom_text2").Value
%>
var marker<%=varCount%> = new google.maps.Marker({
position: new google.maps.LatLng(<%=varLong%>,<%=varLat%>),
map: map,
animation: google.maps.Animation.DROP,
title : "<%=rsListItem.Fields.Item("heading").Value%>"
});
google.maps.event.addListener(marker<%=varCount%>, 'click', function() {
map.panTo(new google.maps.LatLng(<%=varLong%>, <%=varLat%>));
infowindow.setContent('<%=(rsListItem.Fields.Item("brief").Value)%>');
infowindow.open(map,marker<%=varCount%>);
});
<%
rsListItem.MoveNext()
Wend
rsListItem.Close()
Set rsListItem = Nothing
%>
}
$(document).ready(function() {
$("#map_list ul li").click(function() {
markerID = this.id;
markerContent = $("div.marker_brief",this).html();
varLong = $("div.marker_long",this).html();
varLat = $("div.marker_lat",this).html();
map.panTo(new google.maps.LatLng(varLong, varLat));
infowindow.setContent(markerContent)
infowindow.open(map,markerID);
});
});
</script>
<div id="map"></div>
<div id="map_list">
<ul>
<%
vtype=100160
Call ListItem(vtype,langId)
varCount = 0
while not rsListItem.EOF
varCount = varCount + 1
varLong = rsListItem.Fields.Item("custom_text1").Value
varLat = rsListItem.Fields.Item("custom_text2").Value
%>
<li id="marker<%=varCount%>"><%=rsListItem.Fields.Item("heading").Value%>
<div class="marker_brief"><%=rsListItem.Fields.Item("brief").Value%></div>
<div class="marker_long"><%=varLong%></div>
<div class="marker_lat"><%=varLat%></div>
</li>
<%
rsListItem.MoveNext()
Wend
rsListItem.Close()
Set rsListItem = Nothing
%>
</ul>
</div>
You need to store your markers in an array that can be used later. Right now the code
markerID = this.id;
Is just going to be set to "marker1", it isn't actually the marker object. You need to create a collection of markers:
var markers = new Array();
After you create a marker you need to store it in the array:
markers.push(marker);
When your <li> element receives a click event you need to retrieve the marker from the array of markers:
marker = markers[this.id];
Here is a working example:
<html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var MapStart = new google.maps.LatLng(38.634036,-111.785889);
var markers;
var map;
var infowindow = new google.maps.InfoWindow();
function initialize() {
markers = new Array();
var mapOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: MapStart
};
map = new google.maps.Map(document.getElementById("map"),
mapOptions);
$("#map_list ul li").each(function(index) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng($(this).children(".marker_long").text(), $(this).children(".marker_lat").text()),
map: map,
animation: google.maps.Animation.DROP,
title : $(this).children(".marker_title").text(),
brief: $(this).children(".marker_brief").text()
});
google.maps.event.addListener(marker, 'click', function() {
map.panTo(new google.maps.LatLng(marker.position.Sa, marker.position.Ta));
infowindow.setContent(marker.brief);
infowindow.open(map,marker);
});
markers.push(marker);
});
}
$(document).ready(function(){
$("#map_list ul li").click(function(){
marker = markers[this.id];
markerContent = $("div.marker_brief",this).html();
varLong = $("div.marker_long",this).html();
varLat = $("div.marker_lat",this).html();
map.panTo(new google.maps.LatLng(varLong, varLat));
infowindow.setContent(markerContent)
infowindow.open(map,marker);
});
});
</script>
</head>
<body onload='initialize();'>
<div id="map" style="width: 450px; height: 350px;"></div>
<div id="map_list">
<ul>
<li id="0">
<div class="marker_title">Salt Lake City</div>
<div class="marker_brief">Capital of Utah</div>
<div class="marker_long">40.763901</div>
<div class="marker_lat">-111.901245</div>
</li>
<li id="1">
<div class="marker_title">Provo</div>
<div class="marker_brief">Location of BYU</div>
<div class="marker_long">40.25228</div>
<div class="marker_lat">-111.659546</div>
</li>
</ul>
</div>
</body>
</html>
I have a code:
<script src="http://maps.google.com/maps?file=api&v=2.s&key=ABQIAAAA7DHqr4azRz3GFI1rF3F05RTzDhEz38nzyWFNvKs6H8gdGpqkAhQDDMdxJ-xDhaiiIJRibJNuURlZOw"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallZoomControl());
var MapTypes = map.getMapTypes();
MapTypes[0].getName= function() { return "Mapa";}
MapTypes[1].getName = function() { return "Satelitarna";}
MapTypes[2].getName = function() { return "Hybrydowa";}
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(52.7592485, 19.4559833), 6);
var marker = new GMarker(new GLatLng(54.1943219, 16.1714908));
map.addOverlay(marker);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 400px"></div>
</body>
Variable "marker" is responsible for mark place on map. Now I must to enter coordinates.
I need mark city, but name of the city, no coordinates.
Look into the geocoding API: http://code.google.com/intl/sv-SE/apis/maps/documentation/geocoding/.