To create an embedded Google Map of your housing locations, first download this zip file:

https://ascendant.nyc/wp-content/uploads/2019/11/Ascendant-Neighborhood-Development-Housing-Map.zip

Unzip the file, and there should be a “KMZ” file inside. We’ll need that later.

Next, visit:

https://mymaps.google.com

Click “Create a New Map”.

Beneath where it says “Untitled Layer”, click the “Import” link.

You’ll be prompted to choose a file to import. Select the KMZ file from the beginning of this guide.

Ignore the “Aww Snap!” error. The data we need will still be imported.

Use the +/- buttons in the bottom right to zoom in on the NYC area. You can also double-click on the map to zoom in, and “click and drag” the map as needed to reposition the view.

If you need to edit the data for the location “pins”, click the “three dot” button next to where it says “Locations”. Then select “Open data table”.

The data table functions like a spreadsheet. You can sort the columns or double-click on a cell to edit it.

When you’ve finished updating the data, click the “X” in the top right of the table. The data table saves automatically, so there is no manual save button.

Before we can embed the map, first we need to make it “public”. Click the “Share” button.

Enter a title and description for the map, then click “OK”.

Under “Who has access” we need the setting to be “Public”. If it says “Private”, click the link that says “Change…”.

Select “On – Public on the web”. Leave “Access” as “Can view”. You don’t want random people editing the map.

Click “Save”, then click “Done” on the next menu.

To embed the map, we need the embed “iFrame” code. Click the “three dot” button next to the map title, then select “Embed on my site”.

Highlight ALL the code and copy it. On Windows copy is “ctrl+c”, on a Mac copy is “Command key+c”.

Next, edit an existing page or create a new page on the WordPress site.

Make sure to select the “Text”/HTML view in the editor. Pasting embed codes in the Visual editor can have unpredictable results.

Then, paste the iFrame code you copied previously into the content area. On Windows paste is “ctrl+v”, on a Mac paste is “Command key+v”.

The default width and height for the map is 640×480. I’d recommend updating those values to “100%” and “600”.

Make sure you only change the values inside the quotation marks, modifying anything outside those quotes could break the code.

When you’ve finished, click “Publish” or “Update” to save your changes.

View the published page, and you should now see the embedded map.

If you need to edit the map data later you can do so via https://mymaps.google.com. You won’t need to copy/paste the code again unless you need to add it to a different post or page.

Return to Top

Return to Guides

Support our COVID-19 Relief Housing Fund

X