Custom marker not showing up on Google Maps
Question
I am trying to replace Google's default icon with the one I am using. However, the default marker is still being shown on the map. As a JavaScript newbie my skills are still dodgy. Could anyone please inspect my code to see what went wrong? Thanks.
var hq_icon = "C:\Users\User.CARRIESHIH-PC\Desktop\Map_dev\hq.png";
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var HQMarker = new google.maps.Marker({
position: FirsteamHQ,
map: map,
icon: hq_icon
});
HQMarker.setMap(map);
3 answers
solution1
1 2015-08-17 08:55:12
You cannot load a local file from an absolute path. Serve the file via HTTP(S) or use a relative path.
[edit]
A complete example:
<!DOCTYPE html>
<html lang = "en">
<head>
<style type="text/css">
html{height: 100%}
body{height: 100%; margin: 0; padding: 0}
#map-canvas{height: 100%}
</style>
<title>GMaps Demo</title>
<script src = "https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize(){
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var hq_icon = "http://i.imgur.com/Na6VUFY.png";
var HQMarker = new google.maps.Marker({
position: new google.maps.LatLng(-34.397, 150.644),
map: map,
icon: hq_icon
});
HQMarker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id = "map-canvas">
</div>
</body>
</html>
solution2
0 2015-08-17 13:38:50
You need to provide your script with a relative path to your icon file:
var hq_icon = "relative/path/to/hq.png";
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var HQMarker = new google.maps.Marker({
position: FirsteamHQ,
map: map,
icon: hq_icon
});
HQMarker.setMap(map);
So if for example your above script is in the below structure in map.js and your hq.png image is in images/markers
Project
|
|-- map.js
|
+-- images
|
+-- markers
|
|-- hq.png
Then the relative path would be images/markers/hq.png
solution3
-1 2015-08-17 08:17:09
I think you are missing the coordinates (position). That should be something like this
position: new google.maps.LatLng(lat, lng)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.