2016-09-22 16 views
-1

Googleマップのapiで少し作業を開始しました。マーカーを特定の場所に追加する方法を確認したかったのですが、私はその文書を読んで自分のウェブサイトに適用しようとしました多くの未定義エラーが出 これはコードGoogleマップapiが地図上にマーカーを追加する

function initMap() { 
// Styles a map in night mode. 
var map = new google.maps.Map(document.getElementById('map'), { 
center: {lat: 32.0225572, lng: 34.7766291}, 
zoom: 17, 
mapTypeId: 'roadmap', 
styles: [ 
{elementType: 'geometry', stylers: [{color: '#242f3e'}]}, 
{elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]}, 
{elementType: 'labels.text.fill', stylers: [{color: '#746855'}]}, 
{ 
featureType: 'administrative.locality', 
elementType: 'labels.text.fill', 
stylers: [{color: '#d59563'}] 
}, 
{ 
featureType: 'poi', 
elementType: 'labels.text.fill', 
stylers: [{color: '#d59563'}] 
}, 
{ 
featureType: 'poi.park', 
elementType: 'geometry', 
stylers: [{color: '#263c3f'}] 
}, 
{ 
featureType: 'poi.park', 
elementType: 'labels.text.fill', 
stylers: [{color: '#6b9a76'}] 
}, 
{ 
featureType: 'road', 
elementType: 'geometry', 
stylers: [{color: '#38414e'}] 
}, 
{ 
featureType: 'road', 
elementType: 'geometry.stroke', 
stylers: [{color: '#212a37'}] 
}, 
{ 
featureType: 'road', 
elementType: 'labels.text.fill', 
stylers: [{color: '#9ca5b3'}] 
}, 
{ 
featureType: 'road.highway', 
elementType: 'geometry', 
stylers: [{color: '#746855'}] 
}, 
{ 
featureType: 'road.highway', 
elementType: 'geometry.stroke', 
stylers: [{color: '#1f2835'}] 
}, 
{ 
featureType: 'road.highway', 
elementType: 'labels.text.fill', 
stylers: [{color: '#f3d19c'}] 
}, 
{ 
featureType: 'transit', 
elementType: 'geometry', 
stylers: [{color: '#2f3948'}] 
}, 
{ 
featureType: 'transit.station', 
elementType: 'labels.text.fill', 
stylers: [{color: '#d59563'}] 
}, 
{ 
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'}] 
} 
] 
}); 
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/'; 
     var icons = { 
      info: { 
      icon: iconBase + 'info-i_maps.png' 
      } 
     }; 

     function addMarker(feature) { 
      var marker = new google.maps.Marker({ 
      position: feature.position, 
      icon: icons[feature.type].icon, 
      map: map 
      }); 
     } 

     var feature = [ 
      { 
      position: new google.maps.LatLng(32.0225572, 34.7766291), 
      type: 'info' 
      }]; 

      addMarker(feature); 

} 
</script> 
var myLatLng = new google.maps.LatLng(32.0225572, 34.7766291); 
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/'; 
var marker = new google.maps.Marker({ 
position: myLatLng, 
map: map, 
icon: iconBase + 'שטיק-לוגו-07.png' 
}); 

function addMarker(feature) { 
var marker = new google.maps.Marker({ 
position: feature.position, 
icon: icon, 
map: map 
}); 
} 

var features = [ 
{ 
position: new google.maps.LatLng(32.0225572, 34.7766291), 
type: 'info' 
} 
]; 

for (var i = 0, feature; feature = features[i]; i++) { 
addMarker(feature); 
} 

https://jsfiddle.net/932j78og/1/

+0

あなたはplunkerを提供することはできますか? – MarcoS

+0

@MarcoSはそれを追加しました – ssabin

+0

投稿されたコードでJavaScriptエラーが発生しました。 – geocodezip

答えて

1

