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

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.

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);

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.

Remove default markers in google maps

I recently learn t to add custom markers to the Google maps. So i created a route with directions API. After that I added my own markers. Now i am facing a problem where both, the original one and the custom one are showing up. How can i remove the default markers to show my originals one.
Code I wrote to add custom markers
function addmarkers()
{
$.each(order,function(key,value)
{
geocoder.geocode( { 'address': waypts[value]}, function(results)
{
var source = 'images/markers/'+i+'.png';
var latlang = results[0].geometry.location;
var marker = new google.maps.Marker({
position: latlang,
map: map,
icon: source
});
});
});
};
I am calling this function just after the initialize() function
function initialize() // creating maps
{
google.maps.visualRefresh = true;
currentlocation = new google.maps.LatLng(mylat,mylong);
var mapoptions =
{
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: currentlocation
}
map = new google.maps.Map(document.getElementById('map'),mapoptions);
addmarkers();
directionsDisplay.setMap(map);
};
Now you can see in the pic, I am getting both the default as well as the customized markers. Where is this going wrong ?

Add a google chart to a infowindow using google maps api

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/

Sencha touch - unable to google map markers

I'm learning sencha touch and trying put markers on the google map. I've looked at most of the examples online but I'm unable to get the marker and the infoWindow to work. Below is my code:
myApp.views.MapCard = Ext.extend(Ext.Panel, {
id: "mapcard",
layout: 'card',
initComponent: function() {
this.map = new Ext.Map({
useCurrentLocation: true,
mapOptions: {
zoom: 12,
},
});
this.panel = new Ext.Panel({
layout: 'fit',
items: this.map,
});
this.items = this.panel;
myApp.views.MapCard.superclass.initComponent.call(this);
refresh = function(theMap) {
var geoTag = {
lat: '47.584863',
longi: '-122.147026',
text: 'Hello World',
}
addMarker(geoTag, theMap);
}
addMarker = function(geoTag, theMap) {
var latLng = new google.maps.LatLng(geoTag.lat, geoTag.longi);
var marker = new google.maps.Marker({
map: theMap.map,
position: latLng
});
google.maps.event.addListener(marker, "click", function() {
geoTagBubble.setContent(tweet.text);
geoTagBubble.open(theMap.map, marker);
});
};
geoTagBubble = new google.maps.InfoWindow();
refresh(this.map);
},
});
Ext.reg('mapcard', myApp.views.MapCard);
I'm also unable to get the current location of the user, I'm pretty sure that the map is not loaded during the initComponent. I would be calling a json service to pull the lat/lon and loop through later. If there is a better implementation, please let me know!
Thanks a ton!
Here's a pretty minimal example application that demonstrates this:
http://septa.mobi
You can find the source code under view-source or on GitHub:
https://github.com/mjumbewu/Septnuts/
Here's panel where marker are added to a map:
https://github.com/mjumbewu/Septnuts/blob/master/src/Septnuts/MapPanel.js
WARNING: there is a bug in Sencha Touch 1.x that prevents embedded Google Maps from receiving ANY click events
You need to include this patch after including sencha-touch.js in order for any click listener on the map to work:
https://github.com/mjumbewu/Septnuts/blob/master/src/sencha-maptouch-patch.js