Add a google chart to a infowindow using google maps api - google-maps

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/

Related

google maps -- incorrect pop-up information

I have converted multiple shapefiles to KML using the Shp2kml2 software from Zonums Solutions. I have made a map with the KML layers (of which I have imported to google docs to get the url). My map is found at: http://userpages.flemingc.on.ca/~catam/collab2.html
I have:
6 polygon KML layers,
1 point KML layer,
1 Google Fusion Table point layer
But when I try to click on a specific point, the pop-up information is that of the polygon which rests in the same place as the specific point.
My code is:
var map, layer2;
function initialize() {
var ontario = new google.maps.LatLng(49.2867873, -84.7493416);
var mapOptions = {
zoom: 5,
center: ontario
}
var infoWindow = new google.maps.InfoWindow();
var openInfoWindow = function (KMLevent) {
infoWindow.close();
infoWindow.setOptions(
{
content: KMLevent.featureData.infoWindowHtml,
position: KMLevent.latLng,
pixelOffset: KMLevent.pixelOffset
});
infoWindow.open(map);
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var kmlOptions = {
suppressInfoWindows: true, // do not to display an info window when clicked
preserveViewport: false,
map: map
};
var urls = [
'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkajc2OGZTZDZBV0k&export=download', // SCHOOLS, NDP, LIBERAL, PC1, PC2, PC3,
'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkQzRSdVB1TVRseU0&export=download', 'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkWFlscVM5N01lSDQ&export=download', 'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkbHNSTjhCN1dLQTg&export=download', 'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkdnRoYnN1bnpubEU&export=download', 'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkaHg1WlNKdU1VWHc&export=download'
];
layer2 = new google.maps.FusionTablesLayer({
query: {
select: 'col9',
from: '1FzRSqRcxY37i7VtejqONHhAB-MrzFhakYSvZaIvo'
}
});
layer2.setMap(map);
urls.forEach(function(url) {
var layer = new google.maps.KmlLayer(url, kmlOptions);
layer.setMap(map);
KmlLayer.setZIndex(999);
google.maps.event.addListener(layer, "click", openInfoWindow);
});
}
//initialize();
google.maps.event.addDomListener(window, 'load', initialize);
It looks like the polygon layers are getting plotted over the points. Due to this even though you think you're clicking on the point the actual click event is generated on the polygon.
One solution would be to plot the polygons first followed by the points.
If that's not possible then you should set the z-index of the layer depending on whether it is a polygon or point.
kmlLayer.setZIndex(999);
The higher the z-index the higher the layer will be. I would suggest using a high z-index for the points while using a low z-index for the polygons. That should solve your problem.
The first option would be to move the url for points after the polygon urls. This should work without the need for z-index and will work without changing any of the code.
var urls = [
'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkQzRSdVB1TVRseU0&export=download', 'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkWFlscVM5N01lSDQ&export=download', 'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkbHNSTjhCN1dLQTg&export=download', 'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkdnRoYnN1bnpubEU&export=download', 'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkaHg1WlNKdU1VWHc&export=download',
'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkajc2OGZTZDZBV0k&export=download', // SCHOOLS, NDP, LIBERAL, PC1, PC2, PC3,
];
The second option is to remove the points url from the array and add that separately. First plot the polygons as shown below.
var urls = [
'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkQzRSdVB1TVRseU0&export=download', 'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkWFlscVM5N01lSDQ&export=download', 'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkbHNSTjhCN1dLQTg&export=download', 'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkdnRoYnN1bnpubEU&export=download', 'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkaHg1WlNKdU1VWHc&export=download',
];
urls.forEach(function(url) {
var layer = new google.maps.KmlLayer(url, kmlOptions);
layer.setZIndex(10);
layer.setMap(map);
google.maps.event.addListener(layer, "click", openInfoWindow);
});
After this add the points layer
var pointsUrl = 'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkajc2OGZTZDZBV0k&export=download'; // SCHOOLS, NDP, LIBERAL, PC1, PC2, PC3,
var layer = new google.maps.KmlLayer(url, kmlOptions);
layer.setZIndex(10);
layer.setMap(map);
google.maps.event.addListener(layer, "click", openInfoWindow);

On click Data populate in info window of a polygon using GeoXMl3

I'm using geoXMl3 to parse multiple kml files at a time.
I'm getting polygons plotted on the map. when I click on the polygon an info-window pops up. I'm not getting from where this info-window is coming up
My requirement is I want to edit the content of info-window through some java-script object
My java-script object will be like
popUpDetails = {'district-name':'content'}.
Not getting how to pass this in my parser
I have refered few links like:
https://code.google.com/p/geoxml3/wiki/Usage
and also how could I put data dynamically from database in infowindow of a certain polygon?
I'm parsing kml files this way:
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var parser = new geoXML3.parser({
map: map,
processStyles: true,
zoom: false,
});
var infowindow = new google.maps.InfoWindow();
for (i = 0; i < ListofPathsofkmlfiles.length; i++) {
parser.parse([ListofPathsofkmlfiles[i]]);
}
Advance thanks for your help
I have finally figured out solution for same.
You need to overwrite createPolygon attribute of your parser for same.
var districtInfoMap = {doc_url1:infowindow_content1, doc_url2:infowindow_content2 };
var parser = new geoXML3.parser({
createPolygon: mapDrawingToType(),
map: map,
processStyles: true,
zoom: false,
singleInfoWindow: true,
});
mapDrawingToType = function() {
return function(placemark, doc) {
var polygon = geoXML3.instances[geoXML3.instances.length-1].createPolygon(placemark, doc);
if(polygon.infoWindow) {
polygon.infoWindowOptions.content = districtInfoMap[doc.baseUrl];
}
return polygon;
}
}
Here I have made one object containing the map of district url and window content you have to show.
This will overwrite the default behavior of how your infowindow is displayed and the desired content you want to show will be displayed.
If you still face any issue please do let me know.

need to add multiple markers using custom google map api

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.

Add multiple charts into a Google Maps Infowindow

I was really struggling to add a google chart onto a google maps infowindow. So, I've found a really precious help from Dr. Molle (thanks once again mate) on the post below.
Add a google chart to a infowindow using google maps api
My struggle now is to add more than one chart into the infowindow. I've managed to do so concatenating each container through its the innerHTML and it works just fine, except for the fact that the chart loses its functionality (can't use the mouse over option).
This is the code I came up with to add using the innerHTML and I'd like to know if there's a way to preserve the charts functionality.
function drawChart(marker,map) {
// Create the data table.
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Orange', 80],
['Apple', 55],
['Watermelon', 68]
]);
var options = {
width: 300, height: 150,
redFrom: 0, redTo: 25,
yellowFrom:26, yellowTo: 50,
greenFrom:51, greenTo: 100,
minorTicks: 5
};
var nodeGauge = document.createElement('chart_div'),
infoWindow = new google.maps.InfoWindow(),
nodeCol = document.createElement('col_div');
chart = new google.visualization.Gauge(nodeGauge);
colChart = new google.visualization.ColumnChart(nodeCol);
colChart.draw(data,{});
chart.draw(data, options);
infoWindow.setContent(nodeGauge.innerHTML + nodeTab.innerHTML);
infoWindow.open(map,marker);
}
I think you can create a <div> for each chart, append them both to another div tag, and set that as the InfoWindow's content.
var nodeGauge = document.createElement('div'),
infoWindow = new google.maps.InfoWindow(),
nodeCol = document.createElement('div'),
parentDiv = document.createElement('div');
chart = new google.visualization.Gauge(nodeGauge);
colChart = new google.visualization.ColumnChart(nodeCol);
parentDiv.appendChild(nodeGauge);
parentDiv.appendChild(nodeCol);
colChart.draw(data,{});
chart.draw(data, options);
infoWindow.setContent(parentDiv);
infoWindow.open(map,marker);

