現在私はジオロケーションを使用していないマップがあります。 SSLをウェブサイトに追加したので、Google Maps APIのドキュメントに従ってSSLを追加しました。問題は、私は今、マーカーとしてラベルを取得している、と私は自分のものに戻す方法を把握することはできません。Google Maps APIのジオロケーションとカスタムマーカー
誰も助けて、説明する方法はありますか?
マイコード:おそらく
var marker;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom : 13,
center : {
lat : 59.909144,
lng : 10.7436936
},
disableDefaultUI : true,
//START STYLE
styles : [{
"elementType" : "geometry",
"stylers" : [{
"color" : "#ebe3cd"
}
]
}, {
"elementType" : "labels.text.fill",
"stylers" : [{
"color" : "#523735"
}
]
}, {
"elementType" : "labels.text.stroke",
"stylers" : [{
"color" : "#f5f1e6"
}
]
}, {
"featureType" : "administrative",
"elementType" : "geometry.stroke",
"stylers" : [{
"color" : "#c9b2a6"
}
]
}, {
"featureType" : "administrative.land_parcel",
"elementType" : "geometry.stroke",
"stylers" : [{
"color" : "#dcd2be"
}
]
}, {
"featureType" : "administrative.land_parcel",
"elementType" : "labels.text.fill",
"stylers" : [{
"color" : "#ae9e90"
}
]
}, {
"featureType" : "landscape.natural",
"elementType" : "geometry",
"stylers" : [{
"color" : "#dfd2ae"
}
]
}, {
"featureType" : "poi",
"elementType" : "geometry",
"stylers" : [{
"color" : "#dfd2ae"
}
]
}, {
"featureType" : "poi",
"elementType" : "labels.text.fill",
"stylers" : [{
"color" : "#93817c"
}
]
}, {
"featureType" : "poi.park",
"elementType" : "geometry.fill",
"stylers" : [{
"color" : "#a5b076"
}
]
}, {
"featureType" : "poi.park",
"elementType" : "labels.text.fill",
"stylers" : [{
"color" : "#447530"
}
]
}, {
"featureType" : "road",
"elementType" : "geometry",
"stylers" : [{
"color" : "#f5f1e6"
}
]
}, {
"featureType" : "road.arterial",
"elementType" : "geometry",
"stylers" : [{
"color" : "#fdfcf8"
}
]
}, {
"featureType" : "road.highway",
"elementType" : "geometry",
"stylers" : [{
"color" : "#f8c967"
}
]
}, {
"featureType" : "road.highway",
"elementType" : "geometry.stroke",
"stylers" : [{
"color" : "#e9bc62"
}
]
}, {
"featureType" : "road.highway.controlled_access",
"elementType" : "geometry",
"stylers" : [{
"color" : "#e98d58"
}
]
}, {
"featureType" : "road.highway.controlled_access",
"elementType" : "geometry.stroke",
"stylers" : [{
"color" : "#db8555"
}
]
}, {
"featureType" : "road.local",
"elementType" : "labels.text.fill",
"stylers" : [{
"color" : "#806b63"
}
]
}, {
"featureType" : "transit.line",
"elementType" : "geometry",
"stylers" : [{
"color" : "#dfd2ae"
}
]
}, {
"featureType" : "transit.line",
"elementType" : "labels.text.fill",
"stylers" : [{
"color" : "#8f7d77"
}
]
}, {
"featureType" : "transit.line",
"elementType" : "labels.text.stroke",
"stylers" : [{
"color" : "#ebe3cd"
}
]
}, {
"featureType" : "transit.station",
"elementType" : "geometry",
"stylers" : [{
"color" : "#dfd2ae"
}
]
}, {
"featureType" : "water",
"elementType" : "geometry.fill",
"stylers" : [{
"color" : "#b9d3c2"
}
]
}, {
"featureType" : "water",
"elementType" : "labels.text.fill",
"stylers" : [{
"color" : "#92998d"
}
]
}
]
//END STYLE
});
//CUSTOM MARKER ICON
var image = {
url : "img/ridepin.png",
scaledSize : new google.maps.Size(150, 150)
};
marker = new google.maps.Marker({
map : map,
draggable : true,
icon : image,
animation : google.maps.Animation.DROP,
position : {
lat : 59.909144,
lng : 10.7436936
}
});
marker.addListener('click', toggleBounce);
//END CUSTOM MARKER ICON
// GET POSITION
infoWindow = new google.maps.InfoWindow;
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var pos = {
lat : position.coords.latitude,
lng : position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('I don\'t want this marker!');
infoWindow.open(map);
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
//END GET POSITION
}
//BOUNCE WHEN MARKER IS PRESSED
function toggleBounce() {
if (marker.getAnimation() !== null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
//END BOUNCE WHEN MARKER IS PRESSED
の質問自体に関連するすべてのコード。あなたのデモは空です – charlietfl
@charlietfl strange。私はそれを更新してテストしたので、今見えるはずです。私もここにそれを追加しました(書式はまばらですが) –
@Strechingmycompetenceあなたは私の答えを試しましたか?質問を正しく理解しているかどうか教えてください... – dev8080