I have been trying to get the 'example/form.html' page to initialize in the browser with the browser's current location. To no avail. With this I was trying to pass in a variable of the browser's current location using jQuery. I have also tried to set the location variable in jquery.geocomplete.js manually, using an array, also to no avail. I was trying this:
var defaults = {
bounds: true,
country: null,
map: false,
details: false,
detailsAttribute: "name",
location: ['-27.470933,153.023502'],
I have also tried location: ['-27.470933','153.023502'].
My understanding is that 'bounds' should be set as a meter radius so I will probably also fill that with 5000 if the initial will load. I have also tried pulling in using:
position.coords.latitude
position.coords.longitude;
Any direction on where I should be looking will be appreciated. Another alternative could be just to use the Google AutoComplete though I have been having the same problem.
I'm not really sure what you are trying to pull off with JQuery Geocomplete.
But to access your HTML5 latitude and longitude position, here's some script:
function init() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(browser_geolocation_success, browser_geolocation_error);
}
}
function browser_geolocation_success(geolocation) {
// now here you access your html5 latitude and longitude
// by requesting -> geolocation.coords.latitude ;and -> geolocation.coords.longitude
}
In the last function above, you can do stuff with your position, like create a marker on a Google Maps thats loaded within your HTML already.
Related
I am using street view on my site with pancontrols and zoomControls in it. For now google provides us some defined positions like RIGHT_CENTER etc. I want my custom position using css, I have taken help from this link Google Maps API V3 custom controls position but it is not working may be because it is for Road map and I need for street view. The code which I have used for calling street view is
function initialize() {
var fenway = new google.maps.LatLng(42.345573, -71.098326);
var panoOptions = {
position: fenway,
pov: {
heading: 280.19,
pitch: -22.444,
zoom:0.2
},
addressControl: false,
panControlOptions: {
position: google.maps.ControlPosition.RIGHT_CENTER
},
panControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_CENTER
},
enableCloseButton: false
};
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('map-canvas'), panoOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
Thanks in Advance.
Check Custom Street View examples and this CUSTOM STREET VIEW FIDDLE
AFAIK you must link your panorama to the image of the streetview, thats nice if you want to make your own street view, if you want to get a google one, you must get the URL to force the view enter in streetview.
function getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) {
// Note: robust custom panorama methods would require tiled pano data.
// Here we're just using a single tile, set to the tile size and equal
// to the pano "world" size.
return 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQTaHe0F0J39SXbiRF43pz2wtyfD6kypCMrLxhWPkq9EACNgwO0iaMbJFM';
}
You have everything that you need to do this in the answer that you linked to above. You can pick from one of two choices:
The hack... This isn't recommended because if google maps decides to
change their layout, your code will break. To do this for
streetview, inspect the streetview window to find which 'gmnoprint'
you want to move. As an example, putting this after the panorama
load, moves the controls:
setTimeout( function() {
$($('div.gmnoprint')[4]).css({left: '-300px', background: 'red'});
}, 1000);
The best way to do it, as suggested at Google Maps API V3 custom controls position is to hide the streetview controls, create your own controls, and put them wherever you like. This takes much more effort, but it will not break when the streetview layout changes.
I have been making a script using a fusion table's layer in google maps.
I am using geocoder and get the coordinates of a point that I need.
I put a script that changes the style of a polygon from the fusion table when you click on it, using the google.maps.event.addListener(layer, "click", function(e) {});
I would like to use the same function that I call in the case of a click on the layer, but this time with a click with the coordinates that I got.
I have tried google.maps.event.trigger(map, 'click', {latLng: new google.maps.LatLng(42.701487,26.772308)});
As well as the example here > Google Fusion Table Double Click (dblClick)
I have tried changing map with layer...
I am sorry if my question is quite stupid, but I have tried many options.
P.S. I have seen many post about getting the info from the table, but I do not need that. I want to change the style of the KML element in the selected row, so I do not see it happening by a query.
Here is the model of my script:
function initialize()
{
geocoder = new google.maps.Geocoder();
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
layer = new google.maps.FusionTablesLayer({
suppressInfoWindows:true,
map : map,
query : {
select: 'Местоположение',
from: '12ZoroPjIfBR4J-XwM6Rex7LmfhzCDJc9_vyG5SM'
}
});
google.maps.event.addListener(layer, "click", function(e) {
SmeniStilRaionni(layer,e);
marker.setMap(null);
});
}
function SmeniStilRaionni(layer,e)
{
...
}
function showAddress(address)
{
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var point = results[0].geometry.location;
//IMITATE THE CLICK
}
});
}
In response to geocodezip
This way you hide all the other elements... I do not wish that. It is like if I want to change the border of the selected element. And I do not wish for a new layer.
In the function that I use now I push the style of the options of the layer and then set the option. I use the e from google.maps.event.addListener(layer, "click", function(e)); by inserting e.row['Name'].value inside the where rule.
I would like to ask you if there is any info on the e variable in google.maps.event.addListener(layer, "click", function(e));
I found out how to get the results I wanted:
For my query after I get the point I use this:
var queryText ="SELECT 'Районен съд','Окръжен съд','Апелативен съд','Местоположение' FROM "+FusionTableID+" WHERE ST_INTERSECTS(\'Местоположение\', CIRCLE(LATLNG(" + point.toUrlValue(6) + "),0.5));";
queryText = encodeURIComponent(queryText);
document.getElementById("vij query").innerHTML = queryText;
var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
And then I get these results:
var rsyd = response.getDataTable().getValue(0,0);
var osyd = response.getDataTable().getValue(0,1);
var apsyd = response.getDataTable().getValue(0,2);
And then, I use the following:
where: "'Районен съд' = '"+rsyd+"'",
Which is the same as:
where: "'Районен съд' = '"+e.row['Районен съд'].value+"'",
in the click function.
This is a working solution for my problem.
But still, I cannot find a way to Imitate a Mouse click.
The issue is this: the data(row) for the layers will be requested via AJAX when you click on a layer.
In theory it's possible to select a geometry(polygon) by a given LatLng, the geometry-library has a method for this: google.maps.geometry.poly.containsLocation().
Unfortunately the FusionTableAPI does not support such queries(ST_CONTAINS), you cannot select a row by supplying a LatLng and selecting the rows where the geometry contains the LatLng.
So what you can do: create a copy of the table that contains the columns needed to select a row(Община...the distinct value, and Местоположение.... the geometry). This copy may be requested via AJAX, but when the FusionTable will not be modified anymore I would suggest to use a hardcoded copy.
What to do now when you want to simulate the click:
Iterate over all rows of the copy, use the mentioned containsLocation()-method to check if the geometry(Местоположение) contains the LatLng and when it does apply the query by using the value of the distinct column Община .
Of course it would take some time to check all the geometries, but the FusionTable is not very large, it should be a possible approach in your case.
Here is a demo: http://jsfiddle.net/doktormolle/sSwj3/
The size of the stored data is approximately 500kb, you should store the data in an external script, so they may be cached.
You may notice that the highligthning of the selected layer will be much faster when triggered via the links, because there will no data be requested via AJAX. When the highlightning of the selected feature is the only thing you need you may ommit the observation of the layer-click completely and observe the map-click instead. Use the returned LatLng to retrieve the selected row from the data and set the style:
Demo: http://jsfiddle.net/doktormolle/swdX8/
I have a spoke in my wheels and I am not sure how to sort this out. I have been struggling with it for a couple days and it isn't like a normal infobox as it is not set to a marker rather a polygon which is something new for me. I have polygons that display with data from an XML file and they show up fine. I have searched the web and got it to have the mouseover set up to where you mouseover a polygon the opacity changes and an infobox pops up. Problem is the infobox when it pop up shows "undefined" instead of the html I have set in it to display with data from the XML file.
Here is a link to the test map for example.
http://www.mesquiteweather.net/googlemap_poly.html
Here is a link to the XML file where I am just trying to show the elements events and expires in the info box.
http://www.mesquiteweather.net/xml/warnings_test.xml
This is the code I am working with to create the infoboxes and mouseover events
function attachPolygonInfoWindow(polygon, html, event, expires)
{
var html = "<strong>" + event + "</strong>";
eventWarnings.infoWindow = new google.maps.InfoWindow({content: html});
google.maps.event.addListener(eventWarnings, 'mouseover', function(e) {
var latLng = e.latLng;
this.setOptions({fillOpacity:80});
polygon.infoWindow.setPosition(latLng);
polygon.infoWindow.open(map);
});
google.maps.event.addListener(eventWarnings, 'mouseout', function() {
this.setOptions({fillOpacity:0.35});
polygon.infoWindow.close();
});
}
var polygon = new google.maps.Polygon(/* omitted for brevity */);
attachPolygonInfoWindow(eventWarnings);
eventWarnings.setMap(map);
}
});
I am pretty sure it is something easy I am overlooking but I haven't been able to find anything that pertains to my issue. I am just lucky I got the infobox to show at all as I have learned it's tricky since polygons don't have a true center and they are not set up like you would with a marker which I can handle.
If anyone has any suggestions please let me know.
-Thanks
You defined your attachPolygonInfoWindow function with 4 argument, but only provide one when you call it:
// definition
function attachPolygonInfoWindow(polygon, html, event, expires)
...
// call
attachPolygonInfoWindow(eventWarnings);
Probably you want (I don't see the html or expires parameters being used):
attachPolygonInfoWindow(eventWarnings, "", event, null);
The other option would be to change the definition to:
// definition
function attachPolygonInfoWindow(polygon, event, expires)
and the call to (assuming you are going to use "expires" for something):
attachPolygonInfoWindow(eventWarnings, event, expires);
As it doesn't look like you need to pass in that parameter (event is serving the function that I would expect it to serve).
Also, FYI, you have a "hanging comma" in your alertColors.js which make IE unhappy...
example
How to correctly set just the location based on address instead of position?
As a sidenode im try to set it to a decent zoom value. Does anyone know where in the docs this is mentioned?
Using below code but cannot find any reference on how to set the location of the marker based on "address, street, city, state, country )
$(document).live("pageshow", "#map_page", function() {
$('#map_canvas').gmap().bind('init', function(ev, map) {
$('#map_canvas').gmap('addMarker', {'position': '57.7973333,12.0502107', 'bounds': true}).click(function() {
});
});
});
Use google geocoding API to convert addresses into latlng objects and
then plot the position in map
https://developers.google.com/maps/documentation/geocoding/
Make use of fitBounds method for adjusting the zoom level based on
the points you are plotting.
https://developers.google.com/maps/documentation/javascript/reference#Map
I've happily implemented v2 of Google maps to my site without a hitch, I also successfully perform a drive directions using GDirections.load().
What I need to do is stop the popup of the mini map when you select a particular step in the routing directions. So when the user clicks on say "step 3", instead of the default popup showing a mini map, I'd like to add a custom icon to that position.
Hope it makes sense
Thanks in advance guys.
You need to add a handler on the GDirections object for the addoverlay event:
GEvent.addListener(gdir, "addoverlay", onGDirectionsAddOverlay);
When your onGDirectionsAddOverlay handler is called you can iterate through the new markers and replace them with copies that open your custom info window:
for (var i = 0; i <= gdir.getNumRoutes(); i++)
{
var originalMarker = gdir.getMarker(i);
latLngs[i] = originalMarker.getLatLng();
icons[i] = originalMarker.getIcon();
newMarkers[i] = new GMarker(latLngs[i], { icon: icons[i], draggable: true, title: 'Kan flyttes' });
map.addOverlay(newMarkers[i]);
// add stuff to your newMarkers[i] click event...
// ..
// Now we can remove the original marker safely
map.removeOverlay(originalMarker);
}