Страны с кликами, использующие API Карт Google

Я только начал работать в API Карт Google, но я уже застрял. Я ищу способ воссоздать этот > тип карты с картами google. Мне нужно было бы удалить все ярлыки, получить пустой фон (я попытался использовать стиль карты, но это не сработало для меня, пример кода ниже) и осветить страны, когда я навис над ними.

Есть ли какие-то учебные пособия, которые, по-видимому, я пропустил в своем поиске, которые могли бы помочь мне или кто-нибудь мог указать мне в правильном направлении?:)

var _mapstyle = [
  {
    featureType: "all",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  }
];

function create_map()
{
    _map = new google.maps.Map(document.getElementById("eyewebz-map"), 
    {
        zoom: 2,
        center: new google.maps.LatLng(20, 0), 
        navigationControl: true,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.DEFAULT
        },
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        scaleControl: true, 
        mapTypeIds: ['_mapstyle']
    });

    _display.setMap(_map);
    _display.setPanel(document.getElementById("NavigationText"));
}

ИЗМЕНИТЬ Это то, к чему будет использоваться карта: я немного побывал в своей жизни и рассчитываю сделать намного больше. С моей первой большой поездки я занимаюсь блогами. Теперь я разработал новый блог, и я хотел бы сделать страны, в которых я был бы доступен, и следовать URL-адресу после их нажатия. Идеальная ситуация заключается в том, что когда я нажимаю на страну, она выводит меня на страницу, где только одна конкретная страна отображается на карте с некоторыми маркерами (места для посещения). Как только вы нажмете эти маркеры, он должен показать конкретную запись/некоторую информацию.

Ответ 1

Что-то вроде этого было бы в порядке? Скопируйте и вставьте внутри тела HTML-страницы (JSFiddler здесь).

<style type="text/css">
  #map-canvas {
    height: 600px;
    width: 800px;
  }
</style>

<script type="text/javascript"
    src="https://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
  // the map
  var map;

  function initialize() {
    var myOptions = {
      zoom: 2,
      center: new google.maps.LatLng(10, 0),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    // initialize the map
    map = new google.maps.Map(document.getElementById('map-canvas'),
        myOptions);

    // these are the map styles
    var styles = [
        {
          stylers: [
            { hue: "#00ffe6" },
            { saturation: -20 }
          ]
        },
        {
          featureType: "landscape",
          stylers: [
            { hue: "#ffff66" },
            { saturation: 100 }
          ]
        },{
          featureType: "road",
          stylers: [
            { visibility: "off" }
          ]
        },{
          featureType: "administrative.land_parcel",
          stylers: [
            { visibility: "off" }
          ]
        },{
          featureType: "administrative.locality",
          stylers: [
            { visibility: "off" }
          ]
        },{
          featureType: "administrative.neighborhood",
          stylers: [
            { visibility: "off" }
          ]
        },{
          featureType: "administrative.province",
          stylers: [
            { visibility: "off" }
          ]
        },{
          featureType: "landscape.man_made",
          stylers: [
            { visibility: "off" }
          ]
        },{
          featureType: "landscape.natural",
          stylers: [
            { visibility: "off" }
          ]
        },{
          featureType: "poi",
          stylers: [
            { visibility: "off" }
          ]
        },{
          featureType: "transit",
          stylers: [
            { visibility: "off" }
          ]
        }
      ];

    map.setOptions({styles: styles});

    // Initialize JSONP request
    var script = document.createElement('script');
    var url = ['https://www.googleapis.com/fusiontables/v1/query?'];
    url.push('sql=');
    var query = 'SELECT name, kml_4326 FROM ' +
        '1foc3xO9DyfSIF6ofvN0kp2bxSfSeKog5FbdWdQ';
    var encodedQuery = encodeURIComponent(query);
    url.push(encodedQuery);
    url.push('&callback=drawMap');
    url.push('&key=AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ');
    script.src = url.join('');
    var body = document.getElementsByTagName('body')[0];
    body.appendChild(script);
  }

  function drawMap(data) {
    var rows = data['rows'];
    for (var i in rows) {
      if (rows[i][0] != 'Antarctica') {
        var newCoordinates = [];
        var geometries = rows[i][1]['geometries'];
        if (geometries) {
          for (var j in geometries) {
            newCoordinates.push(constructNewCoordinates(geometries[j]));
          }
        } else {
          newCoordinates = constructNewCoordinates(rows[i][1]['geometry']);
        }
        var country = new google.maps.Polygon({
          paths: newCoordinates,
          strokeColor: '#ff9900',
          strokeOpacity: 1,
          strokeWeight: 0.3,
          fillColor: '#ffff66',
          fillOpacity: 0,
          name: rows[i][0]
        });
        google.maps.event.addListener(country, 'mouseover', function() {
          this.setOptions({fillOpacity: 0.4});
        });
        google.maps.event.addListener(country, 'mouseout', function() {
          this.setOptions({fillOpacity: 0});
        });
        google.maps.event.addListener(country, 'click', function() {
          alert(this.name);
        });

        country.setMap(map);
      }
    }
  }

  function constructNewCoordinates(polygon) {
    var newCoordinates = [];
    var coordinates = polygon['coordinates'][0];
    for (var i in coordinates) {
      newCoordinates.push(
          new google.maps.LatLng(coordinates[i][1], coordinates[i][0]));
    }
    return newCoordinates;
  }

  google.maps.event.addDomListener(window, 'load', initialize);
</script>

<div id="map-canvas"></div>

Это модифицированная версия этого Слой таблицы Fusion Пример: Стили карты для мыши.

Вы также должны взглянуть на Стилированные карты.

Еще одна вещь, которая может вас заинтересовать, - Природные данные Земли. Это в случае, если вам нужен источник многоугольников. И вот пример использования Пример API GViz: источник данных Fusion Tables.

Ответ 2

Есть ли способ сделать это в группах стран? Спасибо!