how to ask for location then display with google maps

Question

I want to write a program that will ask the users location using modernizer and display it using google maps. The most I could get up to was using geolocation to find your location coordinates, and trying to use the google maps api to get a map on my page. jsfiddle.net/DavDaBomb21/279fbf8b/

Can you please tell me how I use both together in order to display a map on a webpage? Thanks

Answer 1

Simple way would be:

 function geoSuccess(position) { var long = position.coords.longitude; var lat = position.coords.latitude; $('.map-container').html( '<iframe width="300" height="170" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?q=' + lat + ',' + long + '&hl=es;z=14&amp;output=embed"></iframe>' ); }; function geoFail() { /* Not supported */ }; if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(geoSuccess, geoFail); };

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="map-container"></div>

It won't work here, either on JSFiddle , but you can try in IE if you enable geolocation or on secure HTTPS website - it works just fine.