JavaScript InfoWindow不显示

时间:2015-03-08 13:02:30

标签: javascript google-maps

在使用Google Map API时,我希望将infoWindow应用于我的第一个标记,但它不会显示。我试过寻找一些帮助,但似乎没有任何工作。有任何想法吗?谢谢你的帮助。



function initialize() {

var myLatlng = new google.maps.LatLng(51.843143, -2.643555),
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 18,
        center: myLatlng
    }),
	
	
 var infowindow = new google.maps.InfoWindow({
  content: "We are based here."
  });
	
    marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: "We are based here."
    });
	
	  google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});


	
var accessPoint1 = new google.maps.LatLng(51.840913, -2.638603),
    marker1 = new google.maps.Marker({
        position: accessPoint1,
        map: map,
        title: "Access Point 1"
    });
	
	
	    var accessPoint2 = new google.maps.LatLng(51.840913, -3.638603),
    marker2 = new google.maps.Marker({
        position: accessPoint2,
        map: map,
        title: "Access Point 2"
    });
	
	
map.controls[google.maps.ControlPosition.TOP_CENTER].push($("#findButton")[0]);

function successCallback(position) {
    var latlng = new google.maps.LatLng(position.coords.latitude,
    position.coords.longitude),

        myOptions = {
            zoom: 3,
            center: latlng,
            mapTypeControl: false,
            navigationControlOptions: {
                style: google.maps.NavigationControlStyle.SMALL
            },
            mapTypeId: google.maps.MapTypeId.ROADMAP
        },
        bounds = new google.maps.LatLngBounds(latlng);

    bounds.extend(marker.getPosition());

    map.setOptions(myOptions);

    map.fitBounds(bounds);

    new google.maps.Marker({
        position: latlng,
        map: map,
        title: "You are here!",
        icon: 'http://maps.gstatic.com/mapfiles/markers2/boost-marker-mapview.png'
    });
}

function errorCallback() {
    alert("I'm afraid your browser does not support geolocation.");
}

function findMe() {
    $(this).hide();

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(successCallback, errorCallback, {
            timeout: 10000
        });
    } else {
        alert("I'm afraid your browser does not support geolocation.");
    }
}

$("#findButton").click(findMe);
}

google.maps.event.addDomListener(window, 'load', initialize);




1 个答案:

答案 0 :(得分:0)

我发布的代码Uncaught SyntaxError: Unexpected token var出现javascript错误。你不能在逗号分隔列表的中间用分号散布变量声明:

var myLatlng = new google.maps.LatLng(51.843143, -2.643555),
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 18,
        center: myLatlng
    }),  //** comma

var infowindow = new google.maps.InfoWindow({
  content: "We are based here."
});  // semicolon, terminates the line

工作代码段:

function initialize() {

  var myLatlng = new google.maps.LatLng(51.843143, -2.643555),
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      center: myLatlng
    }),
    infowindow = new google.maps.InfoWindow({
      content: "We are based here."
    }),
    marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: "We are here!"
    });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, marker);
  });

  var accessPoint1 = new google.maps.LatLng(51.840913, -2.638603),
    marker1 = new google.maps.Marker({
      position: accessPoint1,
      map: map,
      title: "Access Point 1"
    });
  map.controls[google.maps.ControlPosition.TOP_CENTER].push($("#findButton")[0]);

  function successCallback(position) {
    var latlng = new google.maps.LatLng(position.coords.latitude,
        position.coords.longitude),

      myOptions = {
        zoom: 3,
        center: latlng,
        mapTypeControl: false,
        navigationControlOptions: {
          style: google.maps.NavigationControlStyle.SMALL
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP
      },
      bounds = new google.maps.LatLngBounds(latlng);

    bounds.extend(marker.getPosition());

    map.setOptions(myOptions);

    map.fitBounds(bounds);

    new google.maps.Marker({
      position: latlng,
      map: map,
      title: "You are here!",
      icon: 'http://maps.gstatic.com/mapfiles/markers2/boost-marker-mapview.png'
    });
  }

  function errorCallback() {
    alert("I'm afraid your browser does not support geolocation.");
  }

  function findMe() {
    $(this).hide();

    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(successCallback, errorCallback, {
        timeout: 10000
      });
    } else {
      alert("I'm afraid your browser does not support geolocation.");
    }
  }

  $("#findButton").click(findMe);
}

google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}
<script src="http://maps.google.com/maps/api/js"></script>

<div id="map" style="border: 2px solid #3872ac;"></div>