Posts Tagged maps

Embedding Maps

Posted by on Thursday, 22 October, 2015

It might occasionally be helpful to include a map in your posts—say, if you’re having an event outside the library or writing about local history.  Here are three different ways that you can incorporate maps into what you’re doing.

Google Maps

Enter your location.  It can be a specific street address or something like “library near [name of city]”.  Once you have your map on the screen, click Share.  You’ll see a popup on your screen with two tabs, Share Link and Embed Map.  You’ll want to click Embed Map.  Now, choose the size of your map.  It’s probably defaulted to Medium, but you might want to opt for Small instead.  Once your size is selected, copy the code provided and go back to your WordPress blog.  You’ll need to click on the Text tab to open up the version of the post editor that will accept code (you’ll find Text right next to Visual at the top of the editor).  After you paste the code into this box, you can switch back over to Visual view.  Once you publish your post, you’ll get something like this:

Bing Maps

The process here is pretty similar.  Enter your address and, once you have your map on screen, click on Share.  The Share button for Bing is located at the top right of your screen.  Your code will be presented in the Embed in a Webpage field, but you can also make changes to the map by clicking Customize and Preview.  Once you have the map correctly sized and with the features you want, copy your code into the Text view of your WordPress post.  Once that’s done, switch back to Visual view to finish writing your post.  Your embedded map will look like this:

Bing includes a few links beneath their maps that might be helpful to your readers.  Google sometimes provides a link for driving directions with their maps, but not always.  If you prefer Google, but also want to make sure that your patrons can access driving directions, you can copy and paste the following code directly into the Text version of your editor:
<form action=”http://maps.google.com/maps” method=”get” target=”_blank”>
Enter your starting address:
<input name=”saddr” type=”text” />
<input name=”daddr” type=”hidden” value=”Disney World, Orlando, Florida” />
<input type=”submit” value=”Submit” />
</form>
Just change the value on the line with input name “daddr” to your address (rather than Disney World).  You’ll end up with an embedded form for driving directions that looks and works like this:
Enter your starting address: