Add a Google Map to a story#
NOTE: There are now 2 ways to do this. Both are addressed here. The first uses the GeoData feature in Newscycle is for simple locator maps (location of fire, accident, etc. for breaking news); the second uses a Google Map embedded in the iframe field for anything more complex).
METHOD 1
This assumes your story is created and ready to publish in Mediaware
Take the street address of your incident, fire, accident, etc. and plug in either one of these sites:
Address should be in the format: 47 Eugene O'Neill Drive New London, CT (ZIP code is not necessary.) On mygeoposition.com, you'll get the result presented like so:
FIG. 1 -- MyGeoposition.com, fig. 1
Click the button labelled ‘Copy (x,y)' as shown below:
FIG. 2 -- MyGeoposition.com, fig. 1
This copies both the lat/long coordinates to your clipboard, in this format: 41.3551680, -72.0948490
Go to your story in NCS Content/Mediaware and go to the Web properties tab, and scroll to the GeoData section, as shown below:
FIG. 3 -- GeoData in web props tab in NCS Content/Mediaware, fig. 3
Fill in the Label, Data and Latitude and Longitude fields, with the pertinent information.
Label should contain something along the lines of the name of the location ("L+M Hospital", "Bates Woods," "I-95 in Groton")
Data should contain a street address, if available. If not, a fewe words about the location ("South of Exit 88 in Northbound lanes")
Latitude and Longitude are self-explanatory. BUT Longitude for all location west of Greenwich, England MUST have a minus sign before them, like so: -72.0948490.
Coordinates for The Day are: 41.3551680, -72.0948490
METHOD 2
- Go to maps.google.com
- Enter the address in the search box
- Google will put a pin at the location
- Click on the pin icon to bring up the info sidebar
- Click “share” in the sidebar
- In the pop-up window, click the “Embed map” tab
- You can drag and zoom the map to make it look the way you want
- When it looks the way you want, copy the iframe code. It will look like this:
<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2994.871153853523!2d-72.09704298423064!3d41.355154205954875!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89e60e61c365c3fd%3A0x4ad95cd8ed3c4081!2sThe+Day!5e0!3m2!1sen!2sus!4v1461703506840" width="600" height="450" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
You need to change the width to “100%”
You can set the height to whatever looks right, I like 400 usually.
The resulting code will look like this:
<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2994.871153853523!2d-72.09704298423064!3d41.355154205954875!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89e60e61c365c3fd%3A0x4ad95cd8ed3c4081!2sThe+Day!5e0!3m2!1sen!2sus!4v1461703506840" <span style="color: #800000;"><strong>width="100%" height="400"</strong></span> frameborder="0" allowfullscreen="allowfullscreen"></iframe>
Paste that code into the iframe field of your story. Publish or re-publish.