Creating a Interface for Insering Google Maps

I am trying to create a site that has option to add maps to the site using google maps api. I found hundreds of tutorial and blog posts on embeding map in the site. But what I actually want is a way to give the user choose a place on the map and add marker. Then get the co-ordinates of the marker and store it in the database of retrieving and showing in the front-end. I have seen this option given wordpress plugins like mappress. But now I'm trying to achieve this in codeigniter. I can't find any thing to start on. Can any one point out some one tell me where to start?
This is really easy the 3rd version of the Google maps API. Versions before that where much more complicated, and most of the tutorials floating around are for those versions. Have a look through the API documentation and examples.
Adding a marker is as simple as:
var marker=new google.maps.Marker({/* ... see API */});
Adding an event (eg click) to a marker is as simple as:
var marker_click=new google.maps.event.addListener(
marker,
'click',
function() {/*...*/});
Sounds like you'd want a click event for the map, which you'd translate into a latlong, then (a) generate a marker on the map with JS, and (b) post that back to your server using AJAX, or by storing the values in a hidden form field to be submitted after.
Update:
Mostly from the API documentation # http://code.google.com/apis/maps/documentation/javascript/events.html:
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
var clickedLocation = new google.maps.LatLng(location);
var marker = new google.maps.Marker({
position: location,
map: map
});
map.setCenter(location);
/*Do your processing here:
* eg. ajax.post('addMarkerDB&lat='+location.lat+'&long='+location.long);
*/
}
Note: There is no ajax.post function by default, but there could be :)