我的地图作品中的jsfiddle但不是在浏览器

这里是工作的jsfiddle：http://jsfiddle.net/LzezLgtz/74/我的地图作品中的jsfiddle但不是在浏览器

<!doctype html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
<style> 
#map-canvas { 
    height: 400px; 
    width: 100%; 
    margin: 0px; 
    padding: 0px 
} 
.controls { 
    margin-top: 10px; 
    border: 1px solid transparent; 
    border-radius: 2px 0 0 2px; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    height: 32px; 
    outline: none; 
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); 
} 
#pac-input { 
    background-color: #fff; 
    font-family: Roboto; 
    font-size: 15px; 
    font-weight: 300; 
    margin-left: 12px; 
    padding: 0 11px 0 13px; 
    text-overflow: ellipsis; 
    width: 300px; 
} 
#pac-input:focus { 
    border-color: #4d90fe; 
} 
.pac-container { 
    font-family: Roboto; 
} 
#type-selector { 
    color: #fff; 
    background-color: #4d90fe; 
    padding: 5px 11px 0px 11px; 
} 
#type-selector label { 
    font-family: Roboto; 
    font-size: 13px; 
    font-weight: 300; 
} 
#target { 
    width: 345px; 
} 
</style> 
</head> 

<body> 
<div id="map-canvas" style="border: 2px solid #3872ac;"></div> 
<input id="pac-input" class="controls" type="text" placeholder="Search Box"> 
<script> 



function initialize() { 


    var myLatlng = new google.maps.LatLng(12.112, -86.2907); 

    var myOptions = { 
    zoom: 13, 
    center: myLatlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 

var map = new google.maps.Map(document.getElementById('map-canvas'), myOptions); 

    // Create the search box and link it to the UI element. 
    var input = document.getElementById('pac-input'); 
    var searchBox = new google.maps.places.SearchBox(input); 
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 

    // Bias the SearchBox results towards current map's viewport. 
    map.addListener('bounds_changed', function() { 
    searchBox.setBounds(map.getBounds()); 
    }); 

    var markers = []; 
    // [START region_getplaces] 
    // Listen for the event fired when the user selects a prediction and retrieve 
    // more details for that place. 
    searchBox.addListener('places_changed', function() { 
    var places = searchBox.getPlaces(); 

    if (places.length == 0) { 
     return; 
    } 

    // Clear out the old markers. 
    markers.forEach(function(marker) { 
     marker.setMap(null); 
    }); 
    markers = []; 

    // For each place, get the icon, name and location. 
    var bounds = new google.maps.LatLngBounds(); 
    places.forEach(function(place) { 
     var icon = { 
     url: place.icon, 
     size: new google.maps.Size(71, 71), 
     origin: new google.maps.Point(0, 0), 
     anchor: new google.maps.Point(17, 34), 
     scaledSize: new google.maps.Size(25, 25) 
     }; 

     // Create a marker for each place. 
     google.maps.event.addListener(map, 'click', function(event) { 

     alert(event.latLng); 
     }); 

     if (place.geometry.viewport) { 
     // Only geocodes have viewport. 
     bounds.union(place.geometry.viewport); 
     } else { 
     bounds.extend(place.geometry.location); 
     } 

    }); 
    map.fitBounds(bounds); 

    }); 

} 

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

</script> 
</body> 
</html>

这里有一个不工作的HTML：https://www.cootel.com.ni/cootel/wp-content/files/mapas/mapa-nicaragua.html

我已经试过这是我的本地计算机和我得到的相同的结果。它只适用于jsfiddle。

任何帮助将不胜感激。谢谢！

来源

2017-04-07 Jose Arguello

'但不在浏览器中'wha？ –

你有API密钥吗？（不需要在jsfiddle中，除非你在2016年7月22日之前有地图，否则你的网站是必需的） –

我有一个Api密钥 –

改变你的CSS从

#map-canvas { 
    height: 100%; 
    width: 100%; 
    margin: 0px; 
    padding: 0px 
}

到

html, body, #map-canvas { 
    height: 100%; 
    width: 100%; 
    margin: 0px; 
    padding: 0px 
}

在HTML页面中

。

来源

2017-04-07 00:32:15 Harsheet

已经尝试过..仍然没有工作。 https://www.cootel.com.ni/cootel/wp-content/files/mapas/mapa-nicaragua.html –

嘿，本页显示控制台错误 1）'https：/ /www.cootel.com.ni/cootel/wp-content/files/mapas/mapa-nicaragua.html'是通过HTTPS加载的，但请求了一个不安全的脚本'http://code.jquery.com/jquery-latest。 min.js'。此请求已被阻止;内容必须通过HTTPS提供。 2）Uncaught ReferenceError：google没有定义 – Harsheet

我的地图作品中的jsfiddle但不是在浏览器

回答

相关问题