Embedded maps

PROFI has perfect integration with Google Maps API out of the box.

Long Island Office

47-02 11th St, Long Island City, NY 11101, USA
Mon-Fri: 8:00 am - 5:00 pm
Sat: 8:00 am - 3:00 pm

Sun: Closed
646-846-8996 Appointments
212-355-2379 Fax
contact@mail.com

Manhattan Office

100 E 12th St, New York, NY 10003
Mon-Fri: 8:00 am - 5:00 pm
Sat: 8:00 am - 3:00 pm

Sun: Closed
646-846-8996 Appointments
212-355-2379 Fax
contact@mail.com

API key

Firstly, in order to get your map working you need to obtain API key and then include it in your page. Make sure to put this line after assets/js/app.js

<script>
WPHJS.GOOGLE_MAPS_API_KEY = 'your key here';
</script>

Markup

The basic markup for map component looks like:

<div class="gmap">
    <div class="gmap-embed">
        <div class="gmap-embed-sizing-helper"></div>
        <div class="gmap-embed-inner"
             data-options="{&quot;center&quot;:{&quot;lat&quot;:40.73774180898704,&quot;lng&quot;:-73.96465326476259}}"></div>
    </div>
</div>

This code will only show map with center on provided coordinates (in the code above they are 40.73774180898704 and -73.96465326476259).

Now let’s take a look at advanced usage:

<div class="gmap">
    <div class="gmap-embed" data-parallax-speed="0">
        <div class="gmap-embed-sizing-helper"></div>
        <div class="gmap-embed-inner"
             data-options="{&quot;center&quot;:{&quot;lat&quot;:40.73774180898704,&quot;lng&quot;:-73.96465326476259},&quot;scrollwheel&quot;:false,&quot;zoom&quot;:14,&quot;disableDefaultUI&quot;:true,&quot;draggable&quot;:true}"></div>
    </div>
    <div class="gmap-infoboxes">
        <div class="gmap-infobox" data-latlng="40.744978 -73.951145">
            <div class="gmap-infobox-header">
                <h1 class="gmap-infobox-label">Long Island Office</h1>
            </div>
            <div class="gmap-infobox-details">
                <div class="gmap-infobox-details-item">
                    47-02 11th St, Long Island City, NY 11101, USA
                    <div>
                        <a class="get-direction-link"
                           href="https://maps.google.com?daddr=47-02+11th+St%2C+Long+Island+City%2C+NY+11101%2C+USA"
                           target="_blank">Get directions</a></div>
                </div>
                <div class="gmap-infobox-details-item">
                    Mon-Fri: 8:00 am - 5:00 pm<br/>
                    Sat: 8:00 am - 3:00 pm
<br/>
                    Sun: Closed
                </div>
                <div class="gmap-infobox-details-item">
                    646-846-8996 <sup>Appointments</sup><br/>
                    212-355-2379 <sup>Fax</sup><br/>
                    <a href="mailto:contact@mail.com">contact@mail.com</a></div>
            </div>
        </div>
        <div class="gmap-infobox" data-latlng="40.7323995 -73.9897919">
            <div class="gmap-infobox-header">
                <h1 class="gmap-infobox-label">Manhattan Office</h1>
            </div>
            <div class="gmap-infobox-details">
                <div class="gmap-infobox-details-item">
                    100 E 12th St, New York, NY 10003
                    <div>
                        <a class="get-direction-link"
                           href="https://maps.google.com?daddr=100+E+12th+St%2C+New+York%2C+NY+10003"
                           target="_blank">Get
                            directions</a></div>
                </div>
                <div class="gmap-infobox-details-item">
                    Mon-Fri: 8:00 am - 5:00 pm<br/>
                    Sat: 8:00 am - 3:00 pm
<br/>
                    Sun: Closed
                </div>
                <div class="gmap-infobox-details-item">
                    646-846-8996 <sup>Appointments</sup><br/>
                    212-355-2379 <sup>Fax</sup><br/>
                    <a href="mailto:contact@mail.com">contact@mail.com</a></div>
            </div>
        </div>
    </div>
</div>

Here we added several infoboxes and map options. Infobox is a point on the map which will show additional information after a click on it. Infobox may contain any valid HTML. For the list of available map options please consult Google’s official documentation.

<div class="gmap-infobox" data-latlng="40.7323995 -73.9897919">
    <div class="gmap-infobox-header">
        <h1 class="gmap-infobox-label">Manhattan Office</h1>
    </div>
    <div class="gmap-infobox-details">
        <div class="gmap-infobox-details-item">
            100 E 12th St, New York, NY 10003
            <div>
                <a class="get-direction-link"
                   href="https://maps.google.com?daddr=100+E+12th+St%2C+New+York%2C+NY+10003"
                   target="_blank">Get
                    directions</a></div>
        </div>
        <div class="gmap-infobox-details-item">
            Mon-Fri: 8:00 am - 5:00 pm<br/>
            Sat: 8:00 am - 3:00 pm
<br/>
            Sun: Closed
        </div>
        <div class="gmap-infobox-details-item">
            646-846-8996 <sup>Appointments</sup><br/>
            212-355-2379 <sup>Fax</sup><br/>
            <a href="mailto:contact@mail.com">contact@mail.com</a></div>
    </div>
</div>