GoogleMap with a lot of different places and restricted zoom - google-maps

I have to put a Map from Google (Google Maps or GoogleMyMaps) in a website. I need the map to show a lot of different places all over my country (about 200 places). I already have a GoogleMyMaps with all the places.
But I need the map to have a zoom limitation/restriction : I want people NOT TO KNOW exactly where the places are, which means the zoom must stop before it gets accurate enough.
I know you can control the zoom with GoogleMaps JS API with something like
var opt = { minZoom: 6, maxZoom: 9 };
map.setOptions(opt);
But I dont know how to add places on a Google Maps (still I have them all on a GoogleMyMaps).
Thank you for your time

Thank you everyone for your help.
So most of the time, GoogleMyMaps uses .KML files (as import or export), and it is possible to upload the data from a .KML file into Google Maps.
Here is an example :
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: {lat: 1, lng: 1}
});
var kmlLayer = new google.maps.KmlLayer({
url: 'THE_KML_FILE_URL',
suppressInfoWindows: true,
map: map
});
kmlLayer.addListener('click', function(kmlEvent) {
var text = kmlEvent.featureData.description;
showInContentWindow(text);
});
function showInContentWindow(text) {
var sidediv = document.getElementById('content-window');
sidediv.innerHTML = text;
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&callback=initMap"
async defer></script>
But note that the KML file has to be online, it does not work on local (Google's API needs to have access to your file).
Then you can customize your Google Map using Google Map Javascript API (https://developers.google.com/maps/documentation/javascript/tutorial).
Thank you everyone for your time

Related

Is it possible to setRotation in ol.View with Google maps

I am using the setRotation method for an ol.View similar to the examples available at the openlayers examples page. I have an encoded polyline that is drawn on the map and then we fit to the extent of that layer and if necessary rotate the map.
This all works great with OpenStreetMap and even a custom imagery service. This will not work with any of the Google tile services though. Is there any support for rotation of the ol.View with Google map services, if so, any examples? I didn't see any comments in the API documentation for ol.View and Google map services.
Thanks for any input.
You can use rotate control only for 45° imagery see code like this:
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(45.518970, -122.672899),
zoom: 18,
mapTypeId: google.maps.MapTypeId.SATELLITE,
heading: 90,
tilt: 45
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function rotate90() {
var heading = map.getHeading() || 0;
map.setHeading(heading + 90);
}
function autoRotate() {
// Determine if we're showing aerial imagery
if (map.getTilt() != 0) {
window.setInterval(rotate90, 3000);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
You can see an example google45°
But for normal google maps the rotation is not avaliable.

kmlLayer not displaying google maps api

First time ever posting on StackOverflow so tell me and be crude if I am doing something terribly wrong anyway. I recently created a KML file with maps.google.com and I uploaded the kml to my site, and I am trying to implement to the google maps that we created, but I am stumped as I have no errors but it does not show at all.
// North Campus SHuttle KML implementation
var redShuttle = new google.maps.KmlLayer (
'http://blazelist.org/maps/test/RedShuttle.kml'
);
redShuttle.setMap(map);
Can you share more code?
In my example your code is working:
function initialize()
{
var map = new google.maps.Map(document.getElementById("map"),
{
center: new google.maps.LatLng(22.7964,73.8456),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
/* var kmlLayer = new google.maps.KmlLayer('http://blazelist.org/maps/test/RedShuttle.kml',
{
suppressInfoWindows: true,
map: map
});
*/
var redShuttle = new google.maps.KmlLayer ( 'http://blazelist.org/maps/test/RedShuttle.kml' ); redShuttle.setMap(map);
}
http://jsfiddle.net/iambnz/WbzpS/

Google Maps marker not showing

It's exactly the example code of the maps API documentation found here:
Google maps API documentation
I have set up an map and it is showing.
Next step was showing the marker with geocoding..
But it's not working? Can anyone help me out?
Thanks!!
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAS1COH5SeJCKhZ6i6nTi0Fx2qsdvWbAfA&sensor=false"></script>
<script type="text/javascript">
var loMap;
var loGeocoder;
$(document).ready(function()
{
var loOptions =
{
center: new google.maps.LatLng(51.9645, 5.1965),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
loMap = new google.maps.Map(document.getElementById('map'), loOptions);
loGeocoder = new google.maps.Geocoder();
showMarkers();
});
function showMarkers()
{
console.log('World');
loGeocoder.geocode( { 'address': 'Den Bosch'}, function (results, status)
{
if(status == google.maps.GeocoderStatus.OK)
{
console.log('Hello?');
loMap.setCenter(results[0].geometry.location);
console.log(results[0].geometry.location);
var marker = new google.maps.Marker(
{
map: loMap,
position: results[0].geometry.location
});
}
else
{
console.log('Error');
}
});
}
</script>
<div id="map" class="search_map" style="width: 220px; height: 240px"></div>
An old question but as I recently hit the problem I thought I would share my solution. I found that something in the Javascript on the rest of my site was interfering with Google Maps. I was not getting any errors in Firebug or Chrome Console so I could not track down exactly what the conflict was.
I found that if I put the Google Map onto a blank ASPX page (i.e. no MasterPage with all of the Javascript and CSS from the rest of my site) that it worked fine.
The solution? I put the Google Map into an Iframe and now it works just fine. If you inspect the source of the Google Map example code, they use an Iframe too so there must be something to that.
you need to change the line new google.maps.LatLng(51.9645, 5.1965) to
var place = new google.maps.LatLng(51.9645, 5.1965);
and then use place as center in loOptions .
same as in marker also it really works :)
And import jquery as well
at the start of page.

List of bus stops from Google Maps

I am trying to build web app where you input your address and it will give you list of bus stops in your area. I want to use Google Maps for this, but i can't find the way to use them for this. Is there any way to get list of points on maps in, lets say, JSON or XML format? I tried Google Maps Places API, but it didn't work this way. Only thing i found is this example - http://gmaps-samples-v3.googlecode.com/svn/trunk/localsearch/places.html but thats not what i need.
So, anyone knows?
The Google Places API does have stop information on there but you need to form your query very specifically to make it work.
The key is using the nearby search with rankby=distance and radius= and types=bus_station
The default rankby prominence rarely shows bus stations.
Sample query:
https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=49.89458,-97.14137&sensor=true&key=your_key&rankby=distance&types=bus_station
I think it can help you
<script>
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
var map;
var infowindow;
function initMap() {
var pyrmont = {lat: 38.06908229560463, lng: 46.31730562744135};
map = new google.maps.Map(document.getElementById('map'), {
center: pyrmont,
zoom: 15
});
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch({
location: pyrmont,
radius: 1000,
types: ['bus_station','transit_station']
}, callback);
}
function callback(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}
</script>
Ali Seify's answer is correct except that the API document states that only the first element in the types parameter will be used by the API and the transit_station type is the correct type for bus stop.
Also, in order to get the nearest bus stop, suggest to use parameter rankBy: google.maps.places.RankBy.DISTANCE and radius parameter cannot be used in this case.
service.nearbySearch({
location: pyrmont,
rankBy: google.maps.places.RankBy.DISTANCE,
types: ['transit_station']
}, callback);
This is not a service that Google provides. They surely have all of the stuff you need on record, but they do all of their calculations internally.
One option (which might be a bit difficult) is to mine public transportation schedules for their bus stop locations. It might be an option if you have a small region (ie. a city) that your web app is to support. It's risky because if the pages change then you'll have to reconfigure the data mining application, but you'd still have the same problem trying to mine the data from Google (or somewhere else) - if you could find a way to get a bus stop list with locations and built your app around it, it could change at any time and break your application.
You could use Google Fusion Tables for this. You would have to enter the data yourself though, unless someone else already have entered it. Google maps API supports Google Fusion Tables.

Creating a Interface for Insering Google Maps

I am trying to create a site that has option to add maps to the site using google maps api. I found hundreds of tutorial and blog posts on embeding map in the site. But what I actually want is a way to give the user choose a place on the map and add marker. Then get the co-ordinates of the marker and store it in the database of retrieving and showing in the front-end. I have seen this option given wordpress plugins like mappress. But now I'm trying to achieve this in codeigniter. I can't find any thing to start on. Can any one point out some one tell me where to start?
This is really easy the 3rd version of the Google maps API. Versions before that where much more complicated, and most of the tutorials floating around are for those versions. Have a look through the API documentation and examples.
Adding a marker is as simple as:
var marker=new google.maps.Marker({/* ... see API */});
Adding an event (eg click) to a marker is as simple as:
var marker_click=new google.maps.event.addListener(
marker,
'click',
function() {/*...*/});
Sounds like you'd want a click event for the map, which you'd translate into a latlong, then (a) generate a marker on the map with JS, and (b) post that back to your server using AJAX, or by storing the values in a hidden form field to be submitted after.
Update:
Mostly from the API documentation # http://code.google.com/apis/maps/documentation/javascript/events.html:
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
var clickedLocation = new google.maps.LatLng(location);
var marker = new google.maps.Marker({
position: location,
map: map
});
map.setCenter(location);
/*Do your processing here:
* eg. ajax.post('addMarkerDB&lat='+location.lat+'&long='+location.long);
*/
}
Note: There is no ajax.post function by default, but there could be :)