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.
Related
I want to change the marker icon when a certain condition is met using google maps API.
The GreenStatus, OrangeStatus and RedStatus variables are Gif. files. How do I change the icon from GreenStatus.gif to RedStatus.gif in realtime?
//Open Markers
var GreenStatus = "#ViewBag.GreenStatus";
var OrangeStatus = "#ViewBag.OrangeStatus";
var RedStatus = "#ViewBag.RedStatus";
//Create marker
var MiamiMarker = new google.maps.Marker
({
position: Miami,
map: map,
icon: GreenStatus
});
//Create function that checks if Miami is online or offline.
//If MiamiServer = online => icon: GreenStatus
//If MamiaServer = ofline => icon: RedStatus
Solution: setIcon() works.
I tested if it works in realtime with settimeout and that works aswell.
setTimeout(function() { MiamiMarker.setIcon(GreenStatus) }, 10 * 1000);
It's nice that you were able to address your issue.
However, I just want to share what I did. I used setInterval() function of native javascript.
setInterval(function(){
var e = document.getElementById("statusSelect");
var selectedStatus = e.options[e.selectedIndex].value;
setStatusColor(selectedStatus, marker);
},10 * 1000);
I used a drop down to change the status, and setInterval() will check what is the selected status in the drop down to update the marker's icon.
Working demo here: https://jsbin.com/siweve/edit?html,output
Hope it could help you and happy coding!
i was checking out the google map api to integrate in my website.
made this page with what ever i could understand so far.
everything is working fine but there is just one thing, that i want three markers on the same map.
when i am adding more than one markers then the map stops working.
test link : http://goo.gl/X9q92s
you will have a better understanding if u see my link.
this is the code that i got from google map api.
and i edited it to get grey scale map with my desired marker box.
i just want to add two more....
Please help.
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
You should place your "new marker" code into its own function, like so:
function LoadMarkers(name, lat, lng) {
var MarkerLatLng = new google.maps.LatLng(lat, lng);
var MarkerOption = { map: map, position: MarkerLatLng, title: name};
var Marker = new google.maps.Marker(MarkerOption);
}
Putting this into its own function allows you to "refresh" the markers with ease, by simply invoking the function with a timer or some other event. A program I'm working on refreshes the map every few seconds, as my data source is constantly changing with new/removed/updated records that should be reflected immediately on the map. I think this is a great way to do this.
Then, in your program, you can create a loop that shoots the information for each marker in by invoking the LoadMarkers function. I've recently fallen in love with SqlDataReader.
Your loop would iterate through a SqlDataReader and each record read will invoke the script like so:
InvokeScript("LoadMarkers", New Object() {name, lat, lng})
This is a great moment to also add an InfoWindow for each marker.
var infowindow = new google.maps.InfoWindow(
{
content: "Content here"
});
As well as a click listener for the InfoWindows. ;)
google.maps.event.addListener(Marker, 'click', function () {
typeof infoWindowsOpenCurrently !== 'undefined' && infoWindowsOpenCurrently.close(); //If there is an InfoWindow currently open, close it
infowindow.open(map, Marker); //Open a new one for the selected marker
infoWindowsOpenCurrently = infowindow; //Set the new info window to the temporary variable
});
Some might not like this method of using a loop. I like it because I can "personalize" each marker for each record, while personalizing each of their InfoWindows too. In my code above, assume that "name" is a unique ID that lets you specify a specific marker for later use, such as identifying which marker was clicked and which InfoWindow is currently open.
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 have Google Map created with version of Google Maps api v3. It's "standard" Google Map, filled with markers and clusters. Every marker and cluster have it's own InfoWindow, showed when end user click on it.
What I need is that when map is loaded, to open all of InfoWindows of all markers and clusters showed on map.
Right now, they are showed only when I click on them:
google.maps.event.addListener(markerGreenCluster, 'clusterclick', function(markerGreenCluster) {
var content = '';
var info = new google.maps.MVCObject;
info.set('position', markerGreenCluster.center_);
var infowindow = new google.maps.InfoWindow();
aIWgreen.push(infowindow);
var center = markerGreenCluster.getCenter();
var size = markerGreenCluster.getSize();
var markers = markerGreenCluster.getMarkers();
// more code goes here...
})
I noticed that problem is in cluster definition, and method markerGreenCluster.getSize(); It returns number of grupped markers, and it can return it after whole map is loaded, or something like that.
Can you help me how can I achieve that all of InfoWindows are open (showed) when map is loaded?
the infowindows only open on click because you're only creating them on the click event listener. Move the code creating the infowindows out of the click handler, into a window load event handler instead.
To do this, what I do is create a InfoWindows object and stored it into the marker. Something like this
function CreateMarker(Lat, Lng, Title, Content) {
var aInfoWin = new google.maps.InfoWindow({
content: Content,
position: new google.maps.LatLng(Lat,Lng)
});
var aMarker = new StyledMarker({
title: Title,
position: new google.maps.LatLng(Lat,Lng),
MyInfoWin: aInfoWin
});
aMarker.MyInfoWin.open();
}
You can access to the Marker InfoWindows where you like (events, code,.....) like the other properties.
Code non tested, only to get the idea
Regards
I have a Google Maps elevation service (for my Geography of Pennsylvania students) that works fine with point clicks on Google's basemaps. I would like to add a kml layer showing PA counties. When I add it, the elevation infowindow no longer displays. Is there a way to add the kml but suppress its click response so that the elevation response shows?
Current code (partial):
function initialize() {
var mapOptions = {
zoom: 7,
center: centerOfPA,
mapTypeId: 'roadmap'
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var paCounties = new google.maps.KmlLayer('http://mapmaker.millersville.edu/arcgis/services/PAcounties/MapServer/KmlServer', {suppressInfoWindows: true});
paCounties.setMap(map);
// Create an ElevationService
elevator = new google.maps.ElevationService();
// Add a listener for the click event and call getElevation on that location
google.maps.event.addListener(map, 'click', getElevation);
}
Either suppress click events on the KmlLayer (clickable: false) or handle the click events and call the elevation service (with the latLng from that click event).
Here is a working example