米国のGoogleマップを作成しますが、マーカーはありませんが、それぞれの州は独自のマーカー（境界線）になります

Question

Googleマップは初めてです。

私は、次の操作を実行するためにGoogleマップを使用する方法を探しています：

1. 状態の境界のみ
2. ませピンポイント/マーカー
を示し、米国のマップを作成します。
3. 状態は、（デスクトップ）
4. 状態は、コンテンツ（モバイル）

を表示するには、「クリックで」イベントを持っているでしょうコンテンツを表示するための効果「の上にマウス」を持っています

例：http://maps.debt.com/ccus-geo-map.html（ただし、ピンなしポイント/マーカーとこのマップが応答しない）

あなたがたのうち、Googleマップとそうであれば、どこを使用して、このようなものを見たことがありますか？これを行うためのチュートリアルはありますか？マーカーは表示されていたので、Googleドキュメントは役に立ちませんでした。これは望ましい結果ではありません。

おかげで、

ミッチ

私はGoogleドキュメントを使って下に作成したコードの例が、これは望ましい結果のいずれかを提供していなかった...

function initialize() { 

    var locations = [ 
    ['California (LOS ANGELES)', 34.0522, -118.2437, 1], 
    ['Florida (MIAMI)', 25.7617, -80.1918, 2], 
    ['Maine (HOULTON)', 46.1262, -67.8402, 3], 
    ['Washington (CLALLAM)', 48.253517, -124.257798, 4] 
    ]; 
    var mapProp = { 
     center: new google.maps.LatLng(39.8282, -98.5795), /* exact center of the US */ 
     zoom: 4, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     /* 
      ROADMAP (normal, default 2D map) 
      SATELLITE (photographic map) 
      HYBRID (photographic map + roads and city names) 
      TERRAIN (map with mountains, rivers, etc.) 
     */ 
    }; 
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 
    var marker, i; 
    var markers = new Array(); 
    for (i = 0; i < locations.length; i++) { 
     marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
      map: map 
     }); 
     markers.push(marker); 
     google.maps.event.addListener(marker, 'click', (function (marker, i) { 
      return function() { 
       infowindow.setContent(locations[i][0]); 
       infowindow.open(map, marker); 
      } 
     })(marker, i)); 
    } 
} 
google.maps.event.addDomListener(window, 'load', initialize) 

Answer 1

あなたはする必要がありますあなたのマップ上の負荷の境界。境界はKML形式、geoJSON形式などがあり、それに応じてGoogleマップKML LayerまたはData Layer、または簡単なgoogle.maps.Polygonを使用することができます。

私はData Layerを使用して、このための例を作成しましたが、（答えでは、JavaScriptのスニペットを実行し、地図上のドロップダウンから「LOAD米国STATES境界」を選択してください）this answer on SOを見て、それはあなたに非常によく似た問題を解決します。

境界ファイルはUS CENSUSから公開されています（ただし、商用ライセンスについてはわかりませんが、自分で確認する必要があります）。shapefileとなります。 shapefileを希望の形式に変換する方法については、参照されている回答をお読みください。

var map = null; 
 
var my_boundaries = {}; 
 
var data_layer; 
 
var info_window; 
 

 
//initialize map on document ready 
 
