Create your own Google GEO chart blog announcement enhanced version

Today, I saw an article in PHP Huaibei in the blog Park to create my own Google map blog announcement [demo + Source Code]. I think it is very good, I immediately copied the source code to my blog and tried it. I felt very good. The only drawback was that the positioning was not accurate and I could only locate it at the municipal level, just two days ago, we saw that HTML5 supports browser positioning. Therefore, we decided to transform the code and use the HTML5 positioning function to determine the location where the map is displayed, if it is not supported, use the original address that is located at the city level.

 

First, paste the HTML5 browser positioning code

 

HTML5 positioning code if (navigator. geolocation) {browsersupportflag = true; navigator. geolocation. getcurrentposition (function (position) {initiallocation = new Google. maps. latlng (position. coords. latitude, position. coords. longpolling); 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. longpolling); map. setcenter (initiallocation) ;}, function () {handlenogeolocation (callback) ;}); // browser doesn' t support geolocation} else {browsersupportflag = false; handlenogeolocation (browsersupportflag );}

This code first checks whether browser positioning is supported. If not, checks whether Google is supported. if gears is not supported or other errors occur, call the handlenogeolocation function to return and locate the city level.

 

Handlenogeolocation function handlenogeolocation (errorflag) {If (geocoder) {geocoder. geocode ({'address': Address}, function (results, status) {If (status = Google. maps. geocoderstatus. OK) {map. setcenter (results [0]. geometry. location); var marker = new Google. maps. marker ({map: map, position: Results [0]. geometry. location, Title: 'location '});}});}}

The complete code is as follows:

 

<Script language = "JavaScript" type = "text/JavaScript" src = "http://int.dpool.sina.com.cn/iplookup/iplookup.php? Format = JS "> </SCRIPT> <! -- Call Google map JS, zoom, center, maptypeid map type --> <SCRIPT type = "text/JavaScript" src = "http://ditu.google.com/maps/api/js? Sensor = true "> </SCRIPT> <script language =" JavaScript "> var geocoder; var map; geocoder = new Google. maps. geocoder (); var address = remote_ip_info.country + remote_ip_info.province + remote_ip_info.city; function initialize () {var latlng = new Google. maps. latlng (39.9493, 116.3975); var myoptions = {ZOOM: 15, maptypeid: Google. maps. maptypeid. roadmap}; document. getelementbyid ('add '). innerhtml = "Welcome from:" + Address + "friends! "; Map = new Google. maps. map (document. getelementbyid ("map_canvas"), myoptions); var initiallocation; var browsersupportflag = new Boolean (); If (navigator. geolocation) {browsersupportflag = true; navigator. geolocation. getcurrentposition (function (position) {initiallocation = new Google. maps. latlng (position. coords. latitude, position. coords. longpolling); 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. longpolling); map. setcenter (initiallocation) ;}, function () {handlenogeolocation (browsersupportflag) ;}); // browser doesn' t support geolocation} else {browsersupportflag = false; handlenogeolocation (browsersupportflag);} function handlenogeolocation (errorflag) {If (geocoder) {geocoder. geocode ({'address': Address}, function (results, status) {If (status = Google. maps. geocoderstatus. OK) {map. setcenter (results [0]. geometry. location); var marker = new Google. maps. marker ({map: map, position: Results [0]. geometry. location, Title: 'location'}) ;}}}</SCRIPT> <body onload = "initialize () "> <Div id =" add "style =" text-align: center; "> </div> <Div id =" map_canvas "style =" width: 230px; height: 280px; "> </div>

 

You just need to copy the code to the announcement board. If you do not know where the announcement board is, go to the settings in the background of the blog garden and drag the page down to find the announcement board.

 

The Code passes the test on ie9, firfox6, and chrome. If browser positioning is supported, a prompt will pop up asking you to use browser positioning.

 

For more information, see enjoy in the upper-left corner of this article!