← →

Google Maps for WordPress – GooMaps

August 16th, 2005 by bill · 65 Comments

»How to embed Google Maps in your WordPress articles. Covers the javascript, XML, and HTML you'll need to get it working.

 

Google Maps

Update (8 Mar 2009): Updated again to fix the constants broken by a change made by Google. Thanks to brian, who left a comment asking about the maps not working.

Update (30 Jan 2007): Updated again to make a link in the popup actually open a new window. Did this by embedding a javascript OnClick handler in the html attribute of the marker element in the xml file.

Update (6 Sept 2005): I’ve updated the XML file goomap1.xml again, this time to include a link around ‘IBM’. Note that the anchor tag must specify a target so the link doesn’t open inside the IFRAME, and of course angle-brackets must again be XML encoded.

Update (1 Sept 2005): I’ve updated the XML file goomap1.xml to include a break (<br/>) between IBM and Dev in the info popup HTML. It must be XML encoded to obscure the angle-brackets from the XML parser.

Sites like MapQuest and MapBlast served our mapping needs first, but Google Maps started the second revolution in online mapping. Click and drag to pan in realtime. Zoom in and out just as quickly. Click a button to get satellite imagery instead of a map. Now they offer a hybrid mode with streets and labels overlaid on top of the satellite imagery. It’s all very cool.

Google Maps has a mapping API with which you can build and use your own maps, complete with custom markers, animation, popup information bubbles, and the works.

So to build maps you simply sign up for a Google Maps API Key, reference a Google-provided script in the HTML head element, and embed a div and some simple Javascript in your HTML, and you’re off to the races.

Google Maps and WordPress

Of course, it’d occasionally be nice to embed a custom Google Map in a WordPress post. Detailing recent travel, geo-tagged photos, whatever.

Problems Embedding Google Maps in WordPress Posts

The first problem that arises when trying to include a map within a WordPress post is this: complex inline Javascript is essentially rendered useless. But you can call a function. So we can offload the Javascript functionality to a file, reference it, then call the function to build the map.

However, a second problem shows up. Google Map API Keys are good for one directory on a server only, so the API key would only work for the root or wp-content, or another static location.

The Solution

The solution is four-fold

  1. Move your Google Maps Javascript to a .js file, or simply download and use GooMaps.js.
  2. Move the map data to an XML file. goomap1.xml
  3. Call the Javascript function from a standalone HTML file. goomap1.html
  4. Embed the HTML file in an IFRAME within your WordPress post.

<br /> Sorry. If you’re seeing this, your browser doesn’t support IFRAMEs. You should upgrade to a more current browser.<br /> Simple as that. Mostly.

In the example to the right, a hybrid style map is centered around IBM in Austin, TX. Two custom icons and shadows are placed on the manufacturing plant on the West side of Burnet Rd. and the development buildings across the street.

This was created with an IFRAME tag embedded in this post, along with uploaded XML and HTML files, goomap1.xml and goomap1.html, to describe the map data and the IFRAME HTML, respectively. The IFRAME code also includes the Google Maps Javascript and some custom Javascript code.

Let’s get into those steps in more detail.

Step 1 — GooMaps.js – Google Maps Javascript File

You’re going to want to put code similar to the following in a Javascript file. Let’s call it GooMaps.js.

It supports the following features:

  • You can specify the center, the zoom, the map type (“Map”, “Satellite”, and “Hybrid”) and the base URL for icon files. Use the markers tag.
  • Include a list of markers, specifying the latitude, longitude, html caption, icon and shadow icon, and their sizes. Use the marker tag.

You can download and use this if you wish. No warrenties, use at your own risk, I’m not liable, an so on. Feel free to use it but I’d appreciate a back link.

