Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
495 views
in Technique[技术] by (71.8m points)

jquery - Display infowindow by default and different markers in Google Maps

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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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?


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...