Displaying Google Maps on website

[grobald]

Hello,

I have to make a website iphone ready. But i have one problem. The
Googlemap doesn't show up on safri on iphone. Any Hints or
suggestions. Do i have to add tags or other code to display google
maps properly on iphone safarI

any help is welcome

cheers markus

[ade]

grobald wrote:
> Hello,
>
> I have to make a website iphone ready. But i have one problem. The
> Googlemap doesn't show up on safri on iphone. Any Hints or
> suggestions. Do i have to add tags or other code to display google
> maps properly on iphone safarI
>
>

if your map works on safari in a regular (safari) browser on a mac or pc
then it will work on safari on an iphone - you shouldnt have to change
anything

if it doesnt work on safari then you need the google maps api forum :)

ade

[Markus Grobbauer]

My map is created by using the GMAPS API. if you go to www.nulaz.com
you will see the map. This is the mainfeature of the website and we
really need to place the map on the website (iphone-webiste). So the
google maps call is created in a javascript file. But the problem
still is that it doesn't show up on the iphone safari browser (just
grey background width the google brand and navigation controllers but
not mapdetails and pins) but on the safari browser on the desktop it
does.

Hope someone can help

cheers markus

[ade]

Markus Grobbauer wrote:

My map is created by using the GMAPS API. if you go to www.nulaz.com  
you will see the map. This is the mainfeature of the website and we  
really need to place the map on the website (iphone-webiste). So the  
google maps call is created in a javascript file. But the problem  
still is that it doesn't show up on the iphone safari browser (just  
grey background width the google brand and navigation controllers but  
not mapdetails and pins) but on the safari browser on the desktop it  
does.

  

the immediate problem is that you are serving a different file to the iphone than you are to the desktop so even with the built in safari debug there's no way of working out why - whats the *actual* filename in the iphone version ?

and its probably really  the maps api group since its the browser (safari) not the iphone

[Nick May]

The page at www.nulaz.com is different when viewed on an iphone to
when viewed on a browser.

So - I set Safari to have an iphone user agent, and had another look.

Now I get the iphone map page - but no map...

A quick look in the error console shows your page is generating a
"can't find variable HtmlControl" error.

Which may be the source of your problems.

Basically, get the map working in desktop safari first (you can set it
to send an iphone user agent in the Develop menu - not sure if this is
available by default - or use Firefox with an iphone user agent) - and
all should be well on the iphone....

Nick

[Markus Grobbauer]

Hello thx for the reply

what do you mean by serving a different file to the iphone? I have a quite a big javascriptfile that creates output by using the google maps api and put that output into the div tag.

and what do you mean by actual filename in the iphone version?

sorry but i am pretty new to iphone webdeveloping

[ade]

Markus Grobbauer wrote:

Hello thx for the reply

what do you mean by serving a different file to the iphone? I have a quite a big javascriptfile that creates output by using the google maps api and put that output into the div tag.

and what do you mean by actual filename in the iphone version?

sorry but i am pretty new to iphone webdeveloping

the display on the iphone is different to the display on a desktop browser - so you must be creating a different html file for the iphone version - its that html that needs to be seen on a desktop browser so it can be debugged

thats the link you need to give the maps api group  (ive been on that group for about 18 months - they are very helpful but they wont be able to do anything without seeing the html thats generated for the iphone version)

one error that came up in the iphone version was an error on line 70 in your javascript: cant find variable HtmlControl - but its impossible to view the javascript on an iphone

ade

[ade]

Nick May wrote:
> Basically, get the map working in desktop safari first (you can set it
> to send an iphone user agent in the Develop menu - not sure if this is
> available by default - or use Firefox with an iphone user agent) - and
> all should be well on the iphone....
>

that is a great tip :)

firefox switcher is at: https://addons.mozilla.org/en-US/firefox/addon/59

string is:
Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML,
like Gecko) Version/3.0 Mobile/3B48b Safari/419.3

ade

[ade]

Markus Grobbauer wrote:
> My map is created by using the GMAPS API. if you go to www.nulaz.com
> you will see the map. This is the mainfeature of the website and we
> really need to place the map on the website (iphone-webiste). So the
> google maps call is created in a javascript file. But the problem
> still is that it doesn't show up on the iphone safari browser (just
> grey background width the google brand and navigation controllers but
> not mapdetails and pins) but on the safari browser on the desktop it
> does.
>
>

i cant see/get anything in:

http://www.nulaz.com/NulazIgniter/static/nulaz/js/HtmlControl.js

which is why you get this:

