Javascript 在类中为Google Maps仅获取一个元素

我使用谷歌地图的Javascript API使用了以下内容：

# HTML markup
<div id="#city_123">
  <div class="map"></div>
</div>

# calling function
marker("#city_123 .map"); // There is only one .map

# marker() function
function marker(shop) {
  var map;
  var mapOptions = {
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  $(shop).each(function(index) {  
    map = new google.maps.Map(this, mapOptions);

    var marker = new google.maps.Marker({
      position: new google.maps.LatLng($(this).data("lat"), $(this).data("lng")),
      map: map,
    });

    map.setCenter(marker.getPosition());

  });
}

#HTML标记
#调用函数
标记（“城市地图”）；//只有一张地图
#marker（）函数
功能标记（车间）{
var映射；
变量映射选项={
缩放：15，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
$（商店）。每个（功能（索引）{
map=new google.maps.map（这是mapOptions）；
var marker=new google.maps.marker({
位置：新的google.maps.LatLng（$（this.data（“lat”），$（this.data（“lng”）），
地图：地图，
});
map.setCenter（marker.getPosition（））；
});
}

我尝试了多种方法来删除

。每种方法都是因为它不是必需的。我只有一张
.map
。我之所以必须使用
.map
类是有原因的，因为它实际上是动态创建的，但这并不重要

我怎样才能把它改写成友好的

谢谢。
试试这个：

JS
你能添加一个吗？它叫动态。每次我点击一个按钮，就会产生一个新的地图。在jsfiddle.net中复制的工作量太大。很抱歉
function marker(shop) {
    var map;
    var mapOptions = {
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map($(shop)[0], mapOptions);
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng($(shop).data("lat"), $(shop).data("lng")),
        map: map,
    });
    map.setCenter(marker.getPosition());
}