众所周知,Google Maps是网络上功能最强大的应用程序之一,可在全球范围内更快,更轻松地导航。 但是,我们大多数人可能不知道的是,您可以根据 UI和其他功能自定义Google Maps 。 而且它也不需要任何JavaScript知识。
Snazzymaps是一种工具,旨在使任何人都可以更轻松地自定义Google Map。 它具有一个友好的用户界面。 您可以从选择框中选择几个选项来构建地图,而无需编写代码。
您可以通过许多选项来控制地图的外观。 您也可以插入自定义标记图标和位置。 最好的部分是它提供了大量的预构建地图样式 。
总览
Snazzymaps的工作原理与使用地图样式API自定义Google Map的工作原理完全相同。 它提供了一个比纯JavaScript代码更好的用户界面 。 在该工具内,所有选项都位于左侧面板中,为地图保留了剩余空间。
左侧的选项用于自定义地图的外观: 大小,位置,标记,地图类型和地图主题 。 所有更改将在地图中自动预览。
添加自定义标记
使用此工具,您可以轻松地将自定义标记添加到地图位置。 为此,首先需要提供标记图标的URL,以及要标记的地方的地址 。
使用“ 地图图标”中的“ 医院大楼”图标 ,这就是添加标记的方法。
要开始:
- 从左侧面板中选择添加第一个标记选项。
- 系统将要求您添加标记的名称和位置。 在这里,我们仅将其命名为Hospital 。 对于Location ,我们只需单击地图上的任意位置,它将为您填充Latitude和Longitdue值。
- 选择“自定义标记”并上传图标。
这就是结果。
完成后,别忘了保存Map 。 在这里,您将需要命名地图并添加自己的Google Maps API密钥。
嵌入地图
因此,既然您已经自定义了地图, 下一步就是将其放在网络上 。 要获取代码,请向下滚动到页面底部,您将看到“ 查看代码”按钮。
您将获得带有URL的HTML iframe标签,以嵌入地图副本并粘贴所有代码,并将它们放在网站内容的任何位置。
最后的想法
我们已经看到了使用Snazzymap创建和自定义地图是多么容易。 您可以自定义外观,大小和其中的一些组件。 所有这些都是基于Google Maps API构建的。
请在下面的评论部分中让我们知道您的经历。
翻译自: https://www.hongkiat.com/blog/create-map-with-googlemapbuilder/