HtmlControl is not defined
http://www.nulaz.com/NulazIgniter/static/nulaz/js/map_iphone.js
Line 70

ade

[Markus Grobbauer]

Hello ade

I have different views. if you use safari with enabled developer tools
you can switch the user agent to iphone. but the problem is if you
switch to iphone agent it works fine on the desktop safari but the
controls are not useable on the iphone. Look at the actual version http://nulaz.com/~pablo/NulazIgniter
.

i think the probelm the missing HTMLControl is no fixed

br markus

[davidroe]

you are better off using Safari and changing the user agent, as Safari
on the PC/Mac more closely resembles Safari on the iPhone/iPod. for
example, there are certain CSS statements that work on Safari on all
devices but nowhere on Firefox.

/dave

[pariswiki]

Hi,

I understand that one cannot embed maps directly within a Mobile
Safari page, but I can assure you that it is possible to activate
directly from a link inside a web page the Google Map module of the
iphone:

<a href="http://maps.google.com/maps?q=cambrils,+spain">Cambrils</a>
or
<a class="cuiServiceButton" target="_self" href="http://
maps.google.com/maps?q=54+Bd+de+Grenelle,+Paris,+France+(Amy's
Home)">54 Bd de Grenelle Paris France</a>

JCG

[pariswiki]

In addition to my previous message, I have tried out an iframe on my
iphone: it is working, but it's slower than using the iPhone Google
map application, since the map embedded in the iframe is much larger:

Try this on on your web page:

<iframe width="425" height="350" frameborder="0" scrolling="no"
marginheight="0" marginwidth="0" src="http://maps.google.fr/maps?
f=q&amp;hl=fr&amp;geocode=&amp;q=mus%C3%A9e
+Arcachon,france&amp;ie=UTF8&amp;ll=44.656932,-1.138802&amp;spn=0.043111,0.080338&amp;z=13&amp;iwloc=A&amp;cid=44638724,-1147206,15957944152359975185&amp;output=embed&amp;s=AARTsJoZwt0NsdhdsN-
yinRkWg_OC6K0gQ"></iframe><br /><small><a href="http://maps.google.fr/
maps?f=q&amp;hl=fr&amp;geocode=&amp;q=mus%C3%A9e
+Arcachon,france&amp;ie=UTF8&amp;ll=44.656932,-1.138802&amp;spn=0.043111,0.080338&amp;z=13&amp;iwloc=A&amp;cid=44638724,-1147206,15957944152359975185&amp;source=embed"
style="color:#0000FF;text-align:left">Agrandir le plan</a></small></
iframe>

Enjoy

JCG

[Nick May]

There is no problem at all about using the google maps api to embed a
map on a page so that it can be read on an iphone.

That said, as far as I am aware - on the limited testing I have done -
using webkit transforms to handle scrolling is faster than the
javascript methods.

Nick

[Markus Grobbauer]

Hello:

@JCG: if you take a look at the application you'll see that the maps
application of the iphone is unusable.

@all:

then i really dont't know why this is not working:

http://nulaz.com/~pablo/NulazIgniter
i hope you can see the js files, the code for adding the controls is
in map_iphone.js

its working properly on safari with developer->User-Agent-> Mobile
Safari iphone.

but definitly not on the iphone.

On the iphone the pins are not clickable, there is no update of the
pins after dragend event (update logic is if dragging goes over the
half of the screen). Neither double finger zooming and zoom in/out
with the controls works.

on the other site i fixed the problem with the iphone that way:

I added absolute positioned elements on the page.

map = new GMap2(document.getElementById("map"));
GEvent.addDomListener(document.getElementById('btn_zoom_in'), 'click',
function() {
map.zoomIn();
});

GEvent.addDomListener(document.getElementById('btn_map_update'),
'click', function() {
var point2 = map.fromLatLngToDivPixel(map.getCenter());
if((Math.abs(Math.abs(center_point.x) - Math.abs(point2.x)) > $
('#map').width()/3 || Math.abs(Math.abs(center_point.y) -
Math.abs(point2.y)) > $('#map').height()/3)) {
loadPublicLocations();
loadFavoriteLocations();
loadMyFriends();
loadPublicPeople();
loadRSS();

}

});

Neither this works on that version on the iphone:

GEvent.addListener(marker, "mouseover", function()
{ elabel.openOnMarker(marker, label); });
(this should show tooltips if you

So i think the biggest problem in my case is, that the evnets
(dragend, click, etc.) are not recognized by the iphone

hope i gave you all the infos to describe my problem

best regards