// Function: createMarker
// Creates a GMarker at a given point with a given icon
//  Then adds a "click" event listener that pops up
//  some caption (HTML formatted)
// Modified from Google Maps API Reference
// Added support for specifying icons and html captions
function createMarker(point, icon, html) {
  var marker = new GMarker(point, icon);
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(html);
  });
  return marker;
}
// Function: GooMapXml
// Reads an xml file, the name of which is specified
//  in an attribute of a span with the id mapinfo.
function GooMapXml(){
  // Find mapinfo span and get name attribute
  var mapinfo = document.getElementById('mapinfo').getAttribute('name');
  // Create GXmlHttp object to fetch XML document
  var request = GXmlHttp.create();
  // Open the connection to the XML file
  request.open("GET", mapinfo, true);
  // Describe a function to handle the completed request
  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      // Get XML file contents
      var xmlDoc = request.responseXML;
      // Get markers element
      var markers = xmlDoc.getElementsByTagName("markers");
      // Get iconbase attribute
      iconbase = markers[0].getAttribute("iconbase");
      // Set default maptypes array
      maptypes = [G_SATELLITE_MAP,G_HYBRID_MAP];
      // If maptype attribute is present get it and set accordingly
      if( markers[0].getAttribute("maptype") != null ) {
        mt = markers[0].getAttribute("maptype").substring(0,3).toUpperCase();
        switch( mt ){
          case "SAT" :
            maptypes = [G_SATELLITE_MAP,G_HYBRID_MAP];
            break;
          case "HYB" :
            maptypes = [G_HYBRID_MAP,G_SATELLITE_MAP];
            break;
        }
      }
      // Get map div from HTML doc
      var map = new GMap(document.getElementById("map"),maptypes);
      // Add small google map controls
      map.addControl(new GSmallMapControl());
      // Add map type buttons
      map.addControl(new GMapTypeControl());
      // Create point for center (get x,y from attributes of markers element)
      var cpt = new GPoint(
                    parseFloat(markers[0].getAttribute("centerx")),
                    parseFloat(markers[0].getAttribute("centery")));
      // Center and zoom map (zoom specified in attribute of markers element)
      map.centerAndZoom(cpt, parseInt(markers[0].getAttribute("zoom")));
      // Get marker element vector
      var markerlist = xmlDoc.documentElement.getElementsByTagName("marker");
      // Loop through marker elements
      for (var i = 0; i &lt; markerlist.length; i++) {
        // Create points based on lat, lng attributes
        var point = new GPoint(
                        parseFloat(markerlist[i].getAttribute("lng")),
                        parseFloat(markerlist[i].getAttribute("lat")));
        // Create icon
        var icon = new GIcon();
        // Set image and shadow from iconbase and icon/iconsh attributes
        icon.image = iconbase + markerlist[i].getAttribute("icon");
        icon.shadow = iconbase + markerlist[i].getAttribute("iconsh")
        // Set icon and shadow sizes from attributes
        icon.iconSize = new GSize(
          parseInt(markerlist[i].getAttribute("iconszx")),
          parseInt(markerlist[i].getAttribute("iconszy")));
        icon.shadowSize = new GSize(
          parseInt(markerlist[i].getAttribute("iconshszx")),
          parseInt(markerlist[i].getAttribute("iconshszy")));
        // Set icon anchor
        icon.iconAnchor = new GPoint(1, 1);
        // Set icon window anchor
        icon.infoWindowAnchor = new GPoint(5, 1);
        // Call createMarker w/ point, icon and html from attribute
        var marker = createMarker( point, icon,
          markerlist[i].getAttribute("html") );
        // Add marker overlay to map
        map.addOverlay(marker);
      }
    }
  }
  // Send request to get XML file
  request.send(null);
}

Step 2 — XML Map Data

Next, build an XML file containing enough data to describe the map.

Update #1: I’ve updated this to include a break (<br/>) between IBM and Dev in the info popup HTML. It must be XML encoded to obscure the angle-brackets from the XML parser.

Update #2: I’ve updated this to include an anchor around IBM in the info popup HTML.

 

Step 3 — HTML Google Map File

You need a file in a static location to embed the API functions provided by Google. Otherwise you’ll get a popup complaining that your API key is for a different URL. Make sure you replace [**your api key**] in the code below with your Google Maps API Key.

This HTML file is simply the contents of the IFRAME you’ll be embedding in your WordPress post.

 
    <script src="http://maps.google.com/maps?file=api&amp;v=1&amp;key=[**your api key**]" type="text/javascript"><!--mce:0--></script>
    <script src="http://techrageo.us/wp-content/GooMap.js"><!--mce:1--></script>
 
<script type="text/javascript"><!--mce:2--></script>

Step 4 — Embedding Google Map in Your WordPress Post

