I'm using Google Fusion Tables API in my web application.
In my application, I'm using following api to draw kml(LineString).
var ftDefaultStyles = [{
polylineOptions: {
strokeColor: "#0000ff",
strokeWeight: 6}
}];
ftLayer = new google.maps.FusionTablesLayer({
map: map, // google.maps.Map object
styles: ftDefaultStyles,
suppressInfoWindows: true
});
ftLayer.setOptions({
styles: ftDefaultStyles,
query: {
select: 'geometry',
from: tableId
}
});
Several months ago(sorry, but not so clear), LineString had been displayed normally.
Now, sometimes LineString is not displayed.
When I investigated by Chrome DevTools(Network Tab),
Displayed case
http://maps.gstatic.com/cat_js/intl/ja_ALL/mapfiles/api-3/14/3/%7Binfowindow,stats,controls%7D.js
was called.
Not displayed case
http://maps.gstatic.com/cat_js/intl/ja_ALL/mapfiles/api-3/14/3/%7Bstats,controls%7D.js
was called.
If I clear my cache, "%7Binfowindow,stats,controls%7D.js" is called, and LineString is displayed at first request.
However, "%7Bstats,controls%7D.js" is almost called from next request.
Is this a api bug?
Thanks in advance.
Related
I'm using a code similar the one below to display buildings KML Layer. Click event works and i get name and HTML. What i need to do is, I want to change style of the clicked polygon/line. Let say I want to change border width. How can i do that?
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {
lat: 41.876,
lng: -87.624
}
});
var ctaLayer = new google.maps.KmlLayer({
url: 'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml',
map: map
});
ctaLayer.addListener('click', function(kmlEvent) {
//need to change style of the clicked element here.
});
}
You can't change the styling of a KmlLayer using the API.
Options:
use a FusionTablesLayer (import your KML into a FusionTable, you can dynamically style polylines from a FusionTable).
use a 3rd-party KML parser, like geoxml3 or geoxml-v3 to render the KML as native Google Maps JavaScript API v3 polylines, then modify those. Note that the 3rd-party parsers are subject to the same domain security policy for the KML, so can only access KML from other domains through a proxy.
example using geoxml3 (polylines change to yellow on mouseover)
Hey Im trying to use google maps within my MeteorJS project to have google maps display on a map all customers, and then to display an infoWindow when you click on one of the markers.
problem is anytime you click on the marker it re-renders the map from scratch, i know this has to do with the the reactivity of the Session variable being set when the infoWindow is being clicked.
is there any way avoid the map being re-rendered when the session variable is changing?
thanks.
below is the JS and template im using in my project.
<template name="customers_map">
{{#constant}}
<div id="mapWrapper">
<div id="map-canvas"></div>
</div>
{{/constant}}
</template>
the code for making the google maps and markers.
Template.customers_map.rendered = function() {
$("#map-canvas").height("400px");
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(p) {
Session.set("myLat", p.coords.latitude);
Session.set("myLng", p.coords.longitude);
});
}
Deps.autorun(function(){
var mapOptions = {
center: new google.maps.LatLng(Session.get("myLat"), Session.get("myLng")),
zoom: 15,
zoomControl: true,
zoomControlOptions: {style: google.maps.ZoomControlStyle.SMALL},
streetViewControl: false,
mapTypeControl: false,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.SMALL
}
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var infowindow = new google.maps.InfoWindow({
content: Template.customers_infoWindow()
});
Customers.find().forEach(function(customer) {
if (customer.loc != null) {
var geo = customer.geoLocation();
var marker = new google.maps.Marker({
position: new google.maps.LatLng(geo.lat, geo.lng),
title: customer.name(),
icon:'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
});
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function() {
Session.set("customerId", customer._id);
infowindow.open(map,marker);
});
} else {
console.log(customer.name() + " has no geoLocation");
};
});
});
};
the infoWindow template
<template name="customers_infoWindow">
<h1>{{record.name}}</h1>
</template>
and the js for the infoWindow template
Template.customers_infoWindow.record = function() {
return Customers.findOne({_id: Session.get("customerId")});
}
If you create a global googlemaps object, you can access its properties from anywhere. This article has a nice example of doing this.
The overall gist is:
Create a googlemaps class with an initialize method. At the end of the initialize method, set a session variable for your map's existence. ( Session.set('map', true);)
Call create a googlemap object by calling the googlemap init method from within Template.customers_map.rendered.
It's a bit difficult to be sure without having a running version in front of me, but I think this is essentially because you have all your code in one big Deps.autorun block. Clicking one of the markers is changing the Session variable customerId, which will cause customers_infoWindow to re-render (as it's clearly a dependency), but I'm sure this is the intended behaviour.
However, since you're declaring var infoWindow in your Deps.autorun block to have an instance of that template as one of its properties, I think that changing customers_infoWindow will actually invalidate the entire Deps.autorun calculation, which means the whole block will be executed again, including the var map = new google.maps.Map(...) line, which will essentially re-render the map (even though it doesn't re-render that actual div element that contains it).
So, I would suggest splitting your code into separate Deps.autorun blocks, and making sure that anything in the same block should be re-run at the same time - clearly, this means that the Google Maps initialisation code and the infoWindow handler should be in separate blocks.
To reiterate, I think that's what's going on, but you'll have to try it and let me know...
I'm building an application using CakePHP that will store events including the event location. When a user visits the application they will see a Google Map that will get their location and show events near them in the form of little pins that they can click on to view the event details.
I have some questions though:
1.) How would I store the Location in the DB? Would the actual geolocation coordinates be the best bet and how would I make it easy for a user to create an event and enter them.
2.) Once I have the events in place how do I create custom pins with the info pulled from the DB? Example like foursquare:
3.) Whilst getting the users location using HTML5 Geolocation how do I show a little loader on the map again like Foursquare does?
So far I've managed to create the Map and make the controls minified and get the location of the viewer but I'm not sure how do 3 and show a better feedback to the user for the geolocation.
If someone could help me with those other two questions as well it'd be very much appreciated as I'm finding it very confusing so far. Thanks.
var map;
function initialize() {
var myOptions = {
zoom: 8,
panControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'Location found using HTML5.'
});
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
google.maps.event.addDomListener(window, 'load', initialize);
1) Store the actual coordinates of the location and any extra meta data (if you have it) like place name, foursquare_id, date, etc. Storing it this way will make using the data later on straightforward, such as plotting on a map or location name lookup. This will be your Location model.
Create an Event model which you can then associate to a Location. You could hack together some nice interactive functionality using event handlers on your map markers.
Something like: "the user clicks a location on the map, up pops a box asking them would like like to create a new event at this location, marker is added to the map and a form appears where they can populate the event details, etc, etc." You get the idea.
Have a look at the Marker documentation.
2) You can set a custom image for the map markers using ImageMarker Class. Take a look at the huge set of examples for ideas of what's possible.
3) The navigator.geolocation.getCurrentPosition() method as I understand it, is asynchronous. The first argument is the successCallback.
With this in mind, you could set an overlay on your map: "Finding your location", then make the call to getCurrentPosition(). In your successCallback function, you would then hide the overlay.
I am working on google map api v3 and want to add a feature of editing the polyline. As of the google documentation. There are 3 events fired when a polyline is in edit mode.
insert_at
set_at
remove_at
I know when first two events are fired and am able to get the edited coordinates as well. I also want to delete a node but not sure how it works?. Can anyone tell me when will the event "remove_at" will be fired ?
According to the documentation these events belong to class google.maps.MVCArray. You can find there also a description of remove_at event:
This event is fired when removeAt() is called. The event passes the
index that was passed to removeAt() and the element that was removed
from the array.
But I'm not sure you can use these events to handle changes while editing the Polyline. That's very interesting, please let us know if it works and how!
'remove_at' will be triggered when you undo an edit to an existing overlay that results in control point(s) getting removed.
I've created a fiddle to demonstrate this.
From the fiddle:
var myLatlng = new google.maps.LatLng(60.629765, 6.424094);
var myOptions = {
zoom: 14,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var drawMan = new google.maps.drawing.DrawingManager({
map: map,
drawingControl: false,
polygonOptions: {
editable: true,
draggable: true
}
});
drawMan.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
google.maps.event.addListener(drawMan, 'overlaycomplete', function (event) {
// When draw mode is set to null you can edit the polygon you just drawed
drawMan.setDrawingMode(null);
google.maps.event.addListener(event.overlay.getPath(), 'remove_at', function () {
alert('remove_at triggered');
});
});
this has been baking my noodle for months, I'll be honest, I am a designer not a programmer so this type of scripting is a bit harder than the average jquery/javascript that I'm used too.
I can't find any basic documentation on how to implement it, apart from this but it's not massively intuitive - http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-mobile-example.html
I've tried making a JSfiddle, but I can't even get it to work (now working thanks to Tsar)
I've built a jQuery mobile app and I'm desperate to get the geo-location functionality working with fusion table markers (from my fusion table) and to be allowed to click on the fusion table markers to reveal a info window. This info window will be constructed in fusion tables.
I need the geo-location to center the map on the devices current location - if the geo-location is not available or denied by device user, then the map needs to be centered on these co-ordinates 52.450939, -1.721002.
What would be the next level is to have the the jQuery mobile UI pop-up window but this is not critical, just the standard bubble on the map is fine.
A updated JSFiddle... http://jsfiddle.net/twGHC/30/
My fusion table number is: 1260763
Default location is: (only if Geo location is not available) 52.450939, -1.721002
Zoom level: 13
Any advice would be awesome, please feel free to JSfiddle it. Thanks in advance.
Here's a working solution, which detects user's location, drops a marker on it and plots the map with your Fusion Markers. As per Google Maps v3 API documentation:
$(function() {
var position = new google.maps.LatLng(52.450939, -1.721002);
getCurrentPosition = function(callback) {
// Try W3C Geolocation (Preferred)
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function(pos) {
position = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
callback(position);
}, callback(position));
} // Try Google Gears Geolocation
else if (google.gears) {
var geo = google.gears.factory.create('beta.geolocation');
geo.getCurrentPosition(
function(pos) {
position = new google.maps.LatLng(pos.latitude,pos.longitude);
callback(position);
}, callback(position));
} // Browser doesn't support Geolocation
else {
// Drop the user off in Coventry =)
callback(position);
}
};
// call the above function
getCurrentPosition(InitMap);
});
function InitMap(pos) {
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: pos,
zoom: 14,
mapTypeId: 'roadmap'
});
var marker = new google.maps.Marker({
position: pos,
animation: google.maps.Animation.DROP,
map: map,
title: "You are here, mate!"
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'Geocodable address',
from: '1260763'
},
});
layer.setMap(map);
};
When user denies tracking of his location, exception is caught in getCurrentPosition, however, 2nd optional parameter in this function is an exception handler, so what I did is simply passed in callback(position) so that default location sets on the map. If you don't want to do it, move out the map initializer code from InitMap into separate function and call it instead, when exceptions are caught, to display a blank map.
See it in action here: http://jsfiddle.net/twGHC/36/
P.S. In case your next question is "how to add a balloon pop-up on marker click", here's what you need to do.
Here is how to do it with jquery-ui-map:
http://jsfiddle.net/rweCf/1/
http://jsfiddle.net/rweCf/1/embedded/result/
If you just want to change within a certain radius of the client position this is how you would do it
http://jsfiddle.net/Ywknf/1/ (client location is the initial point so everyone can see the results)
Here is the code if the url isnt working or the trunk code changed
$(function() {
$('#map_canvas').gmap({'center': '52.450939, -1.721002', 'zoom': 10, 'disableDefaultUI': true, 'mapTypeId': 'terrain'}).bind('init', function(event, map) {
$('#map_canvas').gmap('getCurrentPosition', function(results, status) {
if ( status === 'OK' ) {
var position = new google.maps.LatLng(results.coords.latitude, results.coords.longitude);
var marker = $('#map_canvas').gmap('get', 'markers > client' );
if ( !marker ) {
$('#map_canvas').gmap('addMarker', { 'id': 'client', 'position': position, 'bounds': true });
} else {
marker.setPosition(position);
map.panTo(position);
}
} else if ( status === 'NOT_SUPPORTED' ) {
$('#map_canvas').gmap('addMarker', { 'id': 'client', 'position': $('#map_canvas').gmap('get', 'map').getCenter(), 'bounds': true });
}
});
$('#map_canvas').gmap('loadFusion', { 'query': { 'select': 'Geocodable address', 'from': 1260763 } } );
});
});