Using text instead of markers on Google Maps_问答_开发者

Using text instead of markers on Google Maps

开发者 https://www.devze.com 2023-02-18 15:36 出处：网络

I\'m creating a map with hundreds of markers and info windows that go with each one of them. I\'m using custom icon instead of default one and marker clusterer to speed up loading.

I'm creating a map with hundreds of markers and info windows that go with each one of them. I'm using custom icon instead of default one and marker clusterer to speed up loading.

In every info window there is a link which leads to a certain article. In order to open that article, there are two actions involved:

You have to click on the marker
Info window opens, you see a name of the article and you have to click on the name (it's a link) to open the article

I would like to avoid one click. Is it possible to have a text marker (instead of seeing a custom icon) - you would see the text "article 1" and when you click on it, "article 1" opens?

Here is a part of my code:

<head>
<scrip开发者_StackOverflow社区t type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<script type="text/javascript"> 
var map = null;
var markerArray = []; //create a global array to store markers
var myPoints = [

[1, 1, 'Article 1'],
[2, 2, 'Article 2'],
[3, 3, 'Article 3'],

];
//create global array to store points

function initialize() {
    var myOptions = {
        zoom: 5,
        center: new google.maps.LatLng(2, 2),
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        navigationControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var mcOptions = {
        gridSize: 10,
        maxZoom: 15
    };
    var mc = new MarkerClusterer(map, [], mcOptions);

    google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
    });

    // Add markers to the map
    // Set up markers based on the number of elements within the myPoints array
    for(var i=0; i<myPoints.length; i++){
         createMarker(new google.maps.LatLng(myPoints[i][0], myPoints[i][1]), myPoints[i][2]);
    }

    mc.addMarkers(markerArray , true);
}

var infowindow = new google.maps.InfoWindow({
    size: new google.maps.Size(150, 50)
});

var image = '/321.png';
function createMarker(latlng, html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon:image,
        zIndex: Math.round(latlng.lat() * -100000) << 5
    });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString);
        infowindow.open(map, marker);
    });

    markerArray.push(marker); //push local var marker into global array
}

window.onload = initialize;
</script> 
</head>

Its not possible to replace marker with text, atleast not as of now, Google Maps team may add the feature in near future.

To circumvent this problem of clicking twice, what you can do is show the infoWindow when the user has the mouse over the marker, and when the user clicks the marker he will be directed to open the article/page.

You can take a look into the events sections for more info on handling events for marker. Google Maps Marker, you will have to scroll down a little for the events section.

Hope this helps.