あなたのコード内のいくつかのミスが、ここでは、しかし、私はそれを修正することができた、ありますあり、最終的なソリューションです。

$(function() { 
 
    var map = new google.maps.Map($("#map").get(0), { 
 
    center: {lat: 32.0225572, lng: 34.7766291}, 
 
    zoom: 17, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    styles: [ 
 
    \t {elementType: 'geometry', stylers: [{color: '#242f3e'}]}, 
 
\t {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]}, 
 
\t {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]}, 
 
\t {featureType: 'administrative.locality',elementType: 'labels.text.fill',stylers: [{color: '#d59563'}]}, 
 
     {featureType: 'poi', elementType: 'labels.text.fill', stylers: [{color: '#d59563'}]}, 
 
\t {featureType: 'poi.park',elementType: 'geometry',stylers: [{color: '#263c3f'}]}, 
 
    \t {featureType: 'poi.park',elementType: 'labels.text.fill',stylers: [{color: '#6b9a76'}]}, 
 
    \t {featureType: 'road',elementType: 'geometry',stylers: [{color: '#38414e'}]}, 
 
\t {featureType: 'road',elementType: 'geometry.stroke',stylers: [{color: '#212a37'}]}, 
 
\t {featureType: 'road',elementType: 'labels.text.fill',stylers: [{color: '#9ca5b3'}]}, 
 
\t {featureType: 'road.highway',elementType: 'geometry',stylers: [{color: '#746855'}]}, 
 
\t {featureType: 'road.highway',elementType: 'geometry.stroke',stylers: [{color: '#1f2835'}]}, 
 
\t {featureType: 'road.highway',elementType: 'labels.text.fill',stylers: [{color: '#f3d19c'}]}, 
 
\t {featureType: 'transit',elementType: 'geometry',stylers: [{color: '#2f3948'}]}, 
 
\t {featureType: 'transit.station',elementType: 'labels.text.fill',stylers: [{color: '#d59563'}]}, 
 
\t {featureType: 'water',elementType: 'geometry',stylers: [{color: '#17263c'}]}, 
 
\t {featureType: 'water',elementType: 'labels.text.fill',stylers: [{color: '#515c6d'}]}, 
 
\t {featureType: 'water',elementType: 'labels.text.stroke',stylers: [{color: '#17263c'}]} 
 
    ] 
 
    }); 
 
    var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/'; 
 
    var icons = { 
 
    info: { 
 
     icon: iconBase + 'info-i_maps.png' 
 
    } 
 
    }; 
 
    function addMarker(feature) { 
 
    var marker = new google.maps.Marker({ 
 
     position: feature.position, 
 
     icon: icons[feature.type].icon, 
 
     map: map 
 
    }); 
 
    } 
 
    
 
    // Array of your features 
 
    var feature = [{ 
 
    position: new google.maps.LatLng(32.0225572, 34.7766291), 
 
    type: 'info' 
 
    }]; 
 
    
 
    // Since it is an array loop through it 
 
    for(var i = 0; i < feature.length; i++) { 
 
    // Add marker for each feature 
 
    addMarker(feature[i]); 
 
    } 
 
});
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    font: 12px sans-serif; 
 
} 
 

 
#map { 
 
    width: 400px; 
 
    height: 400px; 
 
}
<script src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="map"></div>

+0

これは素晴らしい、それは本当にうまくいく – ssabin

+0

あなたの歓迎。喜んで助けてください。 – xxxmatko

0

あなたのフィドルとの主な問題は、(掲示コードはいくつかの問題を持っている)、このjavascriptのエラーです:

Uncaught TypeError: Cannot read property 'icon' of undefined 

featureは配列で、配列は「.TYPEを持っていません"プロパティ。このように呼び出す:

addMarker(feature); 

が正しくありません。このように呼び出す:

addMarker(feature[0]); 

作品。

updated fiddle

