javascript - Google Maps API. Address disappears before showing when I submit my form -
i want show user's address google maps api after has submitted form resets map after submit. how can input information form (where information dissappears form) , keep google api showing location?
here's code:
var user = function user (name, address, email, phone, website) { this.name = name; this.address = address; this.email = email; this.phone = phone; this.website = website; return this; }; var mystorage = window.localstorage; $(document).ready(function () { $("#form").submit(function () { var inputs = $("#form :input"); var values = []; inputs.each(function () { values.push($(this).val()); }); var name = values[0]; var address = values[1]; var email = values[2]; var phone = values[3]; var website = values[4]; var user = new user(name, address, email, phone, website); mystorage.setitem(email, user); }); });#calculator { width: 310px; height: 360px; margin: 10px auto; padding: 5px; background-color: #999; border: 3px solid black; border-radius: 10px; text-decoration: none; } #total { height: 70px; width: 300px; display: block; margin:auto; background-color:white; margin-bottom: 5px; text-align: right; font-size: 60px; padding: 0 5px; white-space:nowrap; overflow:auto; } input { width: 60px; height: 45px; padding: auto; margin: 5px 6px; text-align: center; border-radius: 10px; font-size: 40px; vertical-align: middle; word-wrap: break-word; } #equals { width: 215px; } #clearall { font-size: 30px; }<!doctype html> <html lang="en"> <head> <script src="https://code.jquery.com/jquery-2.1.0.js"></script> <link rel="stylesheet" type="text/css" href="css/style.css"> <script language="javascript" type="text/javascript" src="./../controller/main.js"></script> <script language="javascript" type="text/javascript" src="./../model/user.js"></script> <script src="https://maps.googleapis.com/maps/api/js?key=aizasycv7ceqzgomnus_dximf98xvwbfty5-w4o&libraries=geometry"> </script> </head> <body onload="initialize()"> <div id="context"> <div id="inputform"> <form id="form" > <label><b>name:</b></label><input type="text" name="name" autofocus required> <label><b>address:</b></label><input type="text" id="address" name="address" required> <label><b>email:</b></label><input type="email" name="email" required> <label><b>phone:</b></label><input type="tel" name="phone" required> <label><b>website:</b></label><input type="url" name="website" required> <input type="submit" value="submit" id="submit" onclick="codeaddress()" > </form> </div> <div id="map"> </div> </div> <script> var geocoder; var map; function initialize() { geocoder = new google.maps.geocoder(); var latlng = new google.maps.latlng(-34.397, 150.644); var mapoptions = { zoom: 8, center: latlng } map = new google.maps.map(document.getelementbyid('map'), mapoptions); } function codeaddress() { var addressid = document.getelementbyid('address').value; geocoder.geocode( { 'address': addressid}, function(results, status) { if (status == 'ok') { map.setcenter(results[0].geometry.location); var marker = new google.maps.marker({ map: map, position: results[0].geometry.location }); } else { alert('geocode not successful following reason: ' + status); } }); } </script> </body> </html>i want the google maps api hidden until form submitted , shown after have info show fraction of second. can help?
here's why you're experiencing flicker:
- your form submitting same page because that's default of forms when no action specified. on submit, should
event.preventdefault();stop it. - if
onload=initialize()won't able hide , show jquery hide/show. if plan show form first, initialize map after form submission.
i simplified code , made more simple , closer geocodezip recommends minimal, complete, , verifiable example.
hope helps.
var geocoder; var map; function initialize() { geocoder = new google.maps.geocoder(); var latlng = new google.maps.latlng(-34.397, 150.644); var mapoptions = { zoom: 4, center: latlng } map = new google.maps.map(document.getelementbyid('map'), mapoptions); } function codeaddress() { var addressid = document.getelementbyid('address').value; geocoder.geocode( { 'address': addressid}, function(results, status) { if (status == 'ok') { map.setcenter(results[0].geometry.location); var marker = new google.maps.marker({ map: map, position: results[0].geometry.location }); } else { alert('geocode not successful following reason: ' + status); } }); } $(document).ready(function () { $("#form").submit(function (event) { event.preventdefault(); initialize(); codeaddress() $('#map').removeclass('hidden'); $('#inputform').hide(); }); });input { display: block; margin: 15px; } #map { height: 500px; }<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>js bin</title> </head> <body> <div id="inputform"> <form id="form" > <label><b>address:</b></label><input type="text" id="address" name="address" required> <input type="submit" value="submit" id="submit" > </form> </div> <div id="map"></div> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <script src="https://maps.googleapis.com/maps/api/js?key=aizasycv7ceqzgomnus_dximf98xvwbfty5-w4o" async defer></script> </body> </html>
Comments
Post a Comment