Home >Web Front-end >JS Tutorial >Solution to Google Maps not opening_javascript skills

Solution to Google Maps not opening_javascript skills

WBOYOriginal: 2016-05-16 16:40:122023browse

Google Maps is blocked by the Great Firewall of China, so there is no need to directly quote the Google Maps API under the domain name http://maps.googleapis.com/maps/api/js?sensor=false&language=en. Instead, change it to http:/ For the address /maps.google.cn/maps/api/js?sensor=false, the domestic domain name of google.cn has not been blocked and can be used.

Note: Although google.cn can be used, it will output some js to reference the resources of google.com, which will cause a delay in map rendering, so do not put the Google Maps API in front of your content, such as in the head tag. Instead, place it at the end of the content or HTML end tag to prevent your page content from being blank and the browser being unable to display the content.

Do not use the window.onload event to draw, otherwise the Google map will not be displayed in time because the resources of google.com need to be loaded, and the google.com resources are intercepted, which will cause the request to time out (about 2 minutes). Draw out Google Maps.

Use Google's callback parameter to pass a callback function name. After testing, this method renders the Google map faster than using the window.onload event.

Sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网站引用谷歌地图打不开解决办法:使用google.cn</title>
</head>

<body>

<div id="map_canvas" class="map" style="height: 350px;width: 500px;"></div></body>
<script type="text/javascript" src="http://maps.google.cn/maps/api/js&#63;sensor=false&callback=renderGoogleMap"></script>
<script type="text/javascript">
  function renderGoogleMap() {
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({ 'address': '广西桂林市中心广场' }, function (results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
    var mapOptions = {
      zoom: 17,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  }
</script>

</body>
</html>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Summary of js event listening mechanism (event capture)_javascript skillsNext article：Summary of js event listening mechanism (event capture)_javascript skills

See more

Solution to Google Maps not opening_javascript skills

Related articles