I am using geocomplete to load the map. My question is, is there any way to get the bound of the map. I used to use
var bounds = results[0].geometry.bounds;
to get the bound is not working here, my code is given below
$("#textfield").geocomplete({
map: ".map_canvas",
details: "form",
types: ["geocode", "establishment"]
})
.bind("geocode:result", function(event, result){
alert(result.geometry.bounds);
alert(result.bounds);
})
both the alerts show 'undefined' as the value.
To get the map, you can do this:
var map = $("#textfield").geocomplete("map")
then you should be able to use
map.getBounds()
or any other built in google map api methods.
Edit: Found this in the downloaded script, there is an example 'Api'.
You can use: Map.getBounds()api-doc. There isn't enough code in your question to tell why result may be null; if you can include some additional code, a link, or maybe set up a jsFiddle, it will allow everyone to take a deeper look.
Related
I need a googlemap with clusters, popup and list where you can click on.
Hoping to find a simple solution which I can easily add markers and have a marker list which points to the marker on the map.
I have successfully used markercluster.js
Just load all your markers into a json (in my example they are in the variable locations), then load them:
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
position: location
});
return marker;
});
If you look at the example code, it will show you how easy it is.
The Google Maps JS API documentation is as clear as it comes.
https://developers.google.com/maps/documentation/javascript/adding-a-google-map
I don't think there's an off-the-shelf solution that looks exactly like your example. Getting that list is going to require some HTML work to position/render the module, and Javascript/DOM integration to sync it with the map. Some rudimentary front-end development is involved and if that's not something you want to tackle, perhaps you could just make a custom Google Map and link to it.
https://www.google.com/maps/about/mymaps/
I'm trying to get place details using place_id without having a map canvas. It appears that making a "http.get" call to the api itself wont work, but instead forced to use the angular google maps implementation.
currently stack on:
let service = new google.maps.places.PlacesService(map);
Finally managed to find the answer by looking at jquery examples. Turned out to be a pretty simple process by using a dummy dom div
document.createElement('div')
let service = new google.maps.places.PlacesService(document.createElement('div'));
service.getDetails({ placeId: placeId}, function(place, status){
console.log(JSON.stringify(place));
});
For example to get photos associated with place just loop of over the "photos" object array by using the getUrl method, see below (use your desired size):
place.photos[1].getUrl({'maxWidth': 100, 'maxHeight': 100})
Other available properties here https://developers.google.com/maps/documentation/javascript/places
I load data for my Google Maps v3 with GeoJSON:
that.map = new google.maps.Map($('#map')[0], mapOptions);
that.map.data.loadGeoJson('http://localhost/geoserver/...');
Now, at some point on some user event I need to get one marker and paint it blue.
I can set different color with setIcon.
My idea is to get all features, then iterate through them, find the right feature (based on UNIQUE feature data field) and find marker behind that feature and change icon. I found some approaches that store all markers in array, but don't know why I need another array. Computer resources are important and I don't want to duplicate things.
I need help with, how to get features and how to get Marker object associated with selected feature. If there is a better way to do it, please...
UPDATE
I found this:
var feature = this.map.data.getFeatureById(ID);
I just need to get feature Marker. How? Doesn't look that Feature class has method for that?
There is no method/property that gives you access to the shape(marker,polygon,etc.) that has been created by the API.
To set a new icon-property for a particular feature use overrideStyle:
map.data.overrideStyle(feature, {icon: newIconSettings});
Another option is:
that.map.data.setStyle(function(feature)
{
var color = 'red';
if (feature.getProperty('color'))
{
color = feature.getProperty('color');
}
return ({ // #type {google.maps.Data.StyleOptions}
icon: 'http://maps.google.com/mapfiles/ms/icons/' + color + '-dot.png',
});
});
But it is not as good as Dr. Molle solution, because it needs to iterate through entire features set. I found it on google api documentation (look for title Change Appearance Dynamically).
How can I search nearest schools for any given post code like shown in following screenshot?
http://i.imgur.com/xjrMp.png
When I go to maps.google.com I don't see this option. Or is it only available through Google Maps API? How can I do this?
The Places API will do something like this. See the example at https://google-developers.appspot.com/maps/documentation/javascript/examples/place-search and alter the code to change "store" to "school" (and the location to something else, if necessary).
The example you quote probably has their own database of schools.
Andrew is exactly right. You'll need to call in places along with your maps.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
Basic setup:
var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);
map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
// Places request
// ALL TYPES: https://developers.google.com/places/documentation/supported_types
var request = {
location: myLatLng,
radius: 500,
types: ['school']
};
This example will need some modifying when put into use.
I had to do this recently for a project of mine (sorry for the annoying polygon in this example), here is a jsFiddle.
I'm absolute newbie as for Google Map / Yahoo Map. I would like to know if it is technically possible to ask to show any city in any country DYNAMICALLY (I mean by passing parameters) and then to show some pictures OVER the map near the city ?
Thanks.
There's a multitude of ways you could accomplish this, some prettier than others.
You could use GInfoWindow to display a popup window with pictures in it at any location.
You could use one of the handy libraries offered here http://code.google.com/p/gmaps-utility-library-dev/ to assist you in displaying those images.
What I would recommend, however, is using http://econym.org.uk/gmap/ewindows.htm to create a window that is similar to GInfoWindow but that is styled by you. Just style the window so that it appears to simply be an overlaid picture.
You could choose to fool around with z-index's and manual positioning with a JavaScript library like jQuery.
Also, to answer the beginning of your question yes you can refocus the map anywhere using GMap's .setCenter() method. Documentation of setCenter(), GInfoWindow and much more available at http://code.google.com/apis/maps/documentation/reference.html
I just started learning this myself.
Here is a good link to get started:
http://code.google.com/apis/maps/
On your second question,
show some pictures OVER the map near
the city?
I like #andykram's response above, but I've implemented this previously using the Panoramio layer available for the Maps API. It can get a bit crowded but its an interface people are used to and because it is so simple to include it in a map, it just be the solution for you this time.
Just add the following to your map initialisation function.
var myLayer = new GLayer("com.panoramio.all");
map.addOverlay(myLayer);
As far as dynamically showing any city in the world in a Google Map, the solution is easily implemented - you need to geocode the name of the city. This can be done by triggering a function on an event like onclick.
function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (point) {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
);
}
}
If you hit a hurdle, try this first - http://econym.org.uk/gmap/ - possibly the best resource for the GMaps API on the web.
GeoExt is a nice framework if you work with maps in general. You can access other kinds of maps too (OSM, GeoServer).