使用标记在 HTML 中嵌入 Google 地图代码
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10415842/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Embed Google Map code in HTML with marker
提问by Noor
I have several places with their latitude and longitude. I want to display them in google map. Thats ok, what i can't is to display the marker at the specific lat,long position.
我有几个地方的纬度和经度。我想在谷歌地图中显示它们。没关系，我不能在特定的经纬度位置显示标记。
e.g. if i've the following code, is it possible just to place an option to display the market as well because all the lat,long coord are comming from a database and echoed with php
例如，如果我有以下代码，是否也可以放置一个选项来显示市场，因为所有经纬度坐标都来自数据库并与 php 相呼应
<iframe width="425" height="350" frameborder="0" scrolling="no"
marginheight="0" marginwidth="0"
src="http://maps.google.mu/?ie=UTF8&ll=-20.234496,57.603722&spn=0.093419,0.169086&t=m&z=13&
output=embed"></iframe>
<br />
<small><a href="http://maps.google.mu/?ie=UTF8&ll=-20.234496,57.603722
&spn=0.093419,0.169086&t=m&z=13&source=embed"
style="color:#0000FF;text-align:left">View Larger Map
</a>
</small>
采纳答案by zigzag
The element that you posted looks like it's just copy-pasted from the Google Maps embed feature.
您发布的元素看起来像是从 Google 地图嵌入功能中复制粘贴的。
If you'd like to drop markers for the locations that you have, you'll need to write some JavaScript to do so. I'm learning how to do this as well.
如果您想为您拥有的位置放置标记，则需要编写一些 JavaScript 来执行此操作。我也在学习如何做到这一点。
Check out the following: https://developers.google.com/maps/documentation/javascript/overlays
查看以下内容：https: //developers.google.com/maps/documentation/javascript/overlays
It has several examples and code samples that can be easily re-used and adapted to fit your current problem.
它有几个示例和代码示例，可以轻松地重用和调整以适应您当前的问题。
回答by naren
I would suggest this way, one line iframe. no javascript needed at all. In query ?q=,
我建议这样，一行 iframe。根本不需要 javascript。在查询 ?q= 中，
<iframe src="http://maps.google.com/maps?q=12.927923,77.627108&z=15&output=embed"></iframe>回答by uofc
no javascript or third party 'tools' necessary, use this:
不需要 javascript 或第三方“工具”，使用这个：
<iframe src="https://www.google.com/maps/embed/v1/place?key=<YOUR API KEY>&q=71.0378379,-110.05995059999998"></iframe>
the place parameter provides the marker
place 参数提供标记
there are a few options for the format of the 'q' parameter
'q' 参数的格式有几个选项
make sure you have Google Maps Embed API and Static Maps API enabled in your APIs, or google will block the request
确保您的 API 中启用了 Google Maps Embed API 和 Static Maps API，否则 google 将阻止请求
for more information check here
欲了解更多信息，请点击此处
回答by linqu
Learning Google's JavaScript library is a good option. If you don't feel like getting into coding you might find Maps Engine Liteuseful.
学习 Google 的 JavaScript 库是一个不错的选择。如果您不想进行编码，您可能会发现Maps Engine Lite很有用。
It is a tool recently published by Google where you can create your personal maps (create markers, draw geometries and adapt the colors and styles).
这是谷歌最近发布的一个工具，您可以在其中创建您的个人地图（创建标记、绘制几何图形并调整颜色和样式）。
Here is an useful tutorial I found: Quick Tip: Embedding New Google Maps
这是我发现的一个有用的教程： 快速提示：嵌入新的 Google 地图
回答by masoud Cheragee
USE this , Don't forget to get a google api key from
使用这个，不要忘记从
https://console.developers.google.com/apis/credentials
https://console.developers.google.com/apis/credentials
and replace it
并更换它
<div id="map" style="width:100%;height:400px;"></div>
<script>
function myMap() {
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var myCenter = new google.maps.LatLng(38.224905, 48.252143);
var mapCanvas = document.getElementById("map");
var mapOptions = {center: myCenter, zoom: 16};
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({position:myCenter});
marker.setMap(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=myMap"></script>
