How would one go about implementing the same type of marker grouping as found on this website? http://clevertrail.com/
Is this something that is delivered by the google maps api? If not, how can one create these kinds of groupings?
Any suggested solutions is greatly appreciated!
You can use marker cluster for that: http://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries. It does the grouping in JS but it's not very efficient.
you can try this code with your respective locations and values..
you need to include the marker cluster js to your code..get it from here markerclustrer.js
<script>
var markerCluster = [];
var all_markers = [];
var infowindows = [];
var map;
function initialize(){
var mapProp = {
center:center,
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);
addmarker(lat,long); //creating the marker....; function call can be looped
markerCluster = new MarkerClusterer(map, all_markers); //setting the markers' array as a cluster on google maps
}
function addmarker(lat,lng)
{
var mycenter = new google.maps.LatLng(lat,lng);
var marker = new google.maps.Marker({
position:mycenter,
});
all_markers.push(marker); //making an array of markers
}
</script>
After some investigating they seem to be using a third party plugin/extension to handle the marker grouping.. found on this page: http://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries
Related
I am converting the V2 code to V3. In the below two functions, they are used the getBoundsZoomLevel function. Instead of that function how to use in google map v3.
please help.
function fitSpecifiedMarkers(){
var bounds = new google.maps.LatLngBounds();
for (var i = markers.length-1; i>=0; i--) {
bounds.extend(markers[i].getPosition());
}
var zoomLvl = this.map.getBoundsZoomLevel(bounds); // V2 function, not available in v3.
if (zoomLvl > this.maximumZoom) {
zoomLvl = this.maximumZoom;
}
this.map.setCenter(bounds.getCenter(), zoomLvl);
}
function clusterMarker() {
var bounds = new google.maps.LatLngBounds();
var listen = google.maps.event.addListener(marker, 'click', function() {
// Center & zoom map to contain all map markers in cluster group when clicked
self.map.setCenter(bounds.getCenter(), self.map.getBoundsZoomLevel(bounds));
}
}
Thanks in Advance, for this help.
In your situation you can use Map.fitBounds(LatLngBounds) this "Sets the viewport to contain the given bounds."
I have developed a project which shows google map with multiple markers. My problem is that not all markers are shown on the initial load. ie. if i have four markers, only 2 are visible in the map when the map initially load.I have to zoom out to view the rest of the markers.
How can i solve the issue ?
Heres my code for getting Googlemap via javascript
window.onload=function(){
var mapOptions={
center:new google.maps.LatLng(markers[0].lat,markers[0].lng),
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var infoWindow=new google.maps.InfoWindow();
var map=new google.maps.Map(document.getElementById("dvMap"),mapOptions);
var bounds=new google.maps.LatLngBounds();
for(i=0;i<markers.length;i++){
var data=markers[i];
var latlng=new google.maps.LatLng(data.lat,data.lng);
var marker=new google.maps.Marker({
position:latlng,
map:map,
title:data.title
});
(function(marker,data){
google.maps.event.addListener(marker,"click",function(e){
infoWindow.setContent(data.description);
infoWindow.open(map,marker);
});
})(marker,data);
}
}
It's been a while since I did Google Maps API work but I believe what you need is this:
var bounds = new google.maps.LatLngBounds ();
// Go through each...
for (var i = 0, LtLgLen = LatLngList.length; i < LtLgLen; i++) {
// And increase the bounds to take this point
bounds.extend (LatLngList[i]);
}
// Fit these bounds to the map
map.fitBounds (bounds);
You already define the bounds array and loop your markers to just add each marker to the bounds array and then fitBounds.
See http://blog.shamess.info/2009/09/29/zoom-to-fit-all-markers-on-google-maps-api-v3/ for the original article.
for(i=0;i<markers.length;i++){
var data=markers[i];
var latlng=new google.maps.LatLng(data.lat,data.lng);
var marker=new google.maps.Marker({
position:latlng,
map:map,
title:data.title
});
bounds.extend(marker); // here is the code to add every marker plotted on bounds
(function(marker,data){
google.maps.event.addListener(marker,"click",function(e){
infoWindow.setContent(data.description);
infoWindow.open(map,marker);
});
})(marker,data);
}
map.setCenter(latlngbounds.getCenter()); // this will set the center of map to center of all markers
map.fitBounds(latlngbounds); // this will fit all the markers to screen
I've seen many other people with the same question but couldn't find a answer.
I have a simple map I built using the Google Maps Javascript api v3.
The map has a few markers which are linked to an infowindow to display specific information for each marker.
I want to add a google chart to the infowindow but just couldn't figure out how to do it.
I went through every single post I could find (here and in other forums) and I've noticed other people trying to do something similar but seems that there's no specific answer.
I've noticed people are successful doing such thing using fusion tables, but this is not my case as I which to load the data from a MySQL table.
For now I have a simple map which the code is shown below:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-33.837342,151.208954),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var data = [
['Bondi Beach', -33.891044,151.275537],
['Cronulla Beach', -34.046544,151.159601],
];
var myLatLng1 = new google.maps.LatLng(-33.891044,151.275537);
var myLatLng2 = new google.maps.LatLng(-34.046544,151.159601);
var marker1 = new google.maps.Marker({
position: myLatLng1,
map: map
});
var marker2 = new google.maps.Marker({
position: myLatLng2,
map: map
});
google.maps.event.addListener(marker1, 'click', function() {
var infowindow1 = new google.maps.InfoWindow();
infowindow1.setContent('Display the chart here');
infowindow1.open(map, marker1);
});
google.maps.event.addListener(marker2, 'click', function() {
var infowindow2 = new google.maps.InfoWindow();
infowindow2.setContent('Display the chart here');
infowindow2.open(map, marker1);
infowindow2.setContent('Display the chart here');
infowindow2.open(map, marker2);
});
}
and here is the code for a simple chart for example:
https://google-developers.appspot.com/chart/interactive/docs/quick_start
I've tried many different approaches and the one the seems more obvious to me was to add a container () within the setContent property of the InfoWindow and then call an external function which creates the chart. This doens't seems to work as the function can't see the container.
I've also tried to embed the entire code for the chart in the setContent property as suggested on this post:
using google chart tools in a google maps api infowindow content string
I've managed to execute the code with no errors, however nothing is shown.
Anotther approach would be create the chart in another html page and somehow set this page to the setContent property, also no success achieved.
I'm about to give up as I can't see a way of doing this.
I'd appreciate any help.
Thanks
Jose
This doens't seems to work as the function can't see the container.
You may pass the container as argument to drawChart()
But I guess you like to draw the chart populated with data related to the marker , so I would suggest to pass the marker as argument to drawChart() and create the infoWindow there.
Sample-code(without implementaion of marker-related data, as it's not clear what kind of data you like to draw)
function drawChart(marker) {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'Pizza sold # '+
marker.getPosition().toString(),
'width':300,
'height':200};
var node = document.createElement('div'),
infoWindow = new google.maps.InfoWindow(),
chart = new google.visualization.PieChart(node);
chart.draw(data, options);
infoWindow.setContent(node);
infoWindow.open(marker.getMap(),marker);
}
usage:
google.maps.event.addListener(marker1, 'click', function() {
drawChart(this);
});
Demo: http://jsfiddle.net/doktormolle/S6vBK/
I am trying to trigger a click on the Weather Layer of a google maps instance in order to open the weather info window of a city:
//Create the map
var options = {
center: new google.maps.LatLng(49.265984,-123.127491),
};
var map = new google.maps.Map(document.getElementById("map_canvas"), options);
//Create the weather layer
var weatherLayer = new google.maps.weather.WeatherLayer();
weatherLayer.setMap(map);
//Create the event, how?
var event = ?;
//Trigger the click
google.maps.event.trigger(weatherLayer, 'click', event);
The problem is the event that I have to pass to the trigger function. It must be an instance of WeatherMouseEvent. This instance is created by the layer when the user clicks on one of its markers, and I don't know how to generate this event.
Thanks!
Try this:
var infoWindow = new google.maps.InfoWindow();
var wEvent = google.maps.event.addListener(weatherLayer, 'click', myWeatherClick);
function myWeatherClick(wme) {
infoWindow.setPosition(wme.latLng);
infoWindow.setContent(wme.infoWindowHtml);
infoWindow.open(map);
}
Trigger the event:
var wme = {
latLng: map.getCenter(),
infoWindowHtml:'I\'ve been clicked'
}
google.maps.event.trigger(weatherLayer, 'click', wme);
Currently it is not possible. I got a response from a Google Employee:
Unfortunately, it isn't possible to programmatically open a weather
layer info window. If you'd like to see this in the API, please file a
feature request: http://code.google.com/p/gmaps-api-issues/issues/list
Enoch
I created a feature request.
I have a problem with google maps V3
Code is part of example from google. I want to add listener to EACH marker, so I set marker as array. But its not working :(
can anyone help me?
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
// Add 10 markers to the map at random locations
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
var marker = new Array(10);
for (var i = 0; i < 10; i++) {
var latlng = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
marker[i] = new GMarker(latlng,{ draggable: true });
GEvent.addListener(marker[i] , "dragstart", function() {
map.closeInfoWindow();
});
GEvent.addListener(marker[i] , "dragend", function() {
marker[i].openInfoWindowHtml("text" + i);
});
map.addOverlay(marker[i] );
}
}
}
Google Maps v2 API is deprecated, you should use v3. See this working example using the new API: Google Maps JS API v3 - Simple Multiple Marker Example
This looks like Google maps api V2 code.
Replace GLatLng with google.maps.LatLng,
Replace GEvent with google.maps.event
Instead of map.addOverlay(marker[i]);, do marker[i].setMap(map); in V3.
For the rest, make sure to read the API documentation. There are lots of examples there that'll help you get going.