$(document).ready(function(){ 
 
\t var latlng = new google.maps.LatLng(20.723080, -73.984340); //you can use any location as center on map startup 
 
\t var myOptions = { 
 
\t \t zoom: 2, 
 
\t \t center: latlng, 
 
\t \t mapTypeControl: true, 
 
\t \t mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, 
 
\t \t navigationControl: true, 
 
\t \t mapTypeId: google.maps.MapTypeId.ROADMAP 
 
\t }; 
 
\t map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
 
\t google.maps.event.addListener(map, 'click', function(){ 
 
\t \t if(info_window){ 
 
\t \t \t info_window.setMap(null); 
 
\t \t \t info_window = null; 
 
\t \t } 
 
\t }); 
 
\t loadBoundariesFromGeoJson("https://raw.githubusercontent.com/matej-pavla/Google-Mapshttps://raw.githubusercontent.com/matej-pavla/Google-Maps-Examples/master/BoundariesExample/geojsons/us.states.geo.json"); 
 
}); 
 

 
function initializeDataLayer(){ 
 
\t if(data_layer){ 
 
\t \t data_layer.forEach(function(feature) { 
 
\t \t \t data_layer.remove(feature); 
 
\t \t }); 
 
\t \t data_layer = null; 
 
\t } 
 
\t data_layer = new google.maps.Data({map: map}); //initialize data layer which contains the boundaries. It's possible to have multiple data layers on one map 
 
\t data_layer.setStyle({ //using set style we can set styles for all boundaries at once 
 
\t \t fillColor: 'white', 
 
\t \t strokeWeight: 1, 
 
\t \t fillOpacity: 0.1 
 
\t }); 
 

 
\t data_layer.addListener('click', function(e) { //we can listen for a boundary click and identify boundary based on e.feature.getProperty('boundary_id'); we set when adding boundary to data layer 
 
\t \t var boundary_id = e.feature.getProperty('boundary_id'); 
 
\t \t var boundary_name = "NOT SET"; 
 
\t \t if(boundary_id && my_boundaries[boundary_id] && my_boundaries[boundary_id].name) boundary_name = my_boundaries[boundary_id].name; 
 
\t \t if(info_window){ 
 
\t \t \t info_window.setMap(null); 
 
\t \t \t info_window = null; 
 
\t \t } 
 
\t \t info_window = new google.maps.InfoWindow({ 
 
\t \t \t content: '<div>You have clicked a boundary: <span style="color:red;">' + boundary_name + '</span></div>', 
 
\t \t \t size: new google.maps.Size(150,50), 
 
\t \t \t position: e.latLng, map: map 
 
\t \t }); 
 
\t }); 
 

 
\t data_layer.addListener('mouseover', function(e) { 
 
\t \t data_layer.overrideStyle(e.feature, { 
 
\t \t \t strokeWeight: 3, 
 
\t \t \t strokeColor: '#ff0000' 
 
\t \t }); 
 
\t \t var boundary_id = e.feature.getProperty('boundary_id'); 
 
\t \t var boundary_name = "NOT SET"; 
 
\t \t if(boundary_id && my_boundaries[boundary_id] && my_boundaries[boundary_id].name) boundary_name = my_boundaries[boundary_id].name; 
 
\t \t $('#bname').html(boundary_name); 
 
\t }); 
 

 
\t data_layer.addListener('mouseout', function(e) { 
 
\t \t data_layer.overrideStyle(e.feature, { 
 
\t \t \t strokeWeight: 1, 
 
\t \t \t strokeColor: '' 
 
\t \t }); 
 
\t \t $('#bname').html(""); 
 
\t }); 
 
} 
 

 
function loadBoundariesFromGeoJson(geo_json_url) { 
 
\t initializeDataLayer(); 
 
\t $.getJSON(geo_json_url, function (data) { 
 
\t \t if (data.type == "FeatureCollection") { //we have a collection of boundaries in geojson format 
 
\t \t \t if (data.features) { 
 
\t \t \t \t for (var i = 0; i < data.features.length; i++) { 
 
\t \t \t \t \t var boundary_id = i + 1; 
 
\t \t \t \t \t var new_boundary = {}; 
 
\t \t \t \t \t if (!data.features[i].properties) data.features[i].properties = {}; 
 
\t \t \t \t \t data.features[i].properties.boundary_id = boundary_id; //we will use this id to identify boundary later when clicking on it 
 
\t \t \t \t \t data_layer.addGeoJson(data.features[i], {idPropertyName: 'boundary_id'}); 
 
\t \t \t \t \t new_boundary.feature = data_layer.getFeatureById(boundary_id); 
 
\t \t \t \t \t if (data.features[i].properties.name) new_boundary.name = data.features[i].properties.name; 
 
\t \t \t \t \t if (data.features[i].properties.NAME) new_boundary.name = data.features[i].properties.NAME; 
 
\t \t \t \t \t my_boundaries[boundary_id] = new_boundary; 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t } 
 
\t }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
 
<script type="text/javascript"> 
 
google.load("maps", "3",{other_params:"sensor=false"}); 
 
</script> 
 
<body style="margin:0px; padding:0px;" > 
 
    <div style="float:left;clear:both;height:15px;"> 
 
     You are hovering over: <span id="bname" style="font-weight:bold"></span></div> 
 
\t <div id="map_canvas" style="height:400px; width:500px;"></div> 
 
</body>