Tag: Google Maps API (Page 1 of 2)

Up to this point, a fair amount of work has been done in terms of introducing Google Maps in WordPress:

• Twentyfifteen is setup to communicate with the Google Maps API
• A map is being displayed in a custom template
• There are two markers that are placed on the map
• Each marker has its own InfoWindow used to display some information

There’s still more content that could be covered, and I’ll talk about some of the advanced content in another article but, for now, it’s time to refactor some of the code so that it’s more manageable, is organized in more of the “WordPress way,” and lays the foundation to more easily introduce new features.

Namely, all of the work that’s been done up to this point can be moved into a child theme and all of the code that’s been placed in the template can be abstracted out into its own files.

Continue reading

One of the nicest things about the markers in Google Maps is the information that we can get whenever we click on them; however, up until this point, our implementation of Google Maps in WordPress doesn’t display anything when you click on the marker.

For those who have tried, you know it doesn’t actually do anything. But that doesn’t mean it can’t [obviously]. So in this post, I’m going to cover how to create a display whenever the user clicks on a marker on the map.

I’ve covered something like this in a previous post, though it wasn’t done in the context of a series that was aiming to go from end-to-end with an implementation of the Google Maps API so if you’re already familiar with how to do this, then this particular article may not be that useful.

On the other hand, if you’ve been following along since the beginning then this is the next step that we’re going to take.

Continue reading

In the previous post, we added our first map to the template that we’ve been working on throughout this series.

Through a third-party tool, we ended up getting the latitude and longitude of a city in order to center the map, and though we still have refactoring that we’ll need to do, we successfully displayed the map on the screen.

But part of the lure of using Google Maps is the feature that it offers as it relates to marking certain locations. That is, displaying one of those little red pins that Google Maps shows when you’re browsing for a location, a destination, and so on.

So starting in this article, I’m going to walk through the process of adding up to two markers.

Over the next few articles, I’ll cover how to add multiple markers, and how to do so in a way that’s efficient when it comes to loading up the map on subsequent requests so you’re not exhausting you’re API calls every single time you need to render the map.

Continue reading

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.

Continue reading