当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Google Map infowindow not opening

问题描述:

I'm using Google Maps in my Rails app and I face some difficulties.

I want to show an infowindow when a user clicks on a circle. It works fine when he clicks on a marker but now that I have circles it does not work.

Here is my code:

 markers_json = <%= raw @circles %>;

var map;

var infoWindow;

buildMap = function(){

var mapStyle = [

// https://snazzymaps.com/style/70/unsaturated-browns

{"elementType":"geometry","stylers":[{"hue":"#ff4400"},{"saturation":-68},{"lightness":-4},{"gamma":0.72}]},{"featureType":"road","elementType":"labels.icon"},{"featureType":"landscape.man_made","elementType":"geometry","stylers":[{"hue":"#0077ff"},{"gamma":3.1}]},{"featureType":"water","stylers":[{"hue":"#00ccff"},{"gamma":0.44},{"saturation":-33}]},{"featureType":"poi.park","stylers":[{"hue":"#44ff00"},{"saturation":-23}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"hue":"#007fff"},{"gamma":0.77},{"saturation":65},{"lightness":99}]},{"featureType":"water","elementType":"labels.text.stroke","stylers":[{"gamma":0.11},{"weight":5.6},{"saturation":99},{"hue":"#0091ff"},{"lightness":-86}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"lightness":-48},{"hue":"#ff5e00"},{"gamma":1.2},{"saturation":-23}]},{"featureType":"transit","elementType":"labels.text.stroke","stylers":[{"saturation":-64},{"hue":"#ff9100"},{"lightness":16},{"gamma":0.47},{"weight":2.7}]}

];

handler = Gmaps.build('Google');

map = handler.buildMap({

internal: {id: 'map'},

provider: {

//disableDefaultUI: true,

mapTypeId: google.maps.MapTypeId.ROADMAP,

styles: mapStyle,

scrollwheel: false

}

}, function(){

var circles = handler.addCircles(markers_json, {strokeWeight: 1, strokeColor: '#aaa'});

handler.bounds.extendWith(circles);

handler.fitMapToBounds();

for (var i = 0; i < circles.length; ++i) {

var marker = circles[i];

//google.maps.event.addListener(marker.serviceObject, 'click', onMarkerClick(marker));

addInfoWindow(marker, 'hey');

}

});

};

function addInfoWindow(marker, content) {

var infoWindow = new google.maps.InfoWindow({

content: content

});

google.maps.event.addListener(marker.serviceObject, 'click', function () {

i = infoWindow.open(map, marker.serviceObject);

console.log(i);

});

}

I have this error again and again when I try to open the infowindow:

Uncaught TypeError: Cannot read property 'get' of undefined(…)

So I tried doing i = infoWindow.open(map.serviceObject, marker.serviceObject);

but now nothing happens, I even don't have an error message.

I really don't know what else I can do... Could you please help me?

网友答案:

the 2nd argument of infoWindow.open(); has to be an MVC-Object with a position-property of type google.maps.LatLng

A google.maps.Marker does have a position-property, but a google.maps.Circle doesn't.

Use setOptions to set map and position(e.g. center of the circle) of the infowindow:

infoWindow.setOptions({
  map:      map.serviceObject, 
  position: marker.serviceObject.getCenter()
});
分享给朋友:
您可能感兴趣的文章:
随机阅读: