Google Maps JavaScript API v3 Example sinketu2 Follow 2011-12-02 22:25:46 License: MIT License Fork0 Fav0 View297 via. Google Maps JavaScript API V3 developers guide http://code.google.com/intl/ja/apis/maps/documentation/javascript/basics.html Play Stop Reload Fullscreen Smart Phone Readme JavaScript 51 lines HTML 22 lines CSS 19 lines via. Google Maps JavaScript API V3 developers guide http://code.google.com/intl/ja/apis/maps/documentation/javascript/basics.html Google Maps JavaScript API v3 Example // Note that using Google Gears requires loading the Javascript // at http://code.google.com/apis/gears/gears_init.js var initialLocation; var siberia = new google.maps.LatLng(60, 105); var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687); var browserSupportFlag = new Boolean(); function initialize() { var myOptions = { zoom: 6, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); // Try W3C Geolocation (Preferred) if(navigator.geolocation) { browserSupportFlag = true; navigator.geolocation.getCurrentPosition(function(position) { initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); map.setCenter(initialLocation); }, function() { handleNoGeolocation(browserSupportFlag); }); // Try Google Gears Geolocation } else if (google.gears) { browserSupportFlag = true; var geo = google.gears.factory.create('beta.geolocation'); geo.getCurrentPosition(function(position) { initialLocation = new google.maps.LatLng(position.latitude,position.longitude); map.setCenter(initialLocation); }, function() { handleNoGeoLocation(browserSupportFlag); }); // Browser doesn't support Geolocation } else { browserSupportFlag = false; handleNoGeolocation(browserSupportFlag); } function handleNoGeolocation(errorFlag) { if (errorFlag == true) { alert("Geolocation service failed."); initialLocation = newyork; } else { alert("Your browser doesn't support geolocation. We've placed you in Siberia."); initialLocation = siberia; } map.setCenter(initialLocation); } } <!DOCTYPE html> <html> <head> <title>Google Maps JavaScript API v3 Example: Map Geolocation</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="UTF-8"> <link href="default.css" rel="stylesheet" type="text/css"> <!-- Include the maps javascript with sensor=true because this code is using a sensor (a GPS locator) to determine the user's location. See: http://code.google.com/apis/maps/documentation/javascript/basics.html#SpecifyingSensor --> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script> <script type="text/javascript" src="setmap.js"></script> </head> <body onLoad="initialize()"> <div id="map_canvas"></div> </body> </html> Google Maps JavaScript API v3 Example html, body { height: 100%; margin: 0; padding: 0; } #map_canvas { height: 100%; } @media print { html, body { height: auto; } #map_canvas { height: 650px; } } via. Google Maps JavaScript API V3 developers guide http://code.google.com/intl/ja/apis/maps/documentation/javascript/basics.html // Note that using Google Gears requires loading the Javascript // at http://code.google.com/apis/gears/gears_init.js var initialLocation; var siberia = new google.maps.LatLng(60, 105); var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687); var browserSupportFlag = new Boolean(); function initialize() { var myOptions = { zoom: 6, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); // Try W3C Geolocation (Preferred) if(navigator.geolocation) { browserSupportFlag = true; navigator.geolocation.getCurrentPosition(function(position) { initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); map.setCenter(initialLocation); }, function() { handleNoGeolocation(browserSupportFlag); }); // Try Google Gears Geolocation } else if (google.gears) { browserSupportFlag = true; var geo = google.gears.factory.create('beta.geolocation'); geo.getCurrentPosition(function(position) { initialLocation = new google.maps.LatLng(position.latitude,position.longitude); map.setCenter(initialLocation); }, function() { handleNoGeoLocation(browserSupportFlag); }); // Browser doesn't support Geolocation } else { browserSupportFlag = false; handleNoGeolocation(browserSupportFlag); } function handleNoGeolocation(errorFlag) { if (errorFlag == true) { alert("Geolocation service failed."); initialLocation = newyork; } else { alert("Your browser doesn't support geolocation. We've placed you in Siberia."); initialLocation = siberia; } map.setCenter(initialLocation); } } <!DOCTYPE html> <html> <head> <title>Google Maps JavaScript API v3 Example: Map Geolocation</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="UTF-8"> <link href="default.css" rel="stylesheet" type="text/css"> <!-- Include the maps javascript with sensor=true because this code is using a sensor (a GPS locator) to determine the user's location. See: http://code.google.com/apis/maps/documentation/javascript/basics.html#SpecifyingSensor --> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script> <script type="text/javascript" src="setmap.js"></script> </head> <body onLoad="initialize()"> <div id="map_canvas"></div> </body> </html> html, body { height: 100%; margin: 0; padding: 0; } #map_canvas { height: 100%; } @media print { html, body { height: auto; } #map_canvas { height: 650px; } } use an iframe compat browser, deer Tweet QR code Embed Design view Code view <script type="text/javascript" src="http://jsdo.it/blogparts/klVkH/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/sinketu2/klVkH" title="Google Maps JavaScript API v3 Example">Google Maps JavaScript API v3 Example - jsdo.it - share JavaScript, HTML5 and CSS</a></p> zip tags Google Maps Tweet twitter Tags Google Maps
