Google地图默认显示infowindow和不同的标记 [英] Display infowindow by default and different markers in Google Maps

问题描述

My HTML：

 < div id =map_canvasstyle =width：625px; height：500px; >< / DIV> 
  

我的JQuery：

  var infowindow = null; 
 $（document）.ready（function（）{initialize（）;}）; 
 
函数initialize（）{
 
 var centerMap = new google.maps.LatLng（40.68194，-73.94439）; 
 
 var myOptions = {
 zoom：13，
 center：centerMap，
 scaleControl：true，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
} 
 
 var map = new google.maps.Map（document.getElementById（map_canvas），myOptions）; 
 
 setMarkers（地图，网站）; 
 infowindow = new google.maps.InfoWindow（{
 content：loading ...，maxWidth：150 
}）; 
 
 // var bikeLayer = new google.maps.BicyclingLayer（）; 
 //bikeLayer.setMap(map）; 
} 
 
函数setMarkers（map，markers）{
 
 for（var i = 0; i< markers.length; i ++）{
 var sites = markers [i]; 
 var siteLatLng = new google.maps.LatLng（sites [1]，sites [2]）; 
 var marker = new google.maps.Marker（{
 position：siteLatLng，
 map：map，
 title：sites [0]，
 zIndex：sites [ 3]，
 html：sites [4] 
}）; 
 
 var contentString =有些内容; 
 
 google.maps.event.addListener（marker，click，function（）{
 //alert（this.html）; 
 infowindow.setContent（this.html ）; 
 infowindow.open（map，this）; 
}）; 
} 
} 
  

我该如何实现，

1. 默认情况下在网页加载时显示网站[0]信息泡泡。




2. 在地图上为每个地图都设置不同的标记。

默认情况下在网页加载中显示网站[0]信息泡泡。

  infowindow.open（map，site [0 ]）; 
  

要为地图上的每个标记设置不同的标记。
假设你指的是不同的标记图像，你可以在创建标记时设置它们，或者简单地
调用 site [i] .setIcon（'newImage.png'），稍后



ref： Google Maps API v3：如何动态更改标记图标？




My HTML:

<div id="map_canvas" style="width: 625px; height: 500px;"></div>

My JQuery:

var infowindow = null;
    $(document).ready(function () { initialize();  });

    function initialize() {

        var centerMap = new google.maps.LatLng(40.68194, -73.94439);

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

        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        setMarkers(map, sites);
        infowindow = new google.maps.InfoWindow({
                content: "loading...", maxWidth: 150
            });

        //var bikeLayer = new google.maps.BicyclingLayer();
        //bikeLayer.setMap(map);
    }   

    function setMarkers(map, markers) {

        for (var i = 0; i < markers.length; i++) {
            var sites = markers[i];
            var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
            var marker = new google.maps.Marker({
                position: siteLatLng,
                map: map,
                title: sites[0],
                zIndex: sites[3],
                html: sites[4]
            });

            var contentString = "Some content";

            google.maps.event.addListener(marker, "click", function () {
                //alert(this.html);
                infowindow.setContent(this.html);
                infowindow.open(map, this);
            });
        }
    }

How can I achieve,

1. To show site[0] infobubble on page load by default.

2. To have different marker for each on the map.

解决方案

To show site[0] infobubble on page load by default.

infowindow.open(map, site[0]);

To have different marker for each on the map. Assuming you mean different markers images, you could either set them while creating markers or simply call site[i].setIcon('newImage.png'), later

ref:Google Maps API v3: How do I dynamically change the marker icon?

这篇关于Google地图默认显示infowindow和不同的标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！