We have google maps implemented with markerclusterer and OverlappingMarkerSpiderfier. Clustering and Spiderfy working fine. But we have implemented search where user search for a specific location based on name and below function will be called. Search is working fine except for the locations with same coordinates. We have implemented OverlappingMarkerSpiderfier and working fine but for spiderified locations zoom in not working fine and its pointing to map center.
function showMarkerInfo(index)
{
hidePopup('popup');
map.setCenter(new google.maps.LatLng(filterMarker[index].get('LATITUDE'),filterMarker[index].get('LONGITUDE')));
idleMapZoomListener = google.maps.event.addListener(map, 'idle', function() {
google.maps.event.trigger(filterMarker[index], "click");
map.setCenter(new google.maps.LatLng(MAP_INIT_LAT,MAP_INIT_LNG));
google.maps.event.removeListener(idleMapZoomListener);
});
if (map.getZoom() == 16 ) {
map.setZoom(17);
} else {
map.setZoom(16);
}
}
We used oms.trigger("click",filterMarker[index]); instead of google.maps.event.trigger(filterMarker[index], "click"); and its working fine.
Related
I need to know about to get google map points location in Meteor JS.For example in my map showing 10 pointers based on location latitude and longitude.When ever click a marker then shows location based on that pointer in a new window(or popup).
I didn't get any idea about this.So please suggest me what to do for this?
Thanks in advance.
What you need here its an InfoWindow, wich have the content option.
So lets say you have this simple initialize function
initializeMap = function() {
//Common code to init the map.
//common code to create dynamic markers already give you an answer here
//https://stackoverflow.com/questions/28424854/how-can-i-create-multiple-markers-on-a-google-map
//now on the same function lets add this code
function createMarkers(){
for(var i = 0 ; i <latLong.length ; i++) {
//lati and long are declared as global variables.
lati = latLong[i].lat;
longi = latLong[i].long;
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lati, longi),
map: map,
icon: 'http://Yourimagesourcehere'
});
//and this is how you call it.
myInfoWindow(marker2,map,lati,long);
}
//Function to created infoWindows.
function myInfoWindow(marker2,map,lati,long){
google.maps.event.addListener(marker2, 'mouseover', function() {
for(var i=0;i<markerArray.length;i++){
infoWindow.setContent( 'My lat is ' + lati + "my long is " + longi );
infoWindow.open(map, marker2);
}});
google.maps.event.addListener(marker2, 'mouseout', function() {
infoWindow.close();
}
}
}
So like you see based on the other question How can i create multiple markers on a google map, in this example we added the new function named myInfoWindow with 4 parameters, the marker,the map, and the 2 variables for the content (in this case late,long)
If you have doubts about how to init the map or how the code should look i have this DEMO and here is the Source Code, just add the infoWindow function inside the createMarkers function and it should work.
Tell me if Works.
I have a webmap with GMaps & GEarth integrated, in order for the user to switch between different views.
I load 3 KML files and control their visibility using checkboxes. This example here uses the same function stackOverflowQuestion
When I switch views Map - Satellite - Earth I have my KMLs working on Map & Satellite view, BUT not on Earth View.
function init() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: new google.maps.LatLng(xx, xx),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
googleEarth = new GoogleEarth(map);
google.maps.event.addListenerOnce(map, 'tilesloaded', addOverlays);
}//end init
[...]
function OnOffKML(i) {
if(currentKmlObjects[i].getMap() === null) {
currentKmlObjects[i].setMap(map);
}
else {
currentKmlObjects[i].setMap(null);
}
}
this function works for Google Maps Api 3, but not for Google Earth plugin...
Does this mean I have to use the fetch{} for it to show on GE? Is there a workaround?
Could I exclude my toggleKML{} for the earth view in any way?
OK,
The problem here is that we cannot code for GM Api 3 and expect to have results for GE Api as well.
Sure the two can be integrated but you have to decide that one of the two will have limited functionality.
Thus I decided to split the application up, work separately and efficiently.
As for GE method for KML usage, I have used the fetch{} function, along with checkbox selection.
That is not strictly true, you would just need to reload your Kml into the earth API.
You could modify your OnOffKML function to act differently depending on the current mode (earth/maps).
The problem you have currently is that you are using Google Maps Api methods, on the Google Earth plugin.
Anyhow, something like the following would work, allowing the method to handle both.
function OnOffKML(i) {
if(googleEarth.getWindow().getVisibility()) {
// code for earth api
} else {
// code for maps api
}
}
I am working on a project where I want to show markers on a map.
These markers should be published from server with a viewport-constraint. That means that just markers are published which are inside the current users viewport.
The publication looks something like this:
//server
Meteor.publish('posts', function(bottom_left_x, bottom_left_y, upper_right_x, upper_right_y, limit) {
return Posts.find({locs: {$geoWithin: {$box:
[[bottom_left_x, bottom_left_y],
[upper_right_x, upper_right_y]]}}},
{sort: {submitted: -1}, limit: limit});
});
I always call this function via subscription when my map_center changes:
//client
google.maps.event.addListener(map, 'idle', function(event) {
var bounds = map.getBounds();
var ne = bounds.getNorthEast();
var sw = bounds.getSouthWest();
postsHandle= Meteor.subscribe('posts', sw.lat(), sw.lng(), ne.lat(), ne.lng(), 10);
});
Till now everything works fine.
Further i created a observefunction on posts, that renders a marker when "added" is called and remove when "removed" is called. Observe is very good to render new markers and to destroy the old ones
//client
Posts.find().observeChanges({
added: function(post) {
// when 'added' callback fires, add HTML element
var marker = new google.maps.Marker({
position: new google.maps.LatLng(post.locs.lat, post.locs.lng),
postId: post._id,
map: map,
});
},removed .... and so on
That problem is that the observe-Callback is triggered on the whole Posts-Collection. But i just want to show markers which are inside the users viewport. Thats why i normally have to do something like this:
//client
Posts.find({locs: {$geoWithin: {$box:
[[bottom_left_x, bottom_left_y],
[upper_right_x, upper_right_y]]}}},
{sort: {submitted: -1}, limit: limit}).observeChanges({
But thats not possible. GeoWithin is not supported inside minimongo and it is not possible to call oberserve with a collection that has a limit.
Has anyone an idea how to accomplish this?
Maybe there is a way to push the posts i get from subcription directly to the map without using a query on minimongo?
The solution is so easy !
Meteor.autosubscribe( function () {
Meteor.subscribe( 'chat', { room: Session.get( 'currentRoom' ) } );
} );
If you want to limit your subscription to the maps viewport with changing viewport-bounds, than you have to use autosubscribe. It seems that autosubscribe takes care of changing subscription-arguments :)
Meteor.autosubscribe( function () {
var a = Session.get('bounds');
if(a)
Meteor.subscribe( 'posts', a.swlat, a.swlng, a.nelat, a.nelng, 5 );
} );
I've done well by my standards! I have pretty much zero knowledge of JS other than the basics of Functions etc. Ive used these pages to pull together a working script that loads Google Maps into a Modal using the SimpleModal framework. To my relief I got it working but it has one final bug that I cannot shift. The Modal loads on the first click of the HREF but if I close the modal and then try to reopen it it loads the modal with parts of the map missing. The missing map issue was a problem i thought I had already solved. My JS is
var map;
var src = 'https://sites.google.com/site/bristol2monaco/kml/route2.kml';
function initialize() {
var myLatlng = new google.maps.LatLng(51.337890,-0.813049);
map = new google.maps.Map(document.getElementById("basic-modal-content"), {
center: myLatlng,
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
loadKmlLayer(src, map);
}
function loadKmlLayer(src, map) {
var kmlLayer = new google.maps.KmlLayer(src, {
suppressInfoWindows: true,
clickable: false,
preserveViewport: true,
map: map
});
}
initialize();
and the js file that registers the 'click' contains:
jQuery(function ($) {
// Load dialog on page load
//$('#basic-modal-content').modal();
// Load dialog on click
$('#table .newbasic').click(function (e) {
$('#basic-modal-content').modal();
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
return false;
});
});
As i thought i had already solved the missing map bug (using solutions posted here) with the (map, resize) line above none of the solutions on here help. Do i have to reinitialise the map or something. Grateful for advice.
When you call the modal to open use the onOpen Function described by Eric Martin. With using his onOpen function you will be able to use the callback feature and thusly use the google map event-listener to listen for the resize event. Once the resize event has been heard, you can reinitialize your google map thusly removing the gray areas
$("#table .newbasic").modal({
onOpen: function (dialog) {
google.maps.event.addListenerOnce(map, 'resize', function() {
//Alert TESTING IF RESIZE is heard(remove after test)
alert("heard resize onOpen");
initialize();
map.setCenter(center);
});
google.maps.event.trigger(map, "resize");
}
});
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 } } );
});
});