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
Related
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>
I can't achieve zoom on kml map, I am using same solution that is given here:
google-maps-zoom-gets-over-riden-when-using-a-kml-file . You can see my jsfiddle here:
jsfiddle for kml map zoom.
If I remove preserveViewport: true from that example it will load the map with it I am not getting map.
The map needs to be initialized with a center. You are currently not doing that if you set preserveViewport to false; where do you expect the map to be centered?
Your (problematic) code:
var myOptions = {
zoom: 20,
center: null,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("kmlMapCanvas"), myOptions);
Either set the center explicitly or let the KmlLayer do it for you.
From the documentation:
center LatLng The initial Map center. Required.
It seems like it is working fine. :) Are you sure?
I have set a google maps (api v3) on div.
Then I want to retrieve the map via the div.
Doing something like
theMap = $('.myDiv').theGoogleMap;
I can't find this simple info. Thank you for your help.
Maybe this it's too late for the original poster, but might helpful for others. I also spent some time searching before solving it by myself. Turns out to be really simple.
Assuming the div that holds the map looks like this:
<div id="myMap"></div>
When creating the map, add a reference to map object as a property to the document element that holds the map:
// Create the map
originalMapObject = new google.maps.Map('myMap', map_options);
// Get the DOM Element
var element = document.getElementById('myMap');
// Create a random property that reference the map object
element.gMap = originalMapObject;
When you need the map object again, just do something like this
gmap = document.getElementById('myMap').gMap
Hope it helps.
well, you can't do that, you can declare a global variable and save in that variable the reference to the map object. Look at the sample in the google documentation.
var map;
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
Also here is a Javascript tutorial:
https://developer.mozilla.org/en/JavaScript/Guide
The API doesn't work that direction. You must retain a reference to the object in javascript when you create it. You cannot lookup the map object from the DOM reference.
I read all the similar questions but mine is slightly different. The first time a JQuery Mobile dialog is displayed, the map loads fine inside the usual map_canvas div, but if the dialog is reloaded (i.e. go back and click on the button to open the dialog again), it is displayed only partially, zoomed out to a 3 or 4 and centered around the div's top-left corner.
There is no change in the div size (which is explicitly set) and for good measure a google.maps.event.trigger(map, 'resize'); is called.
I also tried to initialize the map after the dialog is shown but the result is the same.
Button code:
$("#dest-map-button").click(function() {
initializeMap(job_id,"map_canvas");
}
);
Function:
function initializeMap(job_id, map_div){
var pos = arrJobs[job_id].lat_lng.split(',');
var job_pos = new google.maps.LatLng(pos[0],pos[1]);
var driverLatLng = lat_lng.split(',');
var driver_pos = new google.maps.LatLng(driverLatLng[0],driverLatLng[1]);
var myOptions = {
zoom: 18,
center: driver_pos,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
}
map = new google.maps.Map(document.getElementById(map_div), myOptions);
var marker = new google.maps.Marker({
position: job_pos,
map: map,
title: "Job"
});
var marker2 = new google.maps.Marker({
position: driver_pos,
map: map,
title: "X",
});
google.maps.event.trigger(map, 'resize');
}
HTML:
<div data-role="page" id="dialog-destination-map" data-theme="e">
<div data-role="content">
<div id="map_canvas" style="height:300px; width:300px; position: relative; margin: 0px auto;">
map_canvas
</div>
</div>
</div>
Any ideas?
EDIT: this question seems describing exactly the same problem: JQuery Mobile & Google Maps Glitch
But the solution provided (caching) can't be used here as the map might need to change
After trying everything else, I finally stumbled upon the pageshow event. Calling initializeMap after all the page transitions are done rather than when clicking the button solved the problem:
$('#dialog-destination-map').live('pageshow',function(event){
initializeMap(job_id,"map_canvas");
}
);
I still wonder how come it was working at the first load then...
I Agree with #peter .. You do not need to create map on each pageshow event.. Instead, try this:
$(document).on("pagebeforechange", function()
{
if(mapObj){
center = mapObj.getCenter();
}
});
$("#mapPage").bind("pageshow", function()
{
google.maps.event.trigger(mapObj, "resize");
if(center)mapObj.setCenter(center);
});
var driverLatLng is being initialized with lat_lng.split(','); which hasn't been declared before.
You don't need to create a new map each time you visit the page. Create the map beforehand, e.g. on pageinit. On pageshow: google.maps.event.trigger(mapObj, "resize");
Code with V3 API.
function initialize ()
{
if (GBrowserIsCompatible())
{
var ch = new GLatLng (0,0);
var myOptions = {
zoom:7,
center: ch,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
directionsDisplay = new google.maps.DirectionsRenderer(map, document.getElementById("map"));
directionsDisplay.setMap(map);
}
}
Code with V2 API.
function initialize ()
{
if (GBrowserIsCompatible())
{
map = new GMap2 (document.getElementById("map"));
map.setCenter (new GLatLng(0,0),1 );
}
}
The V2 API code worked flawlessly, the V3 API code is NOt displaying any map.
What's the point that I am missing?
EDIT
Modified the V3 code as follows, but still no maps:
var chicago = new google.maps.LatLng (0, 0);
var myOptions = {
zoom:1,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
Make sure you are loading the correct Google Maps API, that you have a div tag with an id of map, and (for good measure) that you give the div a height and width. (Perhaps better to put the height and width in a stylesheet, but for clarity, I'm including it inline here.)
Here's a web page with your post-edit code. Try it. Works for me.
<html>
<head>
<title>Google Map test</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="map" style="height:500px;width:500px"></div>
<script>
var chicago = new google.maps.LatLng (0, 0);
var myOptions = {
zoom:1,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
</script>
</body>
</html>
In V3, all the names have changed. For example, GLatLng is now google.maps.LatLng. You will need to revise your code to use the new names.
A link to the docs in case you don't have it
There is no GLatLng in v3, change it to google.maps.LatLng
center: chicago,
I had the same symptoms, my v2 maps would not display with V3. When I look in the browser console logs, I'm seeing the error: Uncaught ReferencedError: GBrowserIsIncompatible is not defined.
Per the Google V2 to V3 Migration Guide, GBrowserIsIncompatible is no longer supported. I haven't found an alternative and just removed the logic related to this function. This site suggests just removing the function.
I found other problems with migrating which are addressed in the Google Migration Guide link above.
1- ensure your google map API key is correct.
2- it's may be not enabled in your google map console.
3- wrongly enabled the location API instead of the map API.