Google Maps API未将标记居中 [英] Google Maps API not centering the Marker

问题描述

我在一个网站上设置Google地图，根据地址设置标记。 下面是一个示例（点击地点标签）： http://www.weddinghouse.com.au/wedding-directory/zoning-in -personal-training /

正如你所看到的，地图上没有标记。但是，如果向上滚动，标记坐在视线之外。

我的代码有问题吗？奇怪的事情是很少地址实际显示正确，但大多数没有。我的代码是否有问题，或者它是谷歌？

这是我的JavaScript代码：

 < script type =text / javascript> 
 $（document）.ready（function（）{
 load（'Zoning In Personal Training'，'27 Sitella Drive，berwick，VIC，3806'）; 
}）; 
< / script> 
  

-

  function load（title，address，type）{
 if（GBrowserIsCompatible（））{
 var map; 
 var geocoder; 
 
 map_id = document.getElementById（map）; 
 map = new GMap2（map_id）; 
 map.addControl（新的GSmallMapControl（））; 
 map.setCenter（new GLatLng（24，0），17）; 
 map.enableDoubleClickZoom（）; 
 
 if（type =='sat'）{
 map.setMapType（G_SATELLITE_MAP）; 
 map.addControl（new GHierarchicalMapTypeControl（））; 
} else {
 map.setMapType（G_NORMAL_MAP）; 
} 
 
 geocoder = new GClientGeocoder（）; 
 geocoder.getLocations（address，function（response）{
 map.clearOverlays（）; 
 if（！response || response.Status.code！= 200）{
 / /map_id.innerHTML('Could not find address on Google Maps'）; 
} else {
 place = response.Placemark [0]; 
 point = new GLatLng（place.Point.coordinates [1]，place.Point.coordinates [0]）; 
 
 map.setCenter（point，17）; 
 
 //创建我们的小标记图标
 var icon = new GIcon（）; 
 icon.image =http://labs.google.com/ridefinder/images/mm_20_red.png; 
 icon.shadow =http：/ /labs.google.com/ridefinder/images/mm_20_shadow.png; 
 icon.iconSize =新的GSize（12，20）; 
 icon.shadowSize =新的GSize（22,20）; 
 icon.iconAnchor =新的GPoint（6，20）; 
 icon.infoWindowAnchor =新的GP oint（5，1）; 
 
 //在给定点创建一个小标记
函数createMarker（point，index）{
 var marker = new GMarker（point，icon）; 
 var myMarkerContent =< div style = \width：200px;溢出：汽车; \ ><强> 中+ title +< / strong>< br /> +地址+< / div>; 
 map.addOverlay（marker）; 
 marker.openInfoWindowHtml（myMarkerContent）; 
 GEvent.addListener（marker，click，function（）{
 marker.openInfoWindowHtml（myMarkerContent）; 
}）; 
} 
 createMarker（point）; 
} 
}）; 
} 
} 
  

解决方案

你在谷歌地图加载页面，然后点击链接功能，它给你代码嵌入网站作为一个iFrame而不是搞乱API的 - 你可以试试这个吗？

还有一个问题是，有时标记不居中，特别是隐藏的div。解决这个问题的最佳方法是将Google地图的iFrame放入一个单独的文件（例如pages / map.html）中，然后在页面中创建iFrame的源。

Eg-而不是iFrame src =maps.google.com/等等
将其作为src =pages / map.html

无论如何，这篇文章是6个月大，但比从来没有更好！

I have Google Maps on a website that sets the marker based on an address.

Here's an example (click the location tab): http://www.weddinghouse.com.au/wedding-directory/zoning-in-personal-training/

As you can see there is no marker on the map. But if you scroll upwards the marker is sitting just out of view.

Is there something wrong with my code? The weird thing is very few addresses actually show correctly but the majority don't. Is there something wrong with my code or is it Google?

Here is my JavaScript Code:

<script type="text/javascript">
$(document).ready(function(){
    load('Zoning In Personal Training', '27 Sitella Drive, berwick, VIC, 3806');
});
</script>

-

function load(title, address, type) {
    if (GBrowserIsCompatible()) {
        var map;
        var geocoder;

        map_id = document.getElementById("map");
        map = new GMap2(map_id);
        map.addControl(new GSmallMapControl());
        map.setCenter(new GLatLng(24, 0), 17);
        map.enableDoubleClickZoom();

        if (type == 'sat') {
            map.setMapType(G_SATELLITE_MAP);
            map.addControl(new GHierarchicalMapTypeControl());
        } else {
            map.setMapType(G_NORMAL_MAP);
        }

        geocoder = new GClientGeocoder();
        geocoder.getLocations(address, function (response) {
            map.clearOverlays();
            if (!response || response.Status.code != 200) {
                //map_id.innerHTML('Could not find address on Google Maps');
            } else {
                place = response.Placemark[0];
                point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);

                map.setCenter(point, 17);

                // Create our "tiny" marker icon
                var icon = new GIcon();
                icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
                icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
                icon.iconSize = new GSize(12, 20);
                icon.shadowSize = new GSize(22, 20);
                icon.iconAnchor = new GPoint(6, 20);
                icon.infoWindowAnchor = new GPoint(5, 1);

                // Creates one of our tiny markers at the given point
                function createMarker(point, index) {
                  var marker = new GMarker(point, icon);
                  var myMarkerContent = "<div style=\"width:200px; overflow:auto;\"><strong>" + title + "</strong><br />" + address + "</div>";
                  map.addOverlay(marker);
                  marker.openInfoWindowHtml(myMarkerContent);
                  GEvent.addListener(marker,"click",function() {
                     marker.openInfoWindowHtml(myMarkerContent);
                   });
                }
                createMarker(point);
            }
        });
    }
}

解决方案

If you load the page in google maps and then click on the "link" function, it gives you code to embed the site as an iFrame instead of messing about with the API- you could try this?

There is also a bug with this that sometimes the marker is not centered, particularly on a hidden div. My best way to overcome this is to put the iFrame of the google map in a separate file (e.g. pages/map.html) and then to make that the source of the iFrame in your page.

E.g.- instead of iFrame src="maps.google.com/ etc etc" have it as src="pages/map.html"

Anyway, this post is 6 months old but better late than never!

这篇关于Google Maps API未将标记居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！