Google maps in jsFiddle

2019-02-28 22:01发布

I'm trying to implement Google maps in jsFiddle to ask another question, but I can't see the map: http://jsfiddle.net/hashie5/aknYP/

I've added the gmap script in the resources

How can I show the map in jsFiddle?

function initialize() {
var myLatlng = new google.maps.LatLng(50.965049,5.484231);
var myOptions = {
  zoom: 14,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var contentString = 
    '<div id="infowindow">' +
    'Galaconcert<br />' +
    'Jaarbeurslaan 2-6<br />' +
    '3690 Genk' +
    '</div>'
;

var infowindow = new google.maps.InfoWindow();

var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: 'Galaconcert'
});
google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString);
    infowindow.open(map, marker);
});
}

2条回答
家丑人穷心不美
2楼-- · 2019-02-28 22:16

As explained here under "Add Resources" in a red box:

Warning: jsFiddle is recognizing the type of the resource by the extension. If you want to use a dynamic resource please add a dummy GET variable i.e. http://example.com/download/js/dynamically.js?somevar=somevalue&dummy=.js. This will trick jsFiddle to recognize it as JavaScript resource.

So to make jsFiddle recognize the Google Maps API (which indeed does not have .js extension) you need to add this as the resource: http://maps.googleapis.com/maps/api/js?sensor=false&dummy=.js (This is in addition to calling initialize of course)

Updated fiddle.

查看更多
你好瞎i
3楼-- · 2019-02-28 22:32

There you go http://jsfiddle.net/aknYP/4/

You were never calling initialize() nor loading the JS Google Maps API

查看更多
登录 后发表回答