Maps API v3. and jQuery
620 views
Skip to first unread message
tatlar
Jun 4, 2009, 3:30:51 PM6/4/09
to Google Maps JavaScript API v3
Hi there,
Until all the core functionality of Maps API v2 makes its way into
Maps API v3, I have gone back to including jQuery and using its
various functionality (such as grabbing XML/JSON and parsing for maker
creation). However, I seem to have run into a fundamental problem - I
cannot load jQuery via the Google AJAX API and then use the Maps API
v3.
I have a simple use case that works fine, pretty much paraphrased from
the Maps API v3 docs:
google_beta.js
function init() {
var mapDiv = document.getElementById("map_canvas");
var map;
var myLatlng = new google.maps.LatLng(33.2,-116);
var myOptions = {
zoom:9,
center:myLatlng,
mapTypeId:google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(mapDiv, myOptions);
}
This is called from my html file and works fine:
<<snip>>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script type="text/javascript" src="google_beta.js"></script>
</head>
<body onload="init()">
<<snip>>
Now, however, in my html file, I try and load jQuery via the Ajax API:
<<snip>>
<script src="http://www.google.com/jsapi?key=#######" type="text/
javascript"></script>
<script type="text/javascript">
google.load("jquery","1.3.2");
</script>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script type="text/javascript" src="google_beta.js"></script>
</head>
<body>
<<snip>>
My javascript now looks like this:
$(document).ready(function(){
var mapDiv = $("#map_canvas");
alert( mapDiv.width() ) ;
var map;
var myLatlng = new google.maps.LatLng(33.2,-116);
var myOptions = {
zoom:9,
center:myLatlng,
mapTypeId:google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(mapDiv, myOptions);
});
The alert() was put in to check jQuery loads properly. It does, and I
get the width of the map div alerted out. But now the Google map
interface does not work.
Has anyone else seen this issue (jQuery and Maps API v3 not playing
nicely)? I have not tried with other AJAX APIs, like feeds or search,
so I am just wondering whether it is the $(document).ready(function()
{}); abstraction of jQuery that Maps API v3 doesn't like?
Meh - I wish I had tried this out at I/O last week when all the Google
devs were on hand.
All help appreciated. Thanks in advance.
Until all the core functionality of Maps API v2 makes its way into
Maps API v3, I have gone back to including jQuery and using its
various functionality (such as grabbing XML/JSON and parsing for maker
creation). However, I seem to have run into a fundamental problem - I
cannot load jQuery via the Google AJAX API and then use the Maps API
v3.
I have a simple use case that works fine, pretty much paraphrased from
the Maps API v3 docs:
google_beta.js
function init() {
var mapDiv = document.getElementById("map_canvas");
var map;
var myLatlng = new google.maps.LatLng(33.2,-116);
var myOptions = {
zoom:9,
center:myLatlng,
mapTypeId:google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(mapDiv, myOptions);
}
This is called from my html file and works fine:
<<snip>>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script type="text/javascript" src="google_beta.js"></script>
</head>
<body onload="init()">
<<snip>>
Now, however, in my html file, I try and load jQuery via the Ajax API:
<<snip>>
<script src="http://www.google.com/jsapi?key=#######" type="text/
javascript"></script>
<script type="text/javascript">
google.load("jquery","1.3.2");
</script>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script type="text/javascript" src="google_beta.js"></script>
</head>
<body>
<<snip>>
My javascript now looks like this:
$(document).ready(function(){
var mapDiv = $("#map_canvas");
alert( mapDiv.width() ) ;
var map;
var myLatlng = new google.maps.LatLng(33.2,-116);
var myOptions = {
zoom:9,
center:myLatlng,
mapTypeId:google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(mapDiv, myOptions);
});
The alert() was put in to check jQuery loads properly. It does, and I
get the width of the map div alerted out. But now the Google map
interface does not work.
Has anyone else seen this issue (jQuery and Maps API v3 not playing
nicely)? I have not tried with other AJAX APIs, like feeds or search,
so I am just wondering whether it is the $(document).ready(function()
{}); abstraction of jQuery that Maps API v3 doesn't like?
Meh - I wish I had tried this out at I/O last week when all the Google
devs were on hand.
All help appreciated. Thanks in advance.
Reply all
Reply to author
Forward
0 new messages