Using text instead of markers on Google Maps
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.
加载中,请稍侯......
精彩评论