Adding a map to mobile website

zimbizee · 30th Jan 2012, 12:50 PM

Hi, very new to the mobile website thing.

Can somebody tell me how i add a map to a mobile website please. Is it the same as a standard site???

Any help greatly appreciated

Thanks

WillR · 30th Jan 2012, 05:44 PM

No, do NOT use the regular Google Maps iframe embed code. Iframes should not be used on mobile websites. You have two options:

1. Search Google Maps and then take a screenshot of the map image you want to use and upload it to your mobile website as an image.

2. Use the Google Maps Static image API - more details can be found here:
Google Maps Image APIs - Google Code

lint631 · 30th Jan 2012, 09:08 PM

Originally Posted by WillR

1. Search Google Maps and then take a screenshot of the map image you want to use and upload it to your mobile website as an image.

I agree with Will and use this method myself. Screenshot and then crop to about 265X265 pixels. Then I just put the image in and center it in my HTML file. Super simple!

MrSS · 31st Jan 2012, 12:02 AM

Originally Posted by WillR

No, do NOT use the regular Google Maps iframe embed code.

Because mobile browser takes more time to load rendering the actual page and some browser add-ons for PC browser are not available for mobile.
If there's is any, but the version required to make the Gmap api work is not available for mobile browser.

Originally Posted by WillR

1. Search Google Maps and then take a screenshot of the map image you want to use and upload it to your mobile website as an image.

Agreed to this, the best option you can do to make a Gmap in your mobile website.

brianpinski · 31st Jan 2012, 12:25 AM

Hi,

I am also newer to the mobile websites. I have been building my mobile sites with a wordpress mobile theme. I use this plugin and it has shortcodes to put on your page for maps that are interactive.

The plugin is here: WordPress Plugin: Google Maps v3 Shortcode | The Urban Nomad

You can see a sample of how it works on a site I made here:

Location « Slice

You can either just go view that site on a regular computer or look at it from your mobile phone to see exactly how it looks.

Hope that can help you out.

-Brian

Nail Yener · 31st Jan 2012, 01:35 AM

If you want an interactive map, you can use Google Maps JavaScript API. The developer's guide and the tutorial explains how to use it in detail. I didn't have a chance to test this on many smartphones but I guess it will work fine on any device that supports JavaScript.

lint631 · 31st Jan 2012, 09:29 PM

Hey thanks for the link Nail. Will check that out when I have some time.

ASUService · 18th May 2013, 10:03 AM

I know this is an old thread but I thought I'd post another option ... this is NOT embedding a map. Instead you can have a location link/button with a url for the a href like this ...

http://maps.google.com/maps?q=cupertino

That will show a map of Cupetino .... you can mod the url to a specific address I.E. ...

http://maps.google.com/maps?q=<PLACE ADDRESS CITY STATE HERE>

Thought some might find this as a nice option

30th Jan 2012, 12:50 PM	#1
zimbizee HyperActive Warrior Join Date: 2010 Location: UK Posts: 339 Thanks: 92 Thanked 72 Times in 55 Posts	Adding a map to mobile website Share on: Hi, very new to the mobile website thing. Can somebody tell me how i add a map to a mobile website please. Is it the same as a standard site??? Any help greatly appreciated Thanks

30th Jan 2012, 05:44 PM	#2
WillR Digital Marketer War Room Member Join Date: 2010 Location: Australia Posts: 12,475 Thanks: 1,984 Thanked 8,187 Times in 4,079 Posts	Re: Adding a map to mobile website Share on: No, do NOT use the regular Google Maps iframe embed code. Iframes should not be used on mobile websites. You have two options: 1. Search Google Maps and then take a screenshot of the map image you want to use and upload it to your mobile website as an image. 2. Use the Google Maps Static image API - more details can be found here: Google Maps Image APIs - Google Code
	. ➨ Here's How to Make Your First $177 Online This Week Using the Piggyback Method... .

31st Jan 2012, 12:25 AM	#5
brianpinski Warrior Member Join Date: 2011 Location: Connecticut, USA Posts: 2 Thanks: 0 Thanked 11 Times in 11 Posts	Re: Adding a map to mobile website Share on: Hi, I am also newer to the mobile websites. I have been building my mobile sites with a wordpress mobile theme. I use this plugin and it has shortcodes to put on your page for maps that are interactive. The plugin is here: WordPress Plugin: Google Maps v3 Shortcode \| The Urban Nomad You can see a sample of how it works on a site I made here: Location « Slice You can either just go view that site on a regular computer or look at it from your mobile phone to see exactly how it looks. Hope that can help you out. -Brian

31st Jan 2012, 01:35 AM	#6
Nail Yener You reap what you sow. War Room Member Join Date: 2008 Location: Sometimes you don't. Posts: 1,078 Thanks: 196 Thanked 411 Times in 243 Posts	Re: Adding a map to mobile website Share on: If you want an interactive map, you can use Google Maps JavaScript API. The developer's guide and the tutorial explains how to use it in detail. I didn't have a chance to test this on many smartphones but I guess it will work fine on any device that supports JavaScript.

31st Jan 2012, 09:29 PM	#7
lint631 MobileWebRockstar War Room Member Join Date: 2011 Location: New York Posts: 253 Thanks: 41 Thanked 52 Times in 37 Posts	Re: Adding a map to mobile website Share on: Hey thanks for the link Nail. Will check that out when I have some time.
	WPMobileSalesPro - Mobile Web Sales Tool

18th May 2013, 10:03 AM	#8
ASUService Advanced Warrior War Room Member Join Date: 2002 Location: USA. Posts: 612 Thanks: 440 Thanked 125 Times in 101 Posts	Re: Adding a map to mobile website Share on: I know this is an old thread but I thought I'd post another option ... this is NOT embedding a map. Instead you can have a location link/button with a url for the a href like this ... http://maps.google.com/maps?q=cupertino That will show a map of Cupetino .... you can mod the url to a specific address I.E. ... http://maps.google.com/maps?q=<PLACE ADDRESS CITY STATE HERE> Thought some might find this as a nice option
	Best Regards, Mike Allton ASU Service, Inc. The LAST SMS Platform You'll Ever Need! Easy Money!