Google 带有路线规划器的地图未正确显示标记和信息 window

Question

找了一整天，没找到解决办法。如果有人看到我的错误，我会很高兴。我尝试显示带有标记的地图，单击它会打开信息窗口。我以前做过很多次。在信息窗口中，我想显示更改为 Google 以进行路线规划的选项。

定位链接功能Google很好用，但是onload地图出现时没有显示marker，而是直接显示infowindow并打开。

您可以在此处查看地图：https://jsfiddle.net/fuy8n47d/

到目前为止，这是我的代码：

<div class="mapwrapper">
<div id="map_canvas"></div>

<!-- STARTING MAP DEFINITION -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=de"></script>
<script type="text/javascript">

    var map;
    var start = new google.maps.LatLng(50.6472671, 8.4210159);
    var geocoder;
    geocoder = new google.maps.Geocoder();

    // Initalize your map
    function initialize() {
        var mapOptions = {
            zoom:16,
            scrollwheel: false,
            panControl: true,
            draggable: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: start
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    }

    // Collect entered data and open Google Maps in a new browser tab
    function showRoute() {
        var start = document.getElementById("address").value;
        var dest_url = "http://maps.google.de/maps?saddr="+start+"&daddr="+destination;
        window.open(dest_url, '_blank');
    }

    // Define infobox widget
    function codeAddress() {
        var marker = new google.maps.Marker({
            map: map,
            position: new google.maps.LatLng(50.6472671, 8.4210159 ),
            title:"Info Window title goes here"
        });

        var address = destination;
        geocoder.geocode( { 'address': address }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                var coordInfoWindow = new google.maps.InfoWindow({
                    content: "<h2>Your Way to Us</h2><p>Enter your location<br>and press 'FIND'</p><input id='address' type='textbox' value='' style='border: 1px solid #f0f0f0;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;'> <input type='button' value='FIND' onClick='showRoute();'>",
                    map: map,
                    position: results[0].geometry.location
                });
            } else {
                alert("Geocode not available: " + status);
            }
        });
        google.maps.event.addListener(marker, 'click', function() {
            coordInfoWindow.open(map,marker);
        });
    }

    // Automatic geo localisation
    function codeLatLng() {
        if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                var pos = new google.maps.LatLng(position.coords.latitude,
                        position.coords.longitude);

                geocoder.geocode({'latLng': pos}, function(results, status) {

                    if (status == google.maps.GeocoderStatus.OK) {
                        if (results[1]) {
                            document.getElementById("address").value = results[1].formatted_address;
                        } else {
                            // alert("No results found");
                        }
                    } else {
                        // alert("Geocoder failed due to: " + status);
                    }
                });

            }, function() {
                //
            });
        }
    }

    // DO NOT CHANGE CODE ABOVE!

    // Change custom parameters starting from here:
    var destination = "Mainzer Dom, Markt, Mainz"; // destination, your address
    document.getElementById('map_canvas').style.width = '100%'; // map width
    document.getElementById('map_canvas').style.height = '700px'; // map height
    initialize();
    codeAddress();
    codeLatLng();


</script>
<!-- END OF MAP DEFINITION -->

</div>

我做错了什么，有人知道吗？我会感谢你的帮助，非常感谢，

托马斯

Answer 1

好吧，因为我在这方面没有得到任何帮助 post，所以我自救了 ;-) 就我不是 GoopleMaps API 专家而言，我找到了一个适用于我的项目的解决方案。我现在缺少自动地理定位，但标记和信息窗口现在的行为符合我的预期。我 post 这段代码并希望它能帮助遇到类似问题的人。这是：

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(49.9988999, 8.2717569 ),
    zoom: 16,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scrollwheel: false,
    panControl: true,
    draggable: false
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"),
                                mapOptions);
  var marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(49.9988999, 8.2717569 ),
    title:"Info Window title goes here"
  });
  // Adjust styling of info window depending on the map height and webpage design
  var contentString = '<div id="mapinfo_box" style="color:#666;max-width:280px;">'+
      '<h1 id="mapinfo_h1">Info Window title goes here, too</h1>'+
      '<div id="mapinfo_body">'+
      '<p style="font-size:16px;margin-bottom:15px;">Examplestreet 6 <br />12345 ExampleCity</p>'+
      '<form action="http://maps.google.com/maps" method="get" target="_blank"><label for="saddr">Enter your location</label><br />'+
      '<input id="saddr" type="text" name="saddr" /><input type="hidden" name="daddr" value="Staatstheater Mainz - Großes Haus" />'+
      '<input type="submit" value="Get Route" /></form>'+
      '</div>';
  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });
}
google.maps.event.addDomListener(window, 'resize', initialize);
google.maps.event.addDomListener(window, 'load', initialize)

html { 
  height: 100%; 
}
body {
  height: 100%;
  margin: 0; 
  padding: 0; 
}
#sec4 {
  width: 100%;
  height: 50%;
}
#map_canvas { 
  width: 100%; height: 600px; 
}

<!-- Insert Googlemap Api -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=de"></script>

<div id="sec4" onload="initialize()">
 <div id="map_canvas"></div>
</div>

好吧，我当然不是地图 API 专家，但代码对我有用而且地图是响应式的。如果有人看到错误，请随时纠正我。

Google 带有路线规划器的地图未正确显示标记和信息 window

Google Map with Routeplanner don't shows marker and info window correctly

javascript

google-maps

google-maps-api-3

directions