[Google Map] 开发正常例子

视频材料
案例代码

案例一：your_first_map

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map"></div>
<style type="text/css">
  html, body {
    height: 100%;
    margin: 0;
  }
  #map{
    height: 100%;
    margin: 0;
  }
</style>

<script>
    var mapOptions = {
        center: new google.maps.LatLng(37.7831,-122.4039),
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    new google.maps.Map(document.getElementById('map'), mapOptions);
</script>

your_first_map

案例二：markers

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map"></div>
<style type="text/css">
    html, body, #map {
      height: 100%;
      margin: 0;
    }
</style>
<script>
    var mapOptions = {
        center: new google.maps.LatLng(37.7831, -122.4039),
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('map'), mapOptions);

    var markerOptions = {
        position: new google.maps.LatLng(37.7831, -122.4039)
    };
    var marker = new google.maps.Marker(markerOptions);
    marker.setMap(map);
</script>

Markers

案例三：info_windows(可以扩展大量的点，并且添加信息什么的)

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map"></div>
<style type="text/css">
    html, body, #map {
      height: 100%;
      margin: 0;
    }
</style>

<script>
    var mapOptions = {
        center: new google.maps.LatLng(37.7831, -122.4039),
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('map'), mapOptions);

    var markerOptions = {
        position: new google.maps.LatLng(37.7831, -122.4039),
        map: map
    };
    var marker = new google.maps.Marker(markerOptions);
    marker.setMap(map);

    var infoWindowOptions = {
        content: 'Moscone Is Here!'
    };

    var infoWindow = new google.maps.InfoWindow(infoWindowOptions);
    google.maps.event.addListener(marker,'click',function(e){
      infoWindow.open(map, marker);
    });
</script>

info_windows