abbyputinski.com — Google Maps with a twist
Friday, October 4, 2013
Positioning the overlay on the map
The MapView has two child views. The DOM element for a custom overlay actually needs to reside inside the markup generated by Google Maps, but the overlay is an Ember.View so the MapOverlayView is actually rendered as a sibling of the MapCanvas and then moved into the correct spot later.
Keep the overlay centered while panning
The default behavior for a custom overlay is to re-calculate the styles when the map is panned, but to build an overlay that stays centered on the map, the overlay should only be drawn once and then pan with the map.
Creating the overlay
Finally, once the overlay has been created and rendered, resolve a promise letting the application know the map is ready.
Final Thoughts
This project was extremely fun and was successful due to the collaboration between design and development. The Google Maps API gave us the creative freedom to completely customize the map, while Custom Overlays really pulled the experience together.
Posted by Monica Tran, Google Maps API Marketing
Adam and Abby Putinski are a husband and wife design/dev team located in San Francisco. Learn more about their work at abbyputinski.com
We love the teamwork behind AbbyPutinski.com, designed by San Francisco illustrator Abby Putinski, and developed by her husband Adam. In this guest blog post, Adam will walk us through how he worked with Abby to give the map a unique, illustrated look, as well as fun-to-use animations.
Abby is a designer and illustrator living in San Francisco. In building her site, Abby wanted to take users on a journey to discover and explore some of her favorite places in San Francisco, in a way that reflected her illustration style. Taking Abby’s design direction into account, I began building the site, working with the Google Maps API to make the visual experience come to life for visitors of the site. The app is powered by Ember.js, so the application template includes a helper to render a MapView. Custom Overlays are used to take users on a journey around San Francisco.
Designing in Reverse
To make the map feel like an illustration, Abby used the Styled Maps Wizard to play with colors of the map. By using very few colors and disabling most of the roads and landmarks, she was able to give the map a flat, simple look. After exporting the JSON from the Styled Maps Wizard, Abby worked with screenshots of the map to design the rest of the experience.
Some of Abby’s favorite landmarks in San Francisco
The animated GIF in situ on the map as a custom overlay.
Defining a custom overlay
To create a fullscreen overlay, the bounds are set to the Southwest and Northeast corners.
Positioning the overlay on the map
The MapView has two child views. The DOM element for a custom overlay actually needs to reside inside the markup generated by Google Maps, but the overlay is an Ember.View so the MapOverlayView is actually rendered as a sibling of the MapCanvas and then moved into the correct spot later.
Keep the overlay centered while panning
The default behavior for a custom overlay is to re-calculate the styles when the map is panned, but to build an overlay that stays centered on the map, the overlay should only be drawn once and then pan with the map.
Creating the overlay
Finally, once the overlay has been created and rendered, resolve a promise letting the application know the map is ready.
Final Thoughts
This project was extremely fun and was successful due to the collaboration between design and development. The Google Maps API gave us the creative freedom to completely customize the map, while Custom Overlays really pulled the experience together.
Posted by Monica Tran, Google Maps API Marketing
Adam and Abby Putinski are a husband and wife design/dev team located in San Francisco. Learn more about their work at abbyputinski.com
Interactive Map of the Paris Metro
Wednesday, August 14, 2013
Interesting Maps API Components used: Geometry Library , KMLLayer , Styled Maps , Polylines , InfoWindows , Symbols , Markers
This week we are featuring a sample app by the French web development house Medusis . They have put together a custom directions application that guides you between Paris metro stations. It is available in both French and English . It is a beautiful app that uses several interesting features of the Maps API, some of which may not be immediately obvious.
The map is centered, naturally, on the city of Paris. The Paris Metro network is shown using a KMLLayer object. That way they can load in a large amount of unchanging data. You’ll also notice that the base map is styled to mute it to emphasize the metro lines, while preserving access to the Google base map data.
To find directions you can either use the drop down boxes in the top left or simply click on the stations. Notice that a couple of things happen. The KMLLayer that loaded the original layers switches to a grayscale KML file, to allow the use of Polylines to emphasize only the routes needed.
Each station also gets an InfoWindow that has the icons of the Metro lines serving that station. Each trip can be made of more than one Metro line. The portion of the line used in a particular trip is highlighted by using a Polyline. Markers for hubs and the origin and destination are highlighted using a Circle Symbol .
The map uses its own algorithm to compute the best route, using our Geometry Library to calculate distances to find the correct route.
This is a great demonstration piece on using the Google Maps API to show custom data. Well done Medusis .
Map of the Week: Ubilabs
Thursday, November 1, 2012
Map of the Week: Ubilabs
[Editors Note: Earlier this month we lauched morethanamap.com to showcase the unique features of the Google Maps API. As part of this project, each week we’ll be featuring one story from our global community of developers who are using the Google Maps API to start businesses, help improve their communities or save the environment.]
This week we move on from Nairobi to Hamburg, where we met with Ubilabs. In the middle of Hamburg’s old town is a rapidly growing workshop of developers, designers, and business people focused on building the next generation of Google Maps powered applications. Their speciality has been used to build applications for Europe’s largest brands such as Deutsche Telekom, Blitzer.de, and BMW. Below are a few examples built by Ubilabs that showcase great design and community action powered by the Google Maps API.
Crowd-sourcing to Fix Real Estate Problems
In a thriving city, real estate comes at a premium and sometimes people take advantage of that scarcity by mislabeling or misusing available real estate. To combat this problem, Ubilabs was called upon to build Leerstandsmelder.de (or the "Vacancy Reporter") in which users exchange information about the activities of a given property on a Google Map. Users can upload address data, photos, and detailed information here. They can also coordinate their search using Google Street View imagery integrated on the site. The result is that users can pool their collective knowledge to document alleged misuses and use this resource to lobby their local government to take action.
Showcasing a Global Brand
When Deutsche Telekom relaunched their corporate website they used Ubilabs and Google Maps to build a showcase of all of their affiliated companies and holdings worldwide. What makes this map great is that it uses several Google Maps API features to create a customized experience to reflect the corporate identity of Deutsche Telekom. Features like Styled Maps are used to match corporate colors, while custom markers, navigation and info windows complete a distinct identity. What's most unique about this map is the use of Google Maps as both the background and the foreground on the page. The map extends across the entire page with navigational menus floating on top of the map. The design flexibility, speed, and responsiveness of the Google Maps API are part what makes a design like this possible.
In the video below, Ubilabs co-founders Martin Kleppe and Michael Pletziger give us a live demonstration of these great projects.
Many thanks to the Ubilabs team for inviting us into their office and sharing with us their latest projects. To learn more about Ubilabs and the things that you can do with the Google Maps API, visit morethanamap.com. Tune in next week to read about our visit with Epungo in São Paulo, Brazil.
Posted by Carlos Cuesta, Google Maps API Product Marketing Manager
[Editors Note: Earlier this month we lauched morethanamap.com to showcase the unique features of the Google Maps API. As part of this project, each week we’ll be featuring one story from our global community of developers who are using the Google Maps API to start businesses, help improve their communities or save the environment.]
This week we move on from Nairobi to Hamburg, where we met with Ubilabs. In the middle of Hamburg’s old town is a rapidly growing workshop of developers, designers, and business people focused on building the next generation of Google Maps powered applications. Their speciality has been used to build applications for Europe’s largest brands such as Deutsche Telekom, Blitzer.de, and BMW. Below are a few examples built by Ubilabs that showcase great design and community action powered by the Google Maps API.
Crowd-sourcing to Fix Real Estate Problems
In a thriving city, real estate comes at a premium and sometimes people take advantage of that scarcity by mislabeling or misusing available real estate. To combat this problem, Ubilabs was called upon to build Leerstandsmelder.de (or the "Vacancy Reporter") in which users exchange information about the activities of a given property on a Google Map. Users can upload address data, photos, and detailed information here. They can also coordinate their search using Google Street View imagery integrated on the site. The result is that users can pool their collective knowledge to document alleged misuses and use this resource to lobby their local government to take action.
Showcasing a Global Brand
When Deutsche Telekom relaunched their corporate website they used Ubilabs and Google Maps to build a showcase of all of their affiliated companies and holdings worldwide. What makes this map great is that it uses several Google Maps API features to create a customized experience to reflect the corporate identity of Deutsche Telekom. Features like Styled Maps are used to match corporate colors, while custom markers, navigation and info windows complete a distinct identity. What's most unique about this map is the use of Google Maps as both the background and the foreground on the page. The map extends across the entire page with navigational menus floating on top of the map. The design flexibility, speed, and responsiveness of the Google Maps API are part what makes a design like this possible.
In the video below, Ubilabs co-founders Martin Kleppe and Michael Pletziger give us a live demonstration of these great projects.
Many thanks to the Ubilabs team for inviting us into their office and sharing with us their latest projects. To learn more about Ubilabs and the things that you can do with the Google Maps API, visit morethanamap.com. Tune in next week to read about our visit with Epungo in São Paulo, Brazil.
Posted by Carlos Cuesta, Google Maps API Product Marketing Manager
Map of the Week: Computerlogy’s Thailand Flood map and SCB Bank Finder
Wednesday, October 17, 2012
Map of the Week: Computerlogy’s Thailand Flood map and SCB Bank Finder
[Editors Note: Earlier this month we lauched morethanamap.com to showcase the unique features of the Google Maps API. As part of this, each week we’ll be featuring one story from our global community of developers who are using the Google Maps API to start businesses, help improve their communities or save the environment.]
This week we move on from Sydney, Australia to Bangkok, Thailand where we met with Vachara Aemavat, founder of Computerlogy. Computerlogy is a development shop that specializes in building Google Maps powered applications. In addition to building enterprise-class applications, they’ve also donated their time and skills to help their community. Today we’ll focus on two projects from Computerlogy: a Thailand Flood Crisis Response map that uses the Google Elevation API and a store local for Siam Commercial Bank.
Helping people find high ground
During the 2011 monsoon season, severe flooding occurred in and around Bangkok. According to Wikipedia, “Sixty-five of Thailand's 77 provinces were declared flood disaster zones, and over 20,000 square kilometres (7,700 sq mi) of farmland was damaged.” As floods ravaged their community, the team at Computerlogy developed a map to help save people’s lives using the Google Elevation API. The Thailand Flood Crisis Response map allowed users to check the elevation of their home (or their family and friends) to determine if they would be affected by the flooding. From there, users shared this information across a variety of channels to alert friends and family who were affected and to offer suggestions of where to go to get out of harm’s way.
Helping people find an ATM
Computerlogy has worked with some of Thailand's biggest companies to build Google Maps powered applications, including the Siam Commercial Bank ATM locator. Some unique features of the map include Styled Maps and custom info windows. Vachara says they choose the Google Maps API for its flexibility and strong data coverage throughout Thailand.
Below you can view a video of Vachara going through a live demonstration of these two great examples of Google Maps API powered apps built by Computerlogy.
A big thanks to Vachara Aemavat, founder of Computerlogy, for inviting us into his office and sharing with us his latest projects. To learn more about Computerlogy and the things that you can do with the Google Maps API, visit morethanamap.com. Tune in next week to read about our visit with Upande in Nairobi, Kenya.
Posted by Carlos Cuesta, Google Maps API Product Marketing Manager
[Editors Note: Earlier this month we lauched morethanamap.com to showcase the unique features of the Google Maps API. As part of this, each week we’ll be featuring one story from our global community of developers who are using the Google Maps API to start businesses, help improve their communities or save the environment.]
This week we move on from Sydney, Australia to Bangkok, Thailand where we met with Vachara Aemavat, founder of Computerlogy. Computerlogy is a development shop that specializes in building Google Maps powered applications. In addition to building enterprise-class applications, they’ve also donated their time and skills to help their community. Today we’ll focus on two projects from Computerlogy: a Thailand Flood Crisis Response map that uses the Google Elevation API and a store local for Siam Commercial Bank.
Helping people find high ground
During the 2011 monsoon season, severe flooding occurred in and around Bangkok. According to Wikipedia, “Sixty-five of Thailand's 77 provinces were declared flood disaster zones, and over 20,000 square kilometres (7,700 sq mi) of farmland was damaged.” As floods ravaged their community, the team at Computerlogy developed a map to help save people’s lives using the Google Elevation API. The Thailand Flood Crisis Response map allowed users to check the elevation of their home (or their family and friends) to determine if they would be affected by the flooding. From there, users shared this information across a variety of channels to alert friends and family who were affected and to offer suggestions of where to go to get out of harm’s way.
Helping people find an ATM
Computerlogy has worked with some of Thailand's biggest companies to build Google Maps powered applications, including the Siam Commercial Bank ATM locator. Some unique features of the map include Styled Maps and custom info windows. Vachara says they choose the Google Maps API for its flexibility and strong data coverage throughout Thailand.
Below you can view a video of Vachara going through a live demonstration of these two great examples of Google Maps API powered apps built by Computerlogy.
A big thanks to Vachara Aemavat, founder of Computerlogy, for inviting us into his office and sharing with us his latest projects. To learn more about Computerlogy and the things that you can do with the Google Maps API, visit morethanamap.com. Tune in next week to read about our visit with Upande in Nairobi, Kenya.
Posted by Carlos Cuesta, Google Maps API Product Marketing Manager
Map of the Week: GetFlight.com.au
Wednesday, October 10, 2012
Map of the Week: GetFlight.com.au
[Editors Note: Last week we lauched morethanamap.com to showcase the unique features of the Google Maps API. As part of this, each week we’ll be featuring one story from our global community of developers who are using the Google Maps API to start businesses, help improve their communities or save the environment.]
As part of morethanamap.com, we went around the world to speak with developers who are using the Google Maps API. Sydney, Australia was our first stop, where we met with GetFlight.com.au founder Ian Cumming at the Fishburners coworking space.
GetFlight is an Australian-based airfare search site that uses the Google Maps API to help users discover cheap airfare to global destinations. This site is tailored to Aussie travelers who don't have a particular location in mind and want to visualize where in the world they can travel within a certain price and date range. This ‘go anywhere’ exploratory travel site is something that’s really unique to the mindset of the Aussie travel. Another thing that really stands about GetFlight is that the entire site is built, operated, and maintained by Ian alone. It’s a true testament to the Australian entrepreneurial spirit.
The site takes advantage of Styled Maps and Google Maps API v3 to ensure that the site works on multiple devices. For GetFlight, it’s critical to their users’ experience that the site works as well on a tablet device as it does on a desktop. Using Styled Maps, Ian was able to create a more branded and simplified look for his application. There’s even the ability to view flight routes with geodesic lines which are more true to the actual flight paths. In the video below, Ian walks us through the ins and outs of his site and also shows us how the site works on multiple devices in real-time.
You may have noticed something a little peculiar next to Ian’s laptop in the video: an older model Dell Pentium 4 laptop. Ian uses this laptop to test and debug all his work. Ian’s philosophy is, “if I can make it work well on here [the older laptop], I know it’s going to be screaming fast there [his newer laptop and tablet].”
A big thanks to Ian Cumming, founder of GetFlight.com.au, for inviting us into his office and sharing with us his latest project. To learn more about GetFlight.com.au and the things that you can do with the Google Maps API, visit morethanamap.com. Tune in next week to read about our visit with Computerlogy in Bangkok, Thailand.
Posted by Carlos Cuesta, Google Maps API Product Marketing Manager
[Editors Note: Last week we lauched morethanamap.com to showcase the unique features of the Google Maps API. As part of this, each week we’ll be featuring one story from our global community of developers who are using the Google Maps API to start businesses, help improve their communities or save the environment.]
As part of morethanamap.com, we went around the world to speak with developers who are using the Google Maps API. Sydney, Australia was our first stop, where we met with GetFlight.com.au founder Ian Cumming at the Fishburners coworking space.
GetFlight is an Australian-based airfare search site that uses the Google Maps API to help users discover cheap airfare to global destinations. This site is tailored to Aussie travelers who don't have a particular location in mind and want to visualize where in the world they can travel within a certain price and date range. This ‘go anywhere’ exploratory travel site is something that’s really unique to the mindset of the Aussie travel. Another thing that really stands about GetFlight is that the entire site is built, operated, and maintained by Ian alone. It’s a true testament to the Australian entrepreneurial spirit.
The site takes advantage of Styled Maps and Google Maps API v3 to ensure that the site works on multiple devices. For GetFlight, it’s critical to their users’ experience that the site works as well on a tablet device as it does on a desktop. Using Styled Maps, Ian was able to create a more branded and simplified look for his application. There’s even the ability to view flight routes with geodesic lines which are more true to the actual flight paths. In the video below, Ian walks us through the ins and outs of his site and also shows us how the site works on multiple devices in real-time.
You may have noticed something a little peculiar next to Ian’s laptop in the video: an older model Dell Pentium 4 laptop. Ian uses this laptop to test and debug all his work. Ian’s philosophy is, “if I can make it work well on here [the older laptop], I know it’s going to be screaming fast there [his newer laptop and tablet].”
A big thanks to Ian Cumming, founder of GetFlight.com.au, for inviting us into his office and sharing with us his latest project. To learn more about GetFlight.com.au and the things that you can do with the Google Maps API, visit morethanamap.com. Tune in next week to read about our visit with Computerlogy in Bangkok, Thailand.
Posted by Carlos Cuesta, Google Maps API Product Marketing Manager
Map of the Week: Springsteen in the USA
Wednesday, September 26, 2012
Author Photo
Map of the Week:Springsteen in the USA
Why we like it: This is a fun map put together by the The Timoney Group , showing forty years of Bruce Springsteen concerts in the US using our new Heatmap Layer .
As you play the animation, it adds concerts year by year, and displays the tour name below the map. It shows an inset map of the Northeast United States, where he apparently spent most of his time touring, and alongside that it displays the album cover from the tour.
We like they put a scrolling list of concerts at the bottom of the map, and how the heatmap appears to animate as each concert is added. This is a simple, yet engaging site that demonstrates the power of using heatmaps for data visualization.
Posted by Mano Marks , Maps Developer Relations
Map of the Week:Springsteen in the USA
Why we like it: This is a fun map put together by the The Timoney Group , showing forty years of Bruce Springsteen concerts in the US using our new Heatmap Layer .
As you play the animation, it adds concerts year by year, and displays the tour name below the map. It shows an inset map of the Northeast United States, where he apparently spent most of his time touring, and alongside that it displays the album cover from the tour.
We like they put a scrolling list of concerts at the bottom of the map, and how the heatmap appears to animate as each concert is added. This is a simple, yet engaging site that demonstrates the power of using heatmaps for data visualization.
Posted by Mano Marks , Maps Developer Relations
Map of the Week: Bostonography Neighborhoods
Thursday, July 12, 2012
Map of the Week: Bostonography Neighborhoods
Why we like it: This is a unique solution to an old problem. We really like the use of drawing tools to collect information and Styled Maps to help the data stand out better.
In almost every city, there is some disagreement as to where one neighborhood ends and another begins. Furthermore, as is often the case, reputable sources have differing neighborhood lines. In reality there are no physical lines on the ground clearly defining neighborhoods, however these hypothetical boundaries do have a real impact on local economies, politics, and identity. Bostonography has set out to solve this problem by creating a tool to collect as many neighborhood definitions as possible.
From the Bostonography website, “We want to map the collective definitions of Boston's neighborhoods by its residents and those who know the city well. This map is a tool for drawing top-level neighborhood boundaries … as you see them, and submitting them to a database that will be used to map the areas of agreement and disagreement among participants.”
Bostonography has begun to parse the data and has calculated which neighborhoods have the most agreement and which have the most disagreement. The results of the first few data sets are stunning. To further illustrate how complex neighborhood definitions can be, this separate example by The Boston Globe shows just how “tangled” neighborhood boundaries are, even amongst city agencies!
If you have knowledge of Boston yourself, Bostonography encourages you to contribute to the map. “Submit a map of as many or as few neighborhoods as you wish, but we of course encourage you to draw all of them. Detail as intricate as you have patience for is appreciated, too, for the sake of the eventual maps of the results.”
So whether you’re from Southie or from Allston, we all can agree that this map is wicked awesome.
Posted by Carlos Cuesta, Google Maps API Product Marketing Manager
Why we like it: This is a unique solution to an old problem. We really like the use of drawing tools to collect information and Styled Maps to help the data stand out better.
In almost every city, there is some disagreement as to where one neighborhood ends and another begins. Furthermore, as is often the case, reputable sources have differing neighborhood lines. In reality there are no physical lines on the ground clearly defining neighborhoods, however these hypothetical boundaries do have a real impact on local economies, politics, and identity. Bostonography has set out to solve this problem by creating a tool to collect as many neighborhood definitions as possible.
From the Bostonography website, “We want to map the collective definitions of Boston's neighborhoods by its residents and those who know the city well. This map is a tool for drawing top-level neighborhood boundaries … as you see them, and submitting them to a database that will be used to map the areas of agreement and disagreement among participants.”
Bostonography has begun to parse the data and has calculated which neighborhoods have the most agreement and which have the most disagreement. The results of the first few data sets are stunning. To further illustrate how complex neighborhood definitions can be, this separate example by The Boston Globe shows just how “tangled” neighborhood boundaries are, even amongst city agencies!
If you have knowledge of Boston yourself, Bostonography encourages you to contribute to the map. “Submit a map of as many or as few neighborhoods as you wish, but we of course encourage you to draw all of them. Detail as intricate as you have patience for is appreciated, too, for the sake of the eventual maps of the results.”
So whether you’re from Southie or from Allston, we all can agree that this map is wicked awesome.
Posted by Carlos Cuesta, Google Maps API Product Marketing Manager
Map of the Week: The Global Transition to a New Economy
Wednesday, June 20, 2012
Map of the Week: The Global Transition to a New Economy
Why we like it: This map is a great way to discover NGO projects from all over the world. The info-graphic style of the site is a well designed way to catalog a large amount of information, that’s easy to access and understand. Additionally, by using Styled Maps to simplify the color scheme of the map, the color coded markers really pop out.
In the run-up to this year’s United Nations’ Conference on Sustainable Development 2012 (Rio+20), the New Economics Institute launched the Global Transition to a New Economy. As described by the organization, “The Global Transition to a New Economy maps innovative projects that challenge business as usual ... Together, these projects create a world that prioritizes human well being, within environmental limits.”
Promoting activism on a global scale is a very complex task. This map aims to make things easier by cataloging the efforts of many different NGOs on and around the map.
The map employs several design elements to create a very focused message. For example, the color of the map fits in well with the branding of the site and there’s even the ability to turn political labels on or off, which is a creative way of using styled maps to show that the problems we face in future are not exclusive to any boundary.
It’s great to see another example of the Google Maps API being used to promote good causes in the world. We hope visitors will use this map to discover great organizations around the world and help solve the environmental and economic problems we face.
Posted by Carlos Cuesta, Google Maps API Product Marketing Manager
Why we like it: This map is a great way to discover NGO projects from all over the world. The info-graphic style of the site is a well designed way to catalog a large amount of information, that’s easy to access and understand. Additionally, by using Styled Maps to simplify the color scheme of the map, the color coded markers really pop out.
In the run-up to this year’s United Nations’ Conference on Sustainable Development 2012 (Rio+20), the New Economics Institute launched the Global Transition to a New Economy. As described by the organization, “The Global Transition to a New Economy maps innovative projects that challenge business as usual ... Together, these projects create a world that prioritizes human well being, within environmental limits.”
Promoting activism on a global scale is a very complex task. This map aims to make things easier by cataloging the efforts of many different NGOs on and around the map.
The map employs several design elements to create a very focused message. For example, the color of the map fits in well with the branding of the site and there’s even the ability to turn political labels on or off, which is a creative way of using styled maps to show that the problems we face in future are not exclusive to any boundary.
It’s great to see another example of the Google Maps API being used to promote good causes in the world. We hope visitors will use this map to discover great organizations around the world and help solve the environmental and economic problems we face.
Posted by Carlos Cuesta, Google Maps API Product Marketing Manager
Map of the Week: London Calling
Tuesday, June 5, 2012
Map of the Week: London Calling
Why we like it: This map is a great way to promote a city and share its history. A brilliantly designed UI, that includes info windows with map cutouts. Additionally, it’s an elegant use of Styled Maps.
In honor of a big year for the city of London, the BBC Australia has created “London Calling” as a way to explore and celebrate London. For those of you who know your way around London, there’s a ‘drop-the-pin’ challenge, where users answer geography questions by placing a pin on the map in the right place. If you get stuck with particular questions, there’s also the option to reach out to the “London Calling” team.
For those that just want to explore London, the map is a great way to learn more about the city that has been getting a lot of attention in light of the Queen’s Jubilee and the upcoming 2012 Olympics. There’s even a chance to win prizes just by exploring the map!
From a design standpoint, this map is really great to look at. Two things about this map really stand out to us. Firstly, Styled Maps has been used to add a sepia effect that reflects the rich history of the city of London. Secondly, this is one of the first use cases where we’ve seen a custom info window that includes a cutout to reveal the highlighted feature below. A clever design choice that’s great to look at!
Overall, we’re honored that the Google Maps API was part of the BBC’s efforts to celebrate a great year for London!
Posted by Carlos Cuesta, Google Maps API Product Marketing Manager
Map of the Week: Made in NY Digital Map
Tuesday, May 15, 2012
Map of the Week: Made in NY Digital Map
Why we like it: A beautiful visualization of tech companies in New York City, which uses Styled Maps and our Marker Clusterer library. Also, this is the first map to come to us directly from New York City Mayor Michael Bloomberg (perhaps as a result of his pledge to learn code in 2012:)!
This week’s ‘Map of the Week’ comes to us directly from New York City Mayor Michael Bloomberg! On Tuesday at Internet Week New York, Mayor Bloomberg released Made in New York as a resource for job seekers. The map is a visualization of the city’s tech startups that connects jobs seekers with job listings.
To help users better visualize all the data on the map, Marker Clusterer is used to group together a collection of points that are in close proximity to each other. The resulting clusters are color coded by the number of listings that they contain, and a Styled Map is used to make the data stand out better.
At launch Made in New York contains more than 500 companies. Of those companies, about 325 are currently hiring. You can sort the map by digital companies, investors, and co-working/incubator spaces
Mayor Bloomberg has high hopes for this Google Map. At the conference Bloomberg stated “We expect this map to be another tool that helps propel our tech industry forward.” With a map as beautifully designed as Made in New York, good things are sure to follow.
Posted by Carlos Cuesta, Google Maps API Product Marketing Manager
Why we like it: A beautiful visualization of tech companies in New York City, which uses Styled Maps and our Marker Clusterer library. Also, this is the first map to come to us directly from New York City Mayor Michael Bloomberg (perhaps as a result of his pledge to learn code in 2012:)!
This week’s ‘Map of the Week’ comes to us directly from New York City Mayor Michael Bloomberg! On Tuesday at Internet Week New York, Mayor Bloomberg released Made in New York as a resource for job seekers. The map is a visualization of the city’s tech startups that connects jobs seekers with job listings.
To help users better visualize all the data on the map, Marker Clusterer is used to group together a collection of points that are in close proximity to each other. The resulting clusters are color coded by the number of listings that they contain, and a Styled Map is used to make the data stand out better.
At launch Made in New York contains more than 500 companies. Of those companies, about 325 are currently hiring. You can sort the map by digital companies, investors, and co-working/incubator spaces
Mayor Bloomberg has high hopes for this Google Map. At the conference Bloomberg stated “We expect this map to be another tool that helps propel our tech industry forward.” With a map as beautifully designed as Made in New York, good things are sure to follow.
Posted by Carlos Cuesta, Google Maps API Product Marketing Manager
Map of the Week: MTA Bus Time
Wednesday, May 2, 2012
Map of the Week: MTA Bus Time
Why We Like it: A great use of the Google Maps API by a municipal agency to improve the services they provide to their community. Also, it is beautifully designed and a great use of styled maps.
For many people the most difficult part about riding public transportation is knowing when your ride will arrive. To take the anxiety out of riding the bus, MTA Bus Time provides real time tracking of New York city’s MTA buses on their Google Maps API implementation. Easy search functionality allows users to find bus lines via intersection, bus route, or bus stop code.
It’s easy to see that the NYC MTA spent a lot of time and effort designing this map. Their use of styled maps helps the bus routes stand out better. Additionally, info windows display real time information about the location of the bus and it’s next stop. There are even special bus icons that show which direction the bus is headed. The MTA also produced a great video on YouTube to help riders better understand how this system works. Among the many great features of this system not on the map itself is the ability to access the tool through QR codes posted on bus stops throughout the city.
While real-time bus tracking isn’t available across all routes just yet, NYC MTA is planning to have this available system wide by 2013. If you would like to see other real-time public transportation tracking maps, check out SwissTrains.ch, DC Circulator, and Stadtbahn Tracker.
Posted by Carlos Cuesta, Google Maps API Product Marketing Manager
Why We Like it: A great use of the Google Maps API by a municipal agency to improve the services they provide to their community. Also, it is beautifully designed and a great use of styled maps.
For many people the most difficult part about riding public transportation is knowing when your ride will arrive. To take the anxiety out of riding the bus, MTA Bus Time provides real time tracking of New York city’s MTA buses on their Google Maps API implementation. Easy search functionality allows users to find bus lines via intersection, bus route, or bus stop code.
It’s easy to see that the NYC MTA spent a lot of time and effort designing this map. Their use of styled maps helps the bus routes stand out better. Additionally, info windows display real time information about the location of the bus and it’s next stop. There are even special bus icons that show which direction the bus is headed. The MTA also produced a great video on YouTube to help riders better understand how this system works. Among the many great features of this system not on the map itself is the ability to access the tool through QR codes posted on bus stops throughout the city.
While real-time bus tracking isn’t available across all routes just yet, NYC MTA is planning to have this available system wide by 2013. If you would like to see other real-time public transportation tracking maps, check out SwissTrains.ch, DC Circulator, and Stadtbahn Tracker.
Posted by Carlos Cuesta, Google Maps API Product Marketing Manager
Map of the Week: Map of the Dead
Tuesday, April 17, 2012
Map of the Week: Map of the Dead
Why we like it: This map is a highly creative and innovative use of the Google Places API and Styled Maps. Also invaluable tool for a “zombie apocalypse.”
When the impending zombie apocalypse is upon us the first thing you need to do is find shelter and supplies. Naturally, your first choice should be the Anti-Zombie Fortress. Unfortunately, Google does not have one on campus and my facilities requests have gone unanswered. Therefore, if you’re like me you’ll just have to make do with something else. Luckily for the rest us of there’s Map of the Dead.
Map of the Dead is designed to help the living survive the zombie apocalypse by locating the nearest points of interest that are relevant to survival and identify the danger areas. The first thing you need to do to use this invaluable tool is to enter your address. The site uses HTML5 Geolocation to tell where you are, but if you need enter an address manually the Google Places Autocomplete API ensures that an address can be quickly populated automatically, saving precious seconds.
Danger areas are identified on the map using the Styled Maps. Red areas denote where zombies are most likely to roam, while dark areas are typically less populated and therefore less likely to have feeding zombies. After finding shelter, the next most important aspect to surviving the zombie apocalypse is having the right supplies. Using the Google Places API, Map of the Dead displays the most relevant points of interests nearby; such as hospitals, outdoor supply stores, and police stations.
We hope this map has helped you understand how your neighborhood would fare in such a event. Thanks to the developers from Doejo for making this our map of the week!
Posted by Carlos Cuesta, Google Maps API Product Marketing Manager
Why we like it: This map is a highly creative and innovative use of the Google Places API and Styled Maps. Also invaluable tool for a “zombie apocalypse.”
When the impending zombie apocalypse is upon us the first thing you need to do is find shelter and supplies. Naturally, your first choice should be the Anti-Zombie Fortress. Unfortunately, Google does not have one on campus and my facilities requests have gone unanswered. Therefore, if you’re like me you’ll just have to make do with something else. Luckily for the rest us of there’s Map of the Dead.
Map of the Dead is designed to help the living survive the zombie apocalypse by locating the nearest points of interest that are relevant to survival and identify the danger areas. The first thing you need to do to use this invaluable tool is to enter your address. The site uses HTML5 Geolocation to tell where you are, but if you need enter an address manually the Google Places Autocomplete API ensures that an address can be quickly populated automatically, saving precious seconds.
Danger areas are identified on the map using the Styled Maps. Red areas denote where zombies are most likely to roam, while dark areas are typically less populated and therefore less likely to have feeding zombies. After finding shelter, the next most important aspect to surviving the zombie apocalypse is having the right supplies. Using the Google Places API, Map of the Dead displays the most relevant points of interests nearby; such as hospitals, outdoor supply stores, and police stations.
We hope this map has helped you understand how your neighborhood would fare in such a event. Thanks to the developers from Doejo for making this our map of the week!
Posted by Carlos Cuesta, Google Maps API Product Marketing Manager
5 Great Maps... That are just great!
Wednesday, September 28, 2011
Each month I try to focus on 5 great maps within a certain theme, but this month Google Geo developers have really outdone themselves and I’ve been blown away by a flurry of great new Maps API applications across the board. I’ve been especially impressed by the new uses I’ve seen of Styled Maps, Fusion Tables, and our new Places API.
InstaEarth
Instagram is an exciting photography tool, but what really takes Instagram to the next level are applications like InstaEarth from Modea. InstaEarth is an easy way to search for and discover Instragram users and photos on a map. The application makes use of the Places API with Autocomplete to help users to search around a landmark or address. From InstaEarth, “InstaEarth is a way to discover and view beautiful Instagram photography taken around the world. View your feed, friends' feeds, popular photos, or navigate the map and explore the world through the eyes of Instagrammers everywhere.”
TeleGeography - Submarine Cable Map
When you make a phone call or send an email abroad, most of the time that data travels by way of submarine cables. Submarine cables are the backbone of the global economy, so it’s fascinating to spend time exploring a map that shows where these cables are located. In addition to being a really interesting, fun, and a great looking map, this map is also technically savvy application. Each line representing a submarine cable is clickable and when selected grays out the other cables for better visibility. The map also uses Styled Maps to help the cables stand out better and Fusion Tables to help manage the data on the back-end.
DART St. Louis
There are two things I love to geek out on: maps and photography. That’s why I love this map from DART St. Louis. From their website, “In April 2011 over 250 creative St. Louisans gathered to throw darts at a huge map of the City of St. Louis. Participants then had one month to visit the area where their dart landed and make a photograph. The resulting collection of photographs shows a snapshot of St. Louis as it is today, one random block at a time.”
Berliner Morgenpost - Berlin Elections Map
Last month I wrote a post about a 5 Great Maps from Germany and this month we have yet another great map from Germany. Using Fusion Tables, Berliner Morgenpost mapped out the results of the September 2011 Berlin elections. Voting districts are colored coded by which political party received the majority of votes. Additionally, you can click on any one of the voting districts which will display an infowindow with a chart of the full voting results. This an excellent example of Google Maps API supporting the democratic process and bringing better transparency to government.
Dodge Journey Search
To promote the new Dodge Journey, Dodge is running a competition on YouTube where users can win one of three brand new Dodge Journeys. Video clues are released on YouTube to help users track down the secret location of the vehicle and if they find it, they own it. The clues are related to places in the real world, so users can rely on Google Maps and Places to help them figure out where the car is located. The Maps API serves as the hub of information for this competition and uses Styled Maps to match Dodge branding along with the Places API with Autocomplete to help users follow up on clues.
Posted by Carlos Cuesta, Geo APIs Product Marketing Manager
InstaEarth
Instagram is an exciting photography tool, but what really takes Instagram to the next level are applications like InstaEarth from Modea. InstaEarth is an easy way to search for and discover Instragram users and photos on a map. The application makes use of the Places API with Autocomplete to help users to search around a landmark or address. From InstaEarth, “InstaEarth is a way to discover and view beautiful Instagram photography taken around the world. View your feed, friends' feeds, popular photos, or navigate the map and explore the world through the eyes of Instagrammers everywhere.”
TeleGeography - Submarine Cable Map
When you make a phone call or send an email abroad, most of the time that data travels by way of submarine cables. Submarine cables are the backbone of the global economy, so it’s fascinating to spend time exploring a map that shows where these cables are located. In addition to being a really interesting, fun, and a great looking map, this map is also technically savvy application. Each line representing a submarine cable is clickable and when selected grays out the other cables for better visibility. The map also uses Styled Maps to help the cables stand out better and Fusion Tables to help manage the data on the back-end.
DART St. Louis
There are two things I love to geek out on: maps and photography. That’s why I love this map from DART St. Louis. From their website, “In April 2011 over 250 creative St. Louisans gathered to throw darts at a huge map of the City of St. Louis. Participants then had one month to visit the area where their dart landed and make a photograph. The resulting collection of photographs shows a snapshot of St. Louis as it is today, one random block at a time.”
Berliner Morgenpost - Berlin Elections Map
Last month I wrote a post about a 5 Great Maps from Germany and this month we have yet another great map from Germany. Using Fusion Tables, Berliner Morgenpost mapped out the results of the September 2011 Berlin elections. Voting districts are colored coded by which political party received the majority of votes. Additionally, you can click on any one of the voting districts which will display an infowindow with a chart of the full voting results. This an excellent example of Google Maps API supporting the democratic process and bringing better transparency to government.
Dodge Journey Search
To promote the new Dodge Journey, Dodge is running a competition on YouTube where users can win one of three brand new Dodge Journeys. Video clues are released on YouTube to help users track down the secret location of the vehicle and if they find it, they own it. The clues are related to places in the real world, so users can rely on Google Maps and Places to help them figure out where the car is located. The Maps API serves as the hub of information for this competition and uses Styled Maps to match Dodge branding along with the Places API with Autocomplete to help users follow up on clues.
Posted by Carlos Cuesta, Geo APIs Product Marketing Manager