首发于中小型留学机构的运作

如何利用Google Map Api来定制地图

流星云

物理

作为一个留学申请机构，肯定需要制作宣传册，其中包含对每一个学校的介绍。而对于学校的介绍则少不了对学校地址的介绍。因此，根据我制作宣传册的经验，下面来写一个如何制作地图的教程。

因为需要英国高中的地图，因此必须选用Google Map。

1. 需要学会如何科学上网，这里不再赘述。

styles: [
        ...
 {
    featureType: 'water',
    elementType: 'geometry',
    stylers: [{color: '#17263c'}]
 },
 {
    featureType: 'water',
    elementType: 'labels.text.fill',
    stylers: [{color: '#515c6d'}]
 },
 {
    featureType: 'water',
    elementType: 'labels.text.stroke',
    stylers: [{color: '#17263c'}]
 }
]

因此可想而知，这段代码管理的是水域的颜色，在elementType是geometry时，只需要改变后面的color就行。这里是用16进制编码的，所以应该是#ffffff来表示白色。效果图如下：

3.2 如何确定地图的大小和位置

首先，要先定义一个地址：

  var center = new google.maps.LatLng(54.3028, -4.5);

第一个为latitude，第二个为longitude。这两个数字需要多次尝试才能够确定。

然后，在地图的initializer上，有三个变量，style前面已经说过了，zoom则是地图的缩放大小，这个也需要多次尝试灿能够确定；最后，在center后面引入刚才定义的变量，当然也可以在这里自己定义一个：

map = new google.maps.Map(document.getElementById('map'), {
    center: center,
    zoom: 5,
    styles: [...]

3.3 如何在地图上进行搜索

这里我们可以再次利用一个example： place search。具体的地图长成这样：

与正常的Google Map一样。

这里首先需要三个变量：

      var map; \\地图
      var service; \\搜索功能
      var infowindow; \\信息窗

下面需要一个搜索的function：

     function createMarker(place) {
        var marker = new google.maps.Marker({
          map: map,
          position: place.geometry.location
        });

        google.maps.event.addListener(marker, 'click', function() {
          infowindow.setContent(place.name);
          infowindow.open(map, this);
        });
      }

在主要的initMap() function里，还需要添加如下：

添加infowindow

 infowindow = new google.maps.InfoWindow(); \\Initiate infowindow

下面需要输入需要搜索的内容：

var request = {
          query: 'Museum of Contemporary Art Australia',
          fields: ['name', 'geometry'],
        };

最后，添加service：

 service = new google.maps.places.PlacesService(map);

        service.findPlaceFromQuery(request, function(results, status) {
          if (status === google.maps.places.PlacesServiceStatus.OK) {
            for (var i = 0; i < results.length; i++) {
              createMarker(results[i]);
            }

            map.setCenter(results[0].geometry.location); // 不用
          }

最后一行的setCenter是将map重新以另外的位置为中心，这个操作我们暂且不需要，因为我们需要的地图的中心必须是一致的。