Standard Embed With [map]
[map]<iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=new+york+new+york&aq=&sll=40.758895,-73.985131&sspn=0.022202,0.045276&gl=us&ie=UTF8&hq=&hnear=New+York&ll=40.714353,-74.005973&spn=0.088852,0.181103&t=m&z=13&output=embed"></iframe>[/map]No Container For [map]
[map no_container="true"]<iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=new+york+new+york&aq=&sll=40.758895,-73.985131&sspn=0.022202,0.045276&gl=us&ie=UTF8&hq=&hnear=New+York&ll=40.714353,-74.005973&spn=0.088852,0.181103&t=m&z=13&iwloc=near&output=embed"></iframe>[/map]Options For [map]
Advanced Configuration With [google_map]
The [map] shortcode referenced above is great for our users who merely need a simplified way to embed maps onto their site. It is a no-frills approach to getting things up and running as quickly as possible.
That being said, there are a few limitations to this approach that might not serve everyone’s needs. For instance, when scrolling over a map it could trigger the zoom control on certain users’ computers, and you are not able to place multiple custom markers or messages if needed. If you find that you’re in need of some of these more advanced features, then the [google_map] shortcode is probably your best bet!
[google_map lat="40.7056308" lng"-73.9780035" zoom="12" zoom_control="true" drag="true" height="45%"][/google_map]Here we’re simply setting our center latitude and longitude coordinates along with our default zoom level (1-18). Notice that we can also choose to activate the zoom control or make the map draggable, both of which we have done in this instance. And finally, a custom height can be set if desired. Any unit of measurement can be used here such as pixels, ems, percentages, et cetera. Fixed units like pixels and ems will remain constant across all screen resolutions, but percentages will grow/shrink as you expand/minimize the browser window, so keep this in mind while making your choices for a height to see what best serves you.
Another great thing you can use with this shortcode is the hue parameter, which accepts a hexadecimal color value to generate unique color palettes for your maps. Below are a few examples of this:
[google_map lat="51.505749" lng="-0.124809" zoom="12" height="200px" hue="#1ca0d8"][/google_map][google_map lat="51.505749" lng="-0.124809" zoom="12" height="200px" hue="#d73f01"][/google_map][google_map lat="51.505749" lng="-0.124809" zoom="12" height="200px" hue="#54aa81"][/google_map]Once you have your map setup the way that you’d like, you can then utilize the [google_map_marker] shortcode inside of the [google_map] shortcode to set informational markers on your map. You can even use multiple markers for a single map if you’d like, which is great if your business has a few different locations that you’d like to display at once instead of across multiple maps.
[google_map lat="37.8069572" lng="-122.4161852" zoom="17" drag="true" height="60%"][google_map_marker lat="37.806688" lng="-122.419036"][google_map_marker lat="37.806463" lng="-122.415812"][google_map_marker lat="37.806578" lng="-122.414230"][/google_map]Take your markers a step further by adding some informational popups! These popups will appear when a user clicks on a marker that you have added to a map.
[google_map lat="37.8069572" lng="-122.4161852" zoom="17" drag="true" height="60%"][google_map_marker lat="37.806688" lng="-122.419036"][google_map_marker lat="37.806578" lng="-122.414230"][/google_map]Finally, you can even swap out the marker image with one of your own using the image attribute for the marker shortcode. Simply include the URL of the image you’d like to use in place of the standard marker image and you’ll be good to go. Remember to use a transparent PNG image and to crop it to the exact dimensions of your marker so you don’t have any extra padding on the image, as this can keep the marker from appearing over the correct location.
As you can see, this shortcode is incredibly flexible and provides you with a lot of great options for making incredible, custom maps on your website. Try pairing it with a page template that has no container so your maps can go fullwidth, which really takes everything to a whole new level!