Finally, when you get to the point where you want to embed the map, simply include the following in your post.

Sorry. If you're seeing this, your browser doesn't support IFRAMEs.
You should upgrade to a more current browser.

Tags: Javascript · Mapping · Programming

 

65 responses so far ↓

  • 1 Andrew // Aug 24, 2005 at 4:58 am

    This is *exactly* what I was looking for – thanks very much for all your efforts!

  • 2 JanD // Aug 29, 2005 at 2:14 pm

    Great work, thanks. I have a question:
    I was wondering if it is possible to include the lat and long from a custom field instead of linking it hard into the xml file?

    Thanks, Jan

  • 3 bill // Aug 29, 2005 at 11:01 pm

    Andrew – You’re welcome. Glad to help.

    JanD – Yes, probably. I will look at that option. However, I was thinking that creating the XML file was no big deal since I already had to create the standalone HTML file to reference in the IFRAME. When I get a chance, I’ll look at using custom fields and some other additions.

    -bill

  • 4 Adam Hopkinson // Aug 31, 2005 at 5:32 am

    Thanks for this! I’d attempted to embed google maps, but by hard coding it into the top of a page template. Worked well, but none of the PNG transparencies worked – so all the pointers, the google logo, etc ended up in white boxes.

    JanD – to output the xml, maybe you could create a custom page template and user php header() to output xml – then use the page custom fields to enter the lat/long details?

  • 5 JanD // Aug 31, 2005 at 4:27 pm

    Bill, thanks.
    I am fairly new to wordpress and PHP. I was messing around with it a little bit but I ran into problems the_loop

    Jan

  • 6 Reno // Sep 1, 2005 at 4:26 am

    I get the Google wrong directory error message no matter what. I’ve tried to emulate your example above however no go. Is there any change permalinks could be at fault?

  • 7 Reno // Sep 1, 2005 at 4:37 am

    scratch that last comment!! all working fine. Great work!

  • 8 ER // Sep 1, 2005 at 6:46 pm

    Fantastic implementation!! In the XML file with the HTML attribute, how would I insert line breaks for the text?

    Thanks!!

  • 9 bill // Sep 1, 2005 at 10:31 pm

    Adam – Glad it worked out okay for you.

    JanD – I wanted to do this without messing with templates or the base code, so it’s triggered entirely by the IFRAME in the post itself. The Javascript code included by the html. Makes it cleaner, in my view. If you have a site that relies on maps all the time, it might make sense to modify this approach to include some stuff by default in the header template.

    Reno – Excellent and thanks! Glad it’s working okay.

    ER – Thanks! I’ve updated the post to include a <BR/> between the IBM and Dev portions of one of the info popups. Have a look and see if it’s what you need. Sorry that you have to encode it, but hiding HTML elements is key to getting it by the XML parser without things blowing apart.

    -bill

  • 10 JanD // Sep 2, 2005 at 9:00 pm

    Bill, thanks for your help!
    I would like to parse the coordiates for markers and
    center from custom fields to the map. I am not sure
    if that is easy with skript.
    I can easily read the custom fields from within the_loop
    but then it is not obvious to me how I could parse those values to the skript to generate the map.

    Jan

  • 11 JanD // Sep 2, 2005 at 11:15 pm

    I got it to work. Thanks a lot for all the help.
    I am gebnerating the XML file from a template now as suggested by Adam.

    Jan

  • 12 JanD // Sep 4, 2005 at 10:15 pm

    I tried to include a link in the html field but had no luck.
    Did anyone do this?

    Jan

  • 13 ER // Sep 6, 2005 at 12:33 pm

    Jan, sure did. Thanks to Bill’s response to my question (thx again, Bill), I now see what is needed to parse HTML within the XML file.

    To make a link you would need to insert this exactly within the HTML string: <a href="http://www.dell.com&quot; target="_blank">www.dell.com</a>

    [Editor's note: I've put the code below. ER, you're one the right track here, but you need double-encoding for the XML to show up in a post or comment. Below I have to encode a third time to show you what I did to get it in the post. :-) ]

  • 14 bill // Sep 6, 2005 at 6:44 pm

    Jan – I’ve updated the post to include a link.

    ER – thanks for giving it a shot. I had to encode the encoded XML to get it past WordPress. FYI, here’s what it looks like (of course, I had to encode the already double-encoded XML to get it verbatim in the comment… my head hurts — don’t ask me to recurse any further). ;-)

    &lt;marker lat=&#34;30.402602&#34; lng=&#34;-97.715192&#34;
    html=&#34;&amp;lt;a href='http://ibm.com' target='_blank'&amp;gt;IBM&amp;lt;/a&amp;gt;
    &amp;lt;br/&amp;gt;Dev&#34; icon=&#34;icon1.png&#34;
    iconsh=&#34;icon1_shadow.png&#34;/&gt;

    Note: so we’re not confusing the issue any more than necessary, the junk directly above is only what I had to put in the original WP post to get it to display properly. For your XML marker files, only one level of XML encoding is required.

  • 15 JanD // Sep 6, 2005 at 7:19 pm

    ER and Bill thanks, I figured it out already. I forgot to encode on of the ” :-)
    Again, great work Bill.

    Jan

  • 16 techrageo.us links » Blog Archive » GooMaps // Sep 8, 2005 at 2:20 am

    [...] http://techrageo.us/2005/08/16/google-maps-api-and-wordpress/ using Google Maps in WordPress posts [...]

  • 17 ER // Sep 14, 2005 at 1:05 pm

    Fantastic, yet again. Sorry for the headache, Bill.

    Now for a new one: what about making an admin tool (possibly within WP or even as a plugin) that would allow you to edit/add/delete locations/geocodes/icons in the XML file? I got all the ideas of what it should do, but I don’t know how to get it started. My PHP skills aren’t all that just yet. Anyone interested in working on this?

  • 18 bill // Sep 14, 2005 at 8:18 pm

    ER – Hmmm… so you want an “editor” plugin that allows you to enter lat lon and all the stuff in the XML file directly in a WP admin panel? I’ll put it on the list. -bill

  • 19 Orlando Wakeboard » Location at Benwann.com // Sep 19, 2005 at 1:52 pm

    [...] Thanks to techrageo.us for making a sweet tutorial!! Check it out here [...]

  • 20 MaxPower // Oct 8, 2005 at 1:14 am

    Thanks for sharing your code on how to inlcude google maps in WordPress. If you care to indulge me, I have a question. I cannot seem to get the map working inside the iframe. It works on the standalone page but not the embed page

    Any ideas? I belive I have followed directions carefully!

    – thanks for any help!

  • 21 bill // Oct 8, 2005 at 3:49 pm

    Max – You’re welcome. I went to both your pages and you must have figured it out — they both seem to work.

    If you’re still having trouble, don’t hesitate to ask again.
    -bill

  • 22 MaxPower // Oct 8, 2005 at 7:57 pm

    I could only get it to work using php’s include function instead of an iframe. No idea why! Thanks for stopping by.

  • 23 alex // Oct 9, 2005 at 10:56 pm

    Great work. I’ve got the map working, but can’t seem to get markers to show. Any ideas what the problem might be?

  • 24 bill // Oct 10, 2005 at 10:52 am

    alex – not sure, but two things you did differently. First is the iframe href isn’t a fully-qualified URI, but that probably doesn’t matter. Second, you have mis-matched quote characters on the TITLE attribute ofthe IFRAME. That looks like a bigger problem. See if that helps. -bill

  • 25 bill // Oct 10, 2005 at 10:59 am

    Max – I don’t see an IFRAME in your post (the source confuses me a bit since you have /body and /html elements half way through it).

    Can you put up a post with the IFRAME? I’ll take a look at the source and see if I see anything that jumps out at me. -bill

  • 26 MaxPower // Oct 10, 2005 at 10:59 pm

    Bill, thanks for stopping by and checking out my problem. Your cue of the extra body tag etc led me to find that simply cutting and pasting the source for the iframe code component into wordpress results in extra line breaks being added. This screwed things up, and, once fixed now things work great!

    I have no idea if there is any advantage to using include over iframe, except that the inlcude command uses less text. Whatever, they both seem to work. Thanks for your help!

  • 27 Paul // Nov 2, 2005 at 6:55 pm

    Great information!! I’m using it for my airports site. Haven’t customised it with my locations yet but soon…. I haven’t yet figured out how to change the XML so that I use the regular marker icon rather than the IBM text but I will! Thanks again.

  • 28 Jesse // Nov 15, 2005 at 2:09 am

    I know pretty much zilch of JavaScript or XML, so this is hard for me to sink my teeth into, but I’m trying to create multiple maps and apply buttons I make on kalsey.com’s buttonmaker to stand in for the “IBM” things.

    Do I have to edit the JavaScript? How do I make more than one map? Pretty basic questions, I know, but all I get right now is a white box, and I feel stupid.

  • 29 Administrator // Nov 23, 2005 at 3:11 pm

    Jesse – To get two maps, you would do the same thing as above, except that you’d have two IFRAMEs.

    To use other icons, you’d upload those images then either change icon1.png and icon1_shadow.png in the XML file to the names of the images you created, or make sure your images are named icon1.png and icon1_shadow.png.

  • 30 cewood // Dec 4, 2005 at 11:09 am

    I am having some trouble getting my google map to work using K2 for my theme, it works under other themes, but no K2… i should explain that i am not using an iframe either, but calling a javacript function from a file i moved my code to. Anyone have any suggestions? I have tried inspecting the hell out of the page to see whats wrong with it, but have had no luck. The url in question is http://cewood.org/gmap/

  • 31 Mostly Harmless // Dec 6, 2005 at 10:27 pm

    Google Maps in a WordPress posting.

    Have to, have to, have to try this out.
    It’s a inserting a google map into the posting. I am using the example discussed in the posting.

    Sorry. If you’re seeing this, your browser doesn’t support IFRAMEs.
    You should upgrade to a …

  • 32 Mike // Feb 27, 2006 at 2:02 am

    This worked great, just what I was looking for!

  • 33 Untitled… for now » Linking photo outings with Google Maps // Feb 27, 2006 at 2:04 am

    [...] Killing time today playing around with Google Maps. Zoom out and move around to see where else I’ve been in North America, which is, sadly enough, pretty limited. Solution was found on http://techrageo.us. [...]

  • 34 Mostly Muppet Dot Com // Mar 29, 2006 at 1:03 pm

    Google Map of Lost island(s)

    If you’re looking for a Google Map of the potential locations of the Lost island, look no further.
    The map can also be accessed directly from this URL.
    Additionally, it’s going to live on a semi-static, non-blog page.
    You can read my previo…

  • 35 Geoff // Apr 5, 2006 at 9:30 am

    I love how easy your code is to understand and then implement on my own site. I tried going through the google api on my own, but lack of javascript experience made it a touch hard to self code everything. I’ve got a question though; is there a way to expand the text within the text box for each marker so that it takes up the entire text box as opposed to rolling over to a new line after a word or two and then falling out of the box after four lines?

  • 36 Geoff // Apr 5, 2006 at 10:10 am

    I figured out part of it, at least enough for a temporary fix….

    openInfoWindowHtml(html, opts?) where “opts?” only has GInfoWindowOptions.maxWidth as it’s valid input. If I put maxWidth=100% there, the box expands veritcally to fit my extra text. Still working on figuring out how to get the text to expand horizontally. Do you have any ideas?

  • 37 Frog Log » Blog Archive » Google Maps Test // Apr 23, 2006 at 6:33 pm

    [...] I set this up mostly using the directions I got from here. Although I didn’t need to make a new html file, I was able to just put the html code right in the post. This is becasue Google changed the way the allow you to use your API key. Now your key will work for your site and anything below your site too. [...]

  • 38 Farnsy’s Little Bit of the Net » Sample Google Maps map in a wordpress post // May 21, 2006 at 6:21 pm

    [...] I’m still working with the Gogle Maps stuff, and have been having a look at this post here on techrageo.us, which provided some very useful tips on embedding a  map in a wordpress post. Here’s a sample below including some of the places we visited while travelling  through Asia. Sorry. If you’re seeing this, your browser doesn’t support IFRAMEs. You should upgrade to a more current browser.   [...]

  • 39 john // Jan 29, 2007 at 11:46 am

    I don’t know if anyone still reads this, but I have a question about your wonderful code outlined here. My problem is that I cannot get the link contained in the info box to open in a new window. Instead it opens in the iframe which is rather annoying. I tried to apply your updated #2 but that does not seem to help. Any suggestions would be greatly appreciated.

    Map: http://correira.com/professional-soccer-in-the-united-states/

  • 40 bill // Jan 29, 2007 at 10:35 pm

    john, okay i\\\’ve updated the xml. it now opens a new window. basically you need to encode some javascript in the link. check it out and holler if you have trouble.

  • 41 John // Jan 29, 2007 at 11:50 pm

    Brilliant, thank you so much. If you ever have the time I would love to know what you changed. I spent several hours yesterday trying to figure that one out and would love to know what I was missing.

  • 42 bill // Jan 30, 2007 at 8:37 pm

    John, no problem. All I did (I say that now!) is embed javascript for the onClick event. Of course, it has to be encoded blah blah blah, just download the .xml file and look at the html attribute of the second marker element.

    WP doesn’t like all those codes in these comments (I’d have to encode them again to get them in this comment), so it’s best to just look at the goomap1.xml file.

    Basically, the href for the anchor is empty, and the onclick event is a javascript:window.open of the target site.

    Hope this helps!

  • 43 John // Feb 7, 2007 at 12:28 pm

    Ahh, ok, i see it know, makes sense, but I don’t know anything about Javascript so I would have never thought to do that.

  • 44 Another new feature : Losing it[1] // Apr 3, 2007 at 4:27 pm

    [...] Anyway, including a map involves lots of rather icky code, which is a bit much for my poor old brain. I did find a WordPress plugin that might have done the job, but it uses a feature that’s disabled for security reasons by Dreamhost, and while it might be possible to work around that, it would involve more programming than I’d really like. Then I found this tutorial, which provides another way to do it. It’s not quite as quick and easy as a plugin, but it’s easy enough for the small number of maps I’m likely to post. [...]

  • 45 Joe // Apr 23, 2007 at 2:53 am

    I’d like to use a map as an internal navigation tool – is there any way to get links to open in the same window and not within the IFRAME?

    I fear there won’t be an easy answer and that I might actually have to learn something in order to do this… say it ain’t so!!

  • 46 Joe // Apr 23, 2007 at 3:05 am

    …just to attempt to answer my own question…

    I cut out the step of embedding the HTML in the IFRAME – i.e. I copied the code from the HTML file and pasted it directly into a WP post. I also edited the XML file to point to an internal page and chopped off the target attribute.

    It seems to work ok but I’m a bit paranoid because it seems too easy. Any advice on why this technique will or won’t work would be greatly appreciated.

  • 47 kay // May 16, 2007 at 8:33 am

    hello,
    not familar at all with coding, i’ve managed to make this file, trying to embed “my maps” into my wordpress powered blog with bill’s instructions above. http://lequocthang.com/lukewarm/wp-content/goomap051507.js
    fundamentally, i don’t understand the use or writing xml part of the instructions. how do i modify it to describe my map that refers to a kml rather than drawing everything in the java script file? thanks so much.

  • 48 kay // May 16, 2007 at 9:33 am

    Hello,
    I used bill’s instructions to create a java script file of the map. but instead, i used google my maps to generate a kml to point to. please exuse me as i’m very beginner with writing code. how do i describe the map in the next step in the xml file? here is the .js file
    http://www.lequocthang.com/lukewarm/wp-content/goomap051507.js
    thanks a million!

  • 49 Ok, I take it back, Starbucks is A-OK by me // Jun 2, 2007 at 6:35 pm

    [...] just in case you are wondering how I got this Google map into a WordPress post, this was the link for [...]

  • 50 Piet // Jul 6, 2007 at 4:01 am

    Hi Bill,
    Great tool!
    It seems most people got it to work, but I am having trouble :(
    I have followed the instructions and for now left your map data in the xml file.
    Then I have put the iframe info in the page where i want the map to show, but nothing shows, just the square where the map should be.
    Do you have any suggestions for me?
    The url is http://www.beijinglivemusic.com/map/
    Thanks,
    Piet

  • 51 Eric’s Blog » google map integration // Aug 12, 2007 at 9:35 am

    [...] Here is a great tutorial on integrating Google Maps into WordPress. [...]

  • 52 reviewmylife » Blog Archive » Adding KML Google Maps overlays to WordPress posts // Dec 20, 2007 at 5:58 pm

    [...] There is a way around this, and that is to use the Google Maps API. This will allow you to programatically include as many KMLs as you want without using Google’s HTML generator. To use the API you have to sign up for a Google Maps API Key. There is one final problem – each key can only be used from one individual web directory. This can be a big problem if you are a WordPress user. Bill from the techrageo blog has already written about this so I won’t repeat what he has said. You can read his blog and look at his solution for yourself. [...]

  • 53 Collie // Feb 11, 2008 at 2:14 am

    hi,
    i cannot get the iframe to work in wordpress. can you instruct me on how to correct embed the iframe code, so that it works.

  • 54 Collie // Feb 11, 2008 at 6:10 am

    i got a workaround, iframe plugin for wordpress.
    now the new problem is this:
    i want to use a check box to turn on/off polylines in my map.
    but i don’t know how to get the check box to talk to the map.
    here’s the html:

    GooMaps Sample

    GooMapXml();

    Intended Route
    Track Log

    postamble();

  • 55 bill // Feb 11, 2008 at 11:23 pm

    @Collie – you can simply type the iframe code into your post. Make sure you have the Writing Option “WordPress should correct invalidly nested XHTML automatically” unchecked. As for your checkbox problem, I am not sure. Have you tried swapping iframe html with jquery or similar when the checkbox is toggled?

  • 56 Jose // Feb 15, 2008 at 6:07 pm

    I may have missed something somewhere, but is it possible to simply load the basic google hello world in a separate html file then embed it in an iframe, without having to use a separate xml file or the goomaps.js?

  • 57 bill // Feb 16, 2008 at 10:52 am

    @Jose – Sure, that works too. However, my preference is to separate data, presentation, and code. In this case the data goes in XML, general purpose code in the javascript file, then a simple shell HTML file. This way you don’t have to write additional code to add points, markers, etc. Just update the XML file.

    Then including another map in another post is a matter of creating the simple shell HTML file then describing your map in XML.

    But as I said, your way works too. Below I’m simply embedding the google map hello world file in an IFRAME, as you suggest.

  • 58 Murder by numbers » Blog Archive » Topologia e topografia // Mar 17, 2008 at 10:30 am

    [...] questa cartina ho usato codice rubato qui e [...]

  • 59 ? ???????-?????????? | ???????????, ?????????????? ??????????, ????? ???? // Apr 11, 2008 at 2:41 am

    [...] Google Maps for WordPress – GooMaps [...]

  • 60 Google Maps en tu Wordpress | Seraphinux // Apr 14, 2008 at 5:35 am

    [...] GooMaps | Google Maps for WordPress Link: Avi Alkalay | Google Maps Plugin for WordPress Link: aNieto2K | GeoPress, Google Maps en tu [...]

  • 61 brian // Mar 6, 2009 at 7:08 am

    Doesn’t it functioning anymore? Can’t see the hello map.

  • 62 admin // Mar 8, 2009 at 2:32 pm

    Thanks, Brian. Looks like Google changed the map type constants. I’ve updated the post and GooMaps.js.

  • 63 ganesh // Apr 24, 2009 at 9:29 am

    i got an error please any one help me actually in this icons are not there
    XML Parsing Error: not well-formed
    Location: http://localhost:8502/word/wp-content/themes/form/goomap.xml
    Line Number 3, Column 48:<marker lat=”30.402602″ lng=”-97.715192″ html=”IBMDev” icon=”icon1.png” iconsh=”icon1_shadow.png” iconszx=”20″ iconszy=”8″ iconshszx=”25″ iconshszy=”7″/>
    ———————————————–^

  • 64 Jason // May 9, 2009 at 3:36 pm

    Hi, guys. I need to make google map worn on my localhost site.
    Can you help me pls?
    my problem is:

    iframe.src=”googlemapslink&”+ country “emded_parameters”; is not working. it cannot see the string as one link.
    help pls

  • 65 Jon // Oct 20, 2009 at 3:24 pm

    I see the following message in my browser on this post:

    “Sorry. If you’re seeing this, your browser doesn’t support IFRAMEs. You should upgrade to a more current browser”

    I’ve checked your site in both FF and IE, but still get the same thing… any idea what that’s about?

    –J

Leave a Comment


− four = 5