#map { 
 
    width: 100%; 
 
    height: 300px; 
 
}
<div id="map"></div> 
 
<script> 
 
    function initMap() { 
 
    // Styles a map in night mode. 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
     center: { 
 
     lat: 32.0225572, 
 
     lng: 34.7766291 
 
     }, 
 
     zoom: 17, 
 
     mapTypeId: 'roadmap', 
 
     styles: styles 
 
    }); 
 
    var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/'; 
 
    var icons = { 
 
     info: { 
 
     icon: iconBase + 'info-i_maps.png' 
 
     } 
 
    }; 
 

 
    function addMarker(feature) { 
 
     var marker = new google.maps.Marker({ 
 
     position: feature.position, 
 
     icon: icons[feature.type].icon, 
 
     map: map 
 
     }); 
 
    } 
 

 
    var feature = [{ 
 
     position: new google.maps.LatLng(32.0225572, 34.7766291), 
 
     type: 'info' 
 
    }]; 
 

 
    addMarker(feature[0]); 
 

 
    } 
 
    var styles = [{ 
 
    elementType: 'geometry', 
 
    stylers: [{ 
 
     color: '#242f3e' 
 
    }] 
 
    }, { 
 
    elementType: 'labels.text.stroke', 
 
    stylers: [{ 
 
     color: '#242f3e' 
 
    }] 
 
    }, { 
 
    elementType: 'labels.text.fill', 
 
    stylers: [{ 
 
     color: '#746855' 
 
    }] 
 
    }, { 
 
    featureType: 'administrative.locality', 
 
    elementType: 'labels.text.fill', 
 
    stylers: [{ 
 
     color: '#d59563' 
 
    }] 
 
    }, { 
 
    featureType: 'poi', 
 
    elementType: 'labels.text.fill', 
 
    stylers: [{ 
 
     color: '#d59563' 
 
    }] 
 
    }, { 
 
    featureType: 'poi.park', 
 
    elementType: 'geometry', 
 
    stylers: [{ 
 
     color: '#263c3f' 
 
    }] 
 
    }, { 
 
    featureType: 'poi.park', 
 
    elementType: 'labels.text.fill', 
 
    stylers: [{ 
 
     color: '#6b9a76' 
 
    }] 
 
    }, { 
 
    featureType: 'road', 
 
    elementType: 'geometry', 
 
    stylers: [{ 
 
     color: '#38414e' 
 
    }] 
 
    }, { 
 
    featureType: 'road', 
 
    elementType: 'geometry.stroke', 
 
    stylers: [{ 
 
     color: '#212a37' 
 
    }] 
 
    }, { 
 
    featureType: 'road', 
 
    elementType: 'labels.text.fill', 
 
    stylers: [{ 
 
     color: '#9ca5b3' 
 
    }] 
 
    }, { 
 
    featureType: 'road.highway', 
 
    elementType: 'geometry', 
 
    stylers: [{ 
 
     color: '#746855' 
 
    }] 
 
    }, { 
 
    featureType: 'road.highway', 
 
    elementType: 'geometry.stroke', 
 
    stylers: [{ 
 
     color: '#1f2835' 
 
    }] 
 
    }, { 
 
    featureType: 'road.highway', 
 
    elementType: 'labels.text.fill', 
 
    stylers: [{ 
 
     color: '#f3d19c' 
 
    }] 
 
    }, { 
 
    featureType: 'transit', 
 
    elementType: 'geometry', 
 
    stylers: [{ 
 
     color: '#2f3948' 
 
    }] 
 
    }, { 
 
    featureType: 'transit.station', 
 
    elementType: 'labels.text.fill', 
 
    stylers: [{ 
 
     color: '#d59563' 
 
    }] 
 
    }, { 
 
    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' 
 
    }] 
 
    }]; 
 
</script> 
 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDQn2RHysd7yzrxLD9UzeSilYJow1sjobY&callback=initMap"></script>

関連する問題