[英]Mark locations on Google Maps
I'm fairly new to coding, and am experimenting on creating my own personal project. 我对编码还很陌生,并且正在尝试创建自己的个人项目。 I was able to get a simple map up and running. 我能够建立并运行一个简单的地图。
How would I create just for example all of the breweries in your area. 例如,我将如何创建您所在地区的所有啤酒厂。 Would I need to access an API and then create a marker for each one? 我需要访问一个API,然后为每个API创建一个标记吗? OR just create a search bar within the map and Google "breweries"? 还是只在地图和Google“酿酒厂”内创建搜索栏?
<div id="container">
<div id="googleMap" style="width:100%;height:400px;"></div>
<script src="https://maps.googleapis.com/maps/api/js?
key="KEYHERE"&callback=myMap">
</script>
</div>
function myMap() {
var myCenter = new google.maps.LatLng(39.742043,-104.991531)
var mapCanvas = document.getElementById('googleMap');
var mapOptions = {center: myCenter, zoom: 9};
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({position:myCenter});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({content: "Denver" });
infowindow.open(map,marker);
}
If you have websites with examples or examples yourselves to help me out to learn I'd greatly appreciate it. 如果您的网站上有示例或示例,请您自己帮助我学习,我将不胜感激。 I just don't know how it works. 我只是不知道它是如何工作的。 Thanks 谢谢
i will share link which gives guidelines using this you create API key and just copy in the following script, 我将共享链接,该链接为您提供了使用指南,您可以使用此链接创建API密钥并只需复制以下脚本,
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<script>
// Initialize and add the map
function initMap() {
var uluru = {lat: -104.991531, lng: 39.742043};
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 4, center: uluru});
// The marker, positioned at your location
var marker = new google.maps.Marker({position: uluru, map: map});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?
key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
Follow the following link, 点击以下链接,
https://developers.google.com/maps/documentation/javascript/adding-a-google-map https://developers.google.com/maps/documentation/javascript/adding-a-google-map
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.