谷歌地图api在地图上添加标记

Question

so i started working a little with google maps api, and i wanted to check how can i add marker on a certain location, i read the documention and tried to apply it in my website but i get many undefined errors this is the code

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/

Answer 1

There are several mistakes in your code, however I was able to fix it, here is the final solution:

 $(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: [ {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 }); } // 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>

Answer 2

The main issue with your fiddle (the posted code has several issues) is this javascript error:

Uncaught TypeError: Cannot read property 'icon' of undefined

feature is an array, and the array doesn't have the ".type" property. Calling it like this:

addMarker(feature);

isn't correct. Calling it like this:

addMarker(feature[0]);

works.

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>