Google Maps Application Developing —— Marker

Quick Start

        It is quite easy to put a marker on your map with the default look. to create a marker , you need to use the google.maps.Marker object. It only takes one parameter , which is an object of type google.maps.MarkerOptions.

        MarkerOptions has several properties that you can use to make the marker look and behave in different ways. Position and map are must:

1
2
3
4
var marker = new google.maps.Marker({
    position: new google.maps.LatLng(37.09,-95.71),
    map: map
    });

Other Properties of MarkerOptions

        title is using to add a tooltip

        icon is using to change the icon

        Google has a collection of standard icons that you can use on your map. Most of them use a similar URL that looks like this:

http://gmaps-samples.googlecode.com/svn/trunk/markers/color/markerx.png

        where color is one of the following values:

• blue
• green
• orange
• pink
• red

and x is a number between 1 and 99. If you want a marker with no number, use the filename blank.png.

Adding an InfoWindow

1
2
3
4
5
6
7
var infoWindow = new google.maps.InfoWindow({
    content: '<div style="width:250px">InfoWindow</div>'
    });
     
google.maps.event.addListener(marker, 'click', function(){
    infoWindow.open(map, marker);
    });
posted @   Create Chen  阅读(1101)  评论(0编辑  收藏  举报
编辑推荐:
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示