2016-08-14 6 views
-1

ウェブページ上にマーカーが付いたGoogleマップがあります。Googleマップ:フィーチャータイプに応じて地図にリンクする

  • 私はマップの異なるマーカーへの静的リンクしている他のウェブページ: 各マーカーは、これは私が場所に置くしたいシナリオでユニークな機能の位置と種類

    を持っています。

  • これらのリンクの1つをクリックすると、これらのマーカーのいずれかが中央に表示され、情報ウィンドウが開いているマップが表示されます。

ただし、マーカーの緯度と経度は変更されず、リンクは決して変更されません。

これは、緯度と経度の情報を使用しないで、代わりにフィーチャタイプをマーカにリンクする必要があることを意味します(同じままです)。

どうすればいいですか?ここで

は、これまでの私のサンプルGoogleマップスクリプトです:このサンプルで

<script> 

function initMap() { 
    var mapDiv = document.getElementById('map'); 
    var map = new google.maps.Map(mapDiv, { 
     center: {lat: 48.85639, lng: 2.33625}, // default centering 
     zoom: 18, 
     styles: 
     [ 
      {featureType: 'poi',stylers: [{ visibility: 'off' }]}, 
      {featureType: 'transit.station',stylers: [{ visibility: "off" }]} 
     ] 
    }); 

    var features = [ 
     {position: new google.maps.LatLng(48.85659, 2.33555),type: 'markerone'}, 
     {position: new google.maps.LatLng(48.85619, 2.33695),type: 'markertwo'}   
    ]; 

    var icons = { 
      'markerone': {icon: 'icon_one.png'}, 
      'markertwo': {icon: 'icon_two.png'} 
    }; 

    var contents= { 
      'markerone': {text: 'Content 1'}, 
      'markertwo': {text: 'Content 2'} 
    }; 

    for (var i = 0, feature; feature = features[i]; i++) 
    { 
     var marker = new google.maps.Marker({ 
      position: feature.position, 
      icon: icons[feature.type].icon, 
      map: map 
     }); 

     var content = contents[feature.type].text; 

     var infowindow = new google.maps.InfoWindow() 

     google.maps.event.addListener(marker,'mouseover', (function(marker,content,infowindow){ 
      return function() { 
       infowindow.setContent(content); 
       infowindow.open(map,marker); 
      }; 
     })(marker,content,infowindow)); 

     google.maps.event.addListener(marker,'mouseout', (function(marker,content,infowindow){ 
      return function() { 
       infowindow.close(map,marker); 
      }; 
     })(marker,content,infowindow)); 
    }   

} 
</script> 

、私はマーカーを持っています。 1つは機能タイプが "markerone"で、2つ目は "markertwo"です。 http://www.mywebsite.com/mymap.php?myvariable=markertwo

ありがとう:

は、どのように私はリダイレクトやファッションのこの種に特異的なマーカー周辺の地図を中心に、私のリンクを設定することができます。

+0

このような意味は、次のとおりです。http://www.geocodezip.com/v3_MW_example_linktomarker.html?id=Marker%20Two – geocodezip

答えて

0

まず、パラメータを取得する必要があります。以下の例では、すべてのパラメータを取得して配列に格納しています。そこでは、 "markerType"のような特定のパラメータを検索して、それが与えられているかどうかを調べることができます。もしそうでなければ、デフォルトのアクションを実行する必要はありません。そうでなければ、正しいmarkerを見つけたり、マップの中心を設定したり、腐食しているinfoWindowを開いたりするような特定のmarkerTypeを扱うことができます。

あなたのページのfocusMarkerType -methodを呼び出すだけでいいです。

function getSearchParameters() { 
     var prmstr = window.location.search.substr(1); 
     return prmstr != null && prmstr != "" ? transformToAssocArray(prmstr) : {}; 
} 

function transformToAssocArray(prmstr) { 
    var params = {}; 
    var prmarr = prmstr.split("&"); 
    for (var i = 0; i < prmarr.length; i++) { 
     var tmparr = prmarr[i].split("="); 
     params[tmparr[0]] = tmparr[1]; 
    } 
    return params; 
} 

function focusMarkerType(){ 
    var params = getSearchParameters(); 
    if(params.markerType!=null){ 
    //Handling the certain marker type 
    var found = false; 
    for (var i = 0, feature; feature = features[i]; i++) { 
     if (feature.type == params.markerType) { 
      found = true; 
      map.setCenter(feature.position); 
      //more... 
      break; 
     } 
    } 
    if (!found) { 
     console.log("unknown type") 
    } 
    }else{ 
    //Handling default behaviour if no marker type is given 
    } 
} 
関連する問題