Javascript 向Google地图添加自定义标记

我已经尝试了一段时间，现在得到一个自定义标记谷歌地图框架。自定义标记和标准标记都不会显示

我正在使用以下代码：

google.maps.event.addDomListener（窗口'load'，init）；
var映射；
函数init（）{
变量映射选项={
中心：新google.maps.LatLng（51.231245,6.078348），
缩放：10，
动物控制：对，
ZoomControl选项：{
样式：google.maps.ZoomControlStyle.DEFAULT，
},
禁用双击缩放：真，
mapTypeControl:true，
mapTypeControlOptions：{
样式：google.maps.MapTypeControlStyle.DROPDOWN_菜单，
},
scaleControl：对，
滚轮：错误，
街景控制：对，
真的，
overviewMapControl:true，
概述MapControlOptions：{
是的，
},
}    
var图像处理http://aandegrens.appartdev.nl/wp-content/uploads/2016/03/Google_Maps.png';
var Mylatng={lat:51.231245，lng:6.078348}；
var marker=new google.maps.marker({
职位：myLatLng，
地图：地图，
标题：“你好，世界”，
图标：图像
});
var map=new google.maps.map（document.getElementById（'map'），mapOptions）}您正在创建地图之前在标记上设置
map:map
。只需移动
var-map=new google.maps.map（document.getElementById（'map'），mapOptions）在
var image=…
之前，它应该可以工作

小提琴：
嗯，我自己创造了一个简单的自定义标记

您可以通过单击地图查看结果

它将创建一个新的标记，具有像这样良好的WIFI效果



功能自定义标记（latlng、map、args）{
this.latlng=latlng；
this.args=args；
这个.setMap（map）；
}
CustomMarker.prototype=new google.maps.overlyview（）；
var cur_节点；
CustomMarker.prototype.draw=函数（）{
var self=这个；
var div=this.div；
如果（！div）{
div=this.div=document.createElement（'div'）；
div.className='cd single point'；
div.innerHTML=''；
if（typeof（self.args.marker_id）！=‘未定义’）{
div.dataset.marker\u id=self.args.marker\u id；
}
var cur=this.getPosition（）；
var me=这个；
google.maps.event.addDomListener（div，“contextmenu”，函数（事件）{
//警报（'您单击了自定义标记！'）；
//google.maps.event.trigger（self，“click”）；
cur_节点=cur；
我；
});
var panes=this.getPanes（）；
窗格。覆盖图像。追加子对象（div）；
}
var point=this.getProjection（）.fromLatLngToDivPixel（this.getPosition（））；
如果（点）{
div.style.left=（point.x-7）+“px”；
div.style.top=（点y-7）+“px”；
}
};
CustomMarker.prototype.remove=函数（）{
if（this.div）{
this.div.parentNode.removeChild（this.div）；
this.div=null；
}	
};
CustomMarker.prototype.getPosition=函数（）{
把这个还给我；
};

谷歌地图开发技术
#地图{
宽度：1000px；
高度：1000px；
}
.cd单点{
位置：绝对位置；
列表样式类型：无；
左：20px；
顶部：20px；
}
.cd单点>a{
位置：相对位置；
z指数：2；
显示：块；
宽度：15px；
高度：15px；
边界半径：50%；
背景#0079ff；
-webkit过渡：背景色0.2s；
-moz过渡：背景色0.2s；
-o过渡：背景色0.2s；
过渡：背景色0.2s；
}
.cd单点：：之后{
内容：''；
位置：绝对位置；
边界半径：50%；
宽度：100%；
身高：100%；
排名：0；
左：0；
动画：cd脉冲2s无限；
}
@关键帧cd脉冲
{
0%{box shadow:0#0079ff}
100%{box shadow:020px rgba（255150,44,0）}
}
var映射；
var cen；
函数初始化（）{
var geocoder=new google.maps.geocoder（）；
geocoder.geocode（{‘地址’：‘越南河内’}，函数（结果、状态）{
cen=结果[0]。geometry.location；
试一试{
我的风格=[
{
featureType:“管理”，
elementType:“标签”，
样式：[
{可见性：“关闭”}
]
},{
特征类型：“poi”，
elementType:“标签”，
样式：[
{可见性：“关闭”}
]
},{
特色类型：“水”，
elementType:“标签”，
样式：[
{可见性：“关闭”}
]
},{
特色类型：“道路”，
elementType:“标签”，
样式：[
{可见性：“关闭”}
]
}
];
map=new google.maps.map（document.getElementById（'map'）{
缩放：15，
中心：cen，
mapTypeId:google.maps.mapTypeId.ROADMAP，
街景控件：false，样式：myStyles
});	
}捕获（e）{警报（e）}
var marker=new google.maps.marker({
职位：cen，
地图：地图，
标题：“你好，世界！”
});
/*
var cityCircle=new google.maps.Circle({
strokeColor:“#FF0000”，
笔划不透明度：0.8，
冲程重量：0，
填充颜色：'#FF0000'，
不透明度：0.35，
地图：地图，
中心：cen，
半径：2
});*/
map.addListener（'click'，函数（e）{
var line=新的google.maps.Polyline({
路径：[cen，e.latLng]，
测地线：正确，
strokeColor:'蓝色'，
笔划不透明度：0.6，
冲程重量：1，
地图：地图
});
覆盖=新自定义标记(
e、 拉丁，
地图，
{
标识：“123”
}
);
});
map.addListener（'右键单击'，函数（e）{
if（当前节点）{
var line=新的google.maps.Polyline({
路径：[当前节点，e.latLng]，
测地线：正确，
strokeColor:'蓝色'，
笔划不透明度：0.6，
冲程重量：1，
地图：地图
});
覆盖=新自定义标记(
e、 拉丁，
地图，
{
标识：“123”
}
);
}
});
});