hey, so I got it to work :-))
Here's what I did; I don't understand why I had to do this but when I
set specific px sizes for the width and height, rather than
percentage, it worked. That was the main thing.
I also did a few other bits, which perhaps some users of WordPress
might be interested in:
- took out viewport meta tag as it affected the whole website (as it
is not percentage sized it meant it looked way too big for the
display).
- made it into a shortcode, easier for inserting into the page, I just
type [map] where I want the map. Here's my shortcode (add this to
functions.php):
<?php
function wpmap() {
return '<script type="text/javascript" src="http://maps.google.com/
maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(51.51440469156112,
-0.1354837417602539);
var myOptions = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new
google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
window.onload = initialize;
</script>
<div id="map_size">
<div id="map_canvas"></div></div>';
}
add_shortcode('map', 'wpmap');
?>
Added to head (or stylesheet):
<style type='text/css'>
#map_size {width:632px; height:323px; margin-left:40px;}
#map_canvas {width:100%; height:100%;}
</style>
Obviously the width, height and margin of map_size are specific to my
page. You don't need to have another div (map_size) you could just put
the pixel sizes in instead of the percentage size in map_canvas.
I created another div because I was trying to avoid a minor problem;
on the map I only have the + and - buttons not the slider or circle
with pan buttons. This happened (I think) because it is set to a fixed
size and not a percentage size. So I tried to get around that by
creating a containing div, but it didn't work :-( Does anyone know how
to the get the slider and circle back?
Best thing is that it loads really fast on my mobile/cell. I like it
as it is API v3, most WordPress plugins aren't. The ones that are
don't pass the W3 validator for XHTML Strict, this does.
Now, in addition to getting the slider and circle to work, I need to
work out how to add a marker, and maybe bubble info too. If you can
advise me please do :-)
Thanks
Will
On Jul 14, 4:56 pm, Pigeon <[email protected]> wrote:
> Hello,
>
> ok so I can't get my google map to display. No doubt I'm doing
> something silly wrong, but I'm teaching myself this stuff and I'm
> obviously missing something.
>
> So far I got rid of the <body> tag as the validator didn't like it
> with my XHTML Strict Doctype. I replaced it with:
>
> <script type="text/javascript">
> window.onload = function() {
> initialize();}
>
> </script>
>
> If I look at the site in FireBug the element style has position:
> relative (I don't know where that comes from), but if I disable it, I
> can see part of the map appear in the top left corner. so perhaps I
> have a positioning issue?
>
> Maybe there's a WordPress plugin causing a conflict?
>
> here's a linkhttp://www.pinkpigeon.net/contact/
>
> (fyi my stylesheet has got corrupted when I was trying to update it, I
> don't how trying to fix that too...)
>
> Thank you for any help you wonderful people :-)
>
> Will
--
You received this message because you are subscribed to the Google Groups
"Google Maps JavaScript API v3" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-maps-js-api-v3?hl=en.
