There are a lot of questions on SO asking a way to show region boundaries in google maps. The answers say it is not possible unless we specify the boundaries manually as polygon coordinates.
If that is the case then how are these websites showing the regions:
commonfloor.com
zenify.in
Now commonfloor has an area id (in its url) which means that it may have the boundaries in a database somewhere and is using it to draw the polygons. So may be they are not getting the data from google. But, zenify is doing something different. It's website loads these pngs from google which actually form those bounadries - eg. this - it is the top left part of the boundary of the entered location. We can see more of these files being loaded in the network tab of chrome development tools. How exactly is this kind of boundary mapping achieved without figuring out a way to get region boundary coordinates?
Also, if it is definitely not possible, and these websites are using some tool to map/get coordinates of Indian regional boundaries, what are those tools?
The boundaries of the areas in both sites are stored, they don't request them from google.
commonfloor.com uses an encoded path to build a Polygon:
function initialize() {
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(26.4604514, 74.6296585),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
new google.maps.Polygon({map:map,path:google.maps.geometry.encoding.decodePath('eho`D{unfMx#EzAEx#Gv#GpAIlCMhDSfBI`BKf#CAMCe#ASIqAAYA[OcACSCYAS?M#OBa#HsBDa##Q?K?ICo#?M?i#Bi#Bs#?G?i##g#?k#Bk##[Bg#?YCWCKOQe#a#EEIIMM#MFa#FUDKPk#?]?]Ig#AEQgA[?_#AYGe#Ka#Mm#[kAk#g#l#[XYVu#r#QTz#~B?dEJtAGz#Mp#Wp#?p#RjB_Rv#eCWDkFo#ZiAd#uAd#iAZoAZUFw#LWd#Ar#Ff#r#dAf#x#t#d#|#`#fBnAbA~#f#d#LLdAdAbAnAp#z#PXHPHHHH^J^#')});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,body,#map_canvas{height:100%;margin:0;padding:0}
<div id="map_canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry"></script>
zenify.in uses a KmlLayer:
function initialize() {
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(26.4498954, 74.6399162),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
new google.maps.KmlLayer({map:map,url:"http://www.zenify.in/kml/59.kml?q=v2"});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,body,#map_canvas{height:100%;margin:0;padding:0}
<div id="map_canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry"></script>
Related
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.
I've included a google map on my webpage with a marker at the location. What I want to add is an existing infoWindow of that location when the page loads.
This is the code i have:
<script>
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(51.257195, 3.716563),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
new google.maps.Marker({
position: new google.maps.LatLng(51.257195, 3.716563),
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
screenshot: http://puu.sh/gMtoB/16312f42b7.jpg
Now the "AXA..." is an existing point of interest on google maps, how would i go about that my marker is actually 'linked' to that existing point of interest with the infowindow opened by default.
in short: i would like a marker on that location with the infowindow opened when the webpage loads.
I think the solution would be to first find the place_id and then add your marker using the place ID you found rather than using longitude and latitude.
I created a live demo here:
https://jsfiddle.net/qzo41qzd/
There is also an example in the documentation about placing a marker on the google map using place_id:
https://developers.google.com/maps/documentation/javascript/places#placeid
I used the Google Maps API to render a static map with pins on it.
Image here.
Is there a way to make a popup for the pins like on the standard Google Maps (where you can normally scroll around)?
It's on a WordPress page: http://clairepyper.org/ The table to the left of the map shows modals on clicking a place name. I'm wondering if there is way to get the modals opening from clicking the markers instead/as well?
Thanks.
You use something like this:
<script type="text/javascript">
function init_map(){
var myOptions = {
zoom:14,
center:new google.maps.LatLng(40.26489,-74.533312),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(40.26489,-74.533312)});
infowindow = new google.maps.InfoWindow({content:"<b>Lawton's Service Company, LLC</b><br/>400 Mercer St<br /> Hightstown, NJ 08520" });
google.maps.event.addListener(marker, "click", function(){infowindow.open(map,marker);});
infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);
</script>
You can add an indefinite number of those markers with a LatLng entry, and it's own little box over it.
(Sorry for the lack of code formatting. My browser is not showing the cool code tools.)
I'm trying to run the first example in the tutorial, and it works fine, except that my controller (zoom, etc..) are all messy.
I'm using V3.
Please take a look in the image:
The code I'm using is:
<div id="map_canvas" style="width:800px; height:600px;"></div>
<script type="text/javascript">
jQuery(function() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
});
</script>
Thoughts?
Thanks
Solution:
If this ever happens to you, take a look at your css.
In my case, I was adding some padding to the divs, and it also affected divs inside google maps area.
first of all check on another browser (if you didn't yet). If other browser displays it right try to set position of UI by yourself like here
If problem still exist nothing more is comming to my head.
Mariusz
I am putting together a clients contact us page and I need to have two Google maps on it.
The first map is a small version of the second. The second map opens up in a lightbox activated by a link beneath the first.
The issue is, the large map goes wrong when I attempt to open it. I typically get one tile in the top left hand corner and nothing more.
You can see for yourself at http://test2omniforce.co.uk/node/8. It's some kind of conflict between the two because if I remove the small map, the larger map works fine.
I am trying to determine why this happens, and how I can fix it.
OS: Here's my code for the large map (the small map code is exactly the same except instead of map_canvas, it uses map_canvas2).
var myLatlng = new google.maps.LatLng(53.3820845337596, -1.46965489864111);
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel:false
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'we are right here ...'
});
var myLatlng2 = new google.maps.LatLng(53.3820845337596, -1.46965489864111);
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function(){
infowindow.open(map, marker);
});
Inspired by #rggardner's suggestion, I made the small map a static map. I had no idea those existed before.
That removes the conflict and the large map now plays nice.
#rggardner, thank you very much!