Join Joseph Lowery for an in-depth discussion in this video Integrating the Google Store locator library, part of HTML5 Projects: Integrating Google Store Locator.
The main one on the left will hold the map after the placeholder text that I have there and the side bar on the right is for the store listings. Okay, let's head back to the code. We're going to bring in the HTML first. I'll scroll down to just past my placeholder text that you see on line 35, which is within the article tag which is in turn within another article tag with the id of mainContent. So I've got a comment here, I'm going to remove that and insert an empty div with an id of map-canvas.
This div will remain empty in the HTML. Now let's do the same thing for the store listings. As I mentioned before we want to put that in the sidebar, which in this design is within the aside tag that you see starting on line 39. Again I've got a comment here as a placeholder so I'll delete the comment and insert an empty div tag with an id of panel. The panel by the way is how the Store Locator Library refers to the store listings, so it seems like a good choice for the sake of consistency.
Since this is maintained by Google, we're going to link directly to their source code. In writing this link, I'll need to specify a true or false value for the sensor parameter. This tells Google whether the application uses a GPS locator to determine the user's location. Here, we'll set the value to false because desktop apps don't have GPS. Don't worry though; this won't prevent us from using the geolocation feature, either here or on mobile devices.
So I'll start with my script tag, again enter in my type attribute and now for the source, and this goes to http://maps. googleapis.com, googleapis being its own domain, /maps/api/js? followed by the parameter sensor and as I said we'll set that equal to false.