Displaying Google Maps in WordPress

If you’ve been following along with this particular series, then you’ve got a template setup and ready to begin displaying Google Maps in WordPress.

For whatever reason, if you’ve just stumbled across this series, then I’ve shared a basic introduction of the topic as well as how to setup a template within Twentyfifteen in WordPress 4.2.2 or how to display a map.

Those particular articles were a little longer than I usually like to share for posts like this, but I needed to get a few things setup before actually diving into the main points of this series.

Case in point: In this post, I’m primarily going to be talking about how to communicate with the Google Maps API to simply display a map – that’s it. Nothing more. Sure, there’s a lot more that can be done, and I plan to cover a lot of that material, but for now we just need to get a map displaying in our template.

Google Maps in WordPress

Assuming that you’ve followed the tutorial thus far, the primarily thing that I’m looking to cover in this post is to display a map within the context of our template.

I’ll walk through how I do it and then feel free to experiment with some of the parameters so that you can get a handle for how to tweak the map to your desire as you’ll likely need to make said adjustments in actual, real-world projects.

Anyway, the first thing that we need to do is to introduce a container that will, y’know, contain the map. This is as simple as adding a simple div element to the template:

Next, we need to introduce some JavaScript to the template. To do this, we need to make sure that it’s placed after the script import that was added in the previous article. This is because that library is a dependency on the JavaScript that we’ll be writing.

First, I’ll share the code, then I’ll explain what it’s doing after that:

In this gist, we’re setting up an event handler as defined within the Google Maps API such that when the window object loads, it will call our custom function maps_results_initialize.

Within that function, we’re making a call to the Google Maps API to create a Map object that will create a map zoomed at the ‘7’ level (which is an arbitrary number I selected for this demo), centered with the latitude and longitude coordinates of Atlanta, Georgia.

Now load up the template in your browser. You should see something like this:

No Google Maps

Oops. Nothing’s changed. So what gives? We actually have to explicitly specify the dimensions of the canvas in which the map is being drawn.

To say that this doesn’t look as nice as we’d like is an understatement, right? I mean, it doesn’t look like anything. We can improve this a little bit with CSS.

Remember, as mentioned in a previous post, the way in which I’m developing this template right now is not what I recommend as it relates to good web development practices – I’ll have an article at the end that walks through the process of refactoring later in the series (after all, this is how development often goes, but I digress).

Here is a little bit of CSS to improve the presentation of the map:

Okay, with that done, let’s refresh the page and see what we end up with:

With Google Maps

Much better, right? We’ve got the map displaying, filling up the width of the container, and centered on the center for which I’ve selected (remember to read the code comments!)

Moving On To Markers

Okay, at this point, the main goal has been achieved – we’ve got the Google Maps JavaScript library included and we’re displaying a Map. Sure, there are some additional changes that we could make in terms of, say, a zoom level or a position or where the map is centered, but these are all things that could be changed as an exercise on your own time.

After all, what are API Docs for?

Regardless, if you have questions, feel free to leave questions in the comments. Other than that, I’ll continue moving forward with the next article by adding content for how to add a marker to the map.

A Word About Multiple Markers

I’ll also have a short discussion on how to add multiple markers to a map as this is something that I often see tripping up developers. Or maybe it was just me.

Either way, there’s a process that we can follow that will address this and we’ll be covering this in the upcoming parts of the series.

Series Posts

  1. Using The Google Maps API and WordPress
  2. Integrating Google Maps in WordPress
  3. Displaying Google Maps in WordPress
  4. Google Maps in WordPress: Adding a Marker
  5. InfoWindows for Google Maps in WordPress
  6. Refactoring Our Code For Google Maps in WordPress

11 Replies to “Displaying Google Maps in WordPress”

  1. I’ve build a WordPress plugin that adds multiple markers and overlays – GeoTag Mapper. I was surprised how relatively easy was to work with Google Maps API to implement these features. Performance is not too bad either. There is a page with over 150 markers and corresponding number of thumbnails: http://plfotoart.com/kapliczki-powiat-nowosadecki/

    For large number of objects I sometimes use a hybrid approach where instead of a live map I create a screenshot image with a link to the interactive Google map: http://plfotoart.com/kapliczki-warszawa/

    And there is a live map with around 400 markers and an overlay: http://plfotoart.com/mapa-kapliczek-warszawa/

    1. That’s pretty slick – and you’re right, performance isn’t too bad!

      Personally, I probably wouldn’t use an image and then link to the overlay. I’d likely store the latitude and longitude of the markers, cache them (and maybe even do a partial page cache) of the template, and render that each time.

      When a new location is entered, then refresh the cache.

      Then again, I’m saying that all without knowing how yours is built (which seems to be good!), and I’m saying that all based on just an alternative idea. Nothing knocking your work ;).

  2. You probably noticed when a large number of markers are located on relatively small area the interactive features of Goggle maps are pretty much useless. You can get a general idea where the objects are located but most of the markers are sitting on top of each other and are not visible. You can zoom in but still are limited by the canvas dimensions.

    Most of our users click “Full Screen” button to open maps in a full screen view and use the interactive features from there.

    Caching data may be not the best option in our case. It would include beside latitude and longitude marker filenames, info window thumbnail filenames, info windows captions and so on. For data storage we use custom well optimized and indexed tables. I don’t see any performance issues in this area.

    Caching pages is another story. We may look into it.

  3. Hi Tom,

    I’m happy I found your tutorial on all this. I’m helping a person to have a google map display on their site so that anyone that is in need of connecting up with other like minded types can easily find one another. We are mimicking a site that does this same thing and they are based out of Europe. The problem is I know how to do your general WordPress site admin and creating sites using existing plugins and some tweaking of them. At my job I do many things that gets me into Javacript and HTML, CSS, PHP, but mostly I’m dealing with maintaining things so not a lot of new dev. All that to say I appreciate you putting this out there. I’ll repost when I get this completed. I’m working it for free for this guy and my real job gets in the way. I hate to say it but this guy is currently getting what he paid for and I’d like that to change.

    So what I’m doing is trying to provide the same type of multiple map marker situation where anyone can put their own image on the map with a list of things they can help someone with. That way someone can once they find the site search the map for someone in their area to contact and there will be a popup image someone can upload to show their face and contact information.

    The guys at thelastreformation.com already have this working for a worldwide map, but the people in the US want that too. We’ve reached out to them and they hired a programmer to do it and would have to pay him to talk to us so I’m just going to figure this out myself. From what I’m reading here I believe I can handle it. I have not read your post on multiple markers but I’ll be doing that next.

    1. All that to say I appreciate you putting this out there. I’ll repost when I get this completed. I’m working it for free for this guy and my real job gets in the way. I hate to say it but this guy is currently getting what he paid for and I’d like that to change.

      Sure thing! I’m happy to help. And hang in there – when people realize the value they get for what they pay for and then opt to go for something a bit more, it’ll be good.

      And it will happen (most likely). It just takes time.

      So what I’m doing is trying to provide the same type of multiple map marker situation where anyone can put their own image on the map with a list of things they can help someone with. That way someone can once they find the site search the map for someone in their area to contact and there will be a popup image someone can upload to show their face and contact information.

      Yep. Totally doable. I have this entire series on Google Maps and it should help so check it out!

      From what I’m reading here I believe I can handle it. I have not read your post on multiple markers but I’ll be doing that next.

      Ah, nice :). I think you’ll be able to get it. It’s not terribly difficult.

  4. Hi Tom,

    Thanks for the excellent tutorial. Am a beginner with Google maps and this has given me an excellent head start. I have a question though answer to which would help a great deal.

    I see in this the lat and lng are hard coded. I am working on a project where I have to convert a WordPress site to an app. In this app, the map has to be displayed based on the users current location (and of course there are going to be multiple users at any given point in time).

    Can you tell me how we can add this functionality to your code? It would be awesome if you can help me in this

    1. I have a question though answer to which would help a great deal.

      I’ll do the best I can :).

      Can you tell me how we can add this functionality to your code? It would be awesome if you can help me in this

      Using the HTML5 API, you can use the geolocation API for exactly this purpose.

      Since it’s relevant to each user’s browser, then it will display for that given user. Once you have that stored on the page, though, you can also record that to the database for future use.

      1. Hey Tom,

        Great series. I have a question that you DON’T cover here, but hopefully can answer.

        Geolocation WITHOUT html5 API

        Basically I don’t want to ask user for their location, each time a page loads (html5 API), and IP Geolocation is too inaccurate.

        So can we use Google Maps Geolocation API to find user’s city/zipcode (I don’t need it to be more precise).

        Please tell me if you know how to do it.

        Thanks, Leo

        1. Hey Leo — this isn’t something I’m familiar with doing. Browser have to ask the user permission before retrieving it.

          The next best option would be to use the IP address used to connect to the site, but this can be highly inaccurate based on how they opt to connect (satellite internet access, VPNs, etc.).

  5. Hi Tom,

    Thx a ton for your response. Much appreciate it.

    Am not very familiar with HTML5 Geolocation API (first Geolocation project I am doing). Will go thru it for sure.

    Meanwhile, if you are aware of any WordPress plugin or code snippet which will help me get the location of the user dynamically do let me know. Just to help you understand the requirement better, once the user’s location is identified, next step would be to display on map service providers of a relvant category (something like a store locator).

    Many thanks once again. God Bless!

    Warm regards,

    Teejay

  6. I was going good up until I added the code for the marker. the console shows errors relating to missing API Key. but your code above (on the page) does not show how this key is integrated.

    I’m stuck at this point.

    I know that in an earlier tut you showed how to create a new api key. The screenshots were different to what they look like now. no surprise there since Google seem to change them often. but I’m still unsure if I even have the right API key for the right job.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.