Google Maps Platform: A Deep Dive on Building for Performance and Scale (Google I/O'19)

I'd, like to welcome. You all to, this Google Maps platform, talk there, we're, gonna take a deep dive into building, for performance, and scale so. I'm Travis, MacPhail I'm one of the engineering, leads for. The Maps platform. Just. Give you a little context about Who I am since. I've been at Google I've, worked on a number of different products that you are probably familiar with from. Maps to earth to Street View but. Even before then I worked, in various, industries from the special effects industry. I worked in gaming, biomechanical. Seismic. Data analysis, and oil and gas and more so. Is short I'm a graphics geek, but. More. Important. Than that I have a passion, to help people fulfill. Their purpose and the context of today that is to help each and every one of you, incorporating. Maps into your products so, your users can have the best experience possible, now. Before. I get into the meat of the talk I do want to do, a little slight recap, and go over the last 12 months. So. Last. Year we, at, Iowa. We announced the Google Maps platform, and we. We. Committed, to evolving. Our Maps API, into. A more. Simplified more, scalable. Easy-to-use. Set of tools that meet your needs now. It's been a very busy year and. We. Know that a couple, of these. Changes weren't easy to adapt to some. Of you have to adapt to new prices, others. Had to make changes to your your, code bases based on changes, that we made to our API is in SDKs, but. I want to reassure you that we've been hard at work for you to improve. The developer. Environment. For, you and it. Just won't give you a little, taste on what's happening, underneath the hood so. For, the past year we've really focused on the. Stability, the, reliability, and the performance, of our platform, so, that we can guarantee our. 99.9%. Uptime. For, our SLA this helps. Us continue. To provide over. A hundred and fifty million places for. You and your use, it, continues. To allow us to have, routes that cover more than 40 million miles on, earth and it, allows us to serve you maps that cover 99%, of the world. Some. Changes, that you. Might have felt more. Directly we, now offer, support. Available, to everyone, not, just a subset of developers, we've. Up we've, upgraded our places SDK, on Android and iOS and. We continue, to invest in some of our industry solutions, in particular we, have. Some meaningful partnerships, that we've established in the gaming community in the rideshare community, and great things are being. Worked on as we speak, but. I, -. What we'll be covering in this top so. We're, going to go through a number of things I'll, try not to go through it fast so, please, forgive me if I'm a little speedy on this but, first we're gonna dive into performance, then.

After We go into performance we're going to talk a little bit about data. Visualization and WebGL and then, we'll end. It off talking, about building. Faster on the android platform. So. Performance. At scale this. Section, of the talk Justin for everyone in the room I'm going, to focus on the web and mobile world platforms, the reason for this is because, the majority of feedback, that, we've received from. Developers. Who've experienced. Performance, issues when rendering a lot of data on top of our maps they, come from the. Web community so mobile and web developers, and note. That the things that I'm going to suggest on stage can. Be applicable whether, or not you are a mobile web developer or just, how well develop, developer. Or both. So. One of the main. Abstractions. That developers, used to render a lot of content on the map are custom, overlays, so. I don't know if you familiar, with custom overlays some in the room might not some on livestream or YouTube may not be the, custom overlays are merely a layer, of geospatial data that, you render on top of the map so. Imagine. Yourself being, the owner of a real estate site you, could render. All the listings and the property bounds, using, the custom overlay, so. What, does that look like well. First, off your custom overlay needs to Lisa. Extend our overlay view you. Have a constructor, it may or may not take a map more than likely you will though there. Are a couple of life cycle methods that, you need to implement so. There's, an honor method, that you implement when the map is actually ready to, use your. Custom overlay and when. The map. Decides. To remove the overlay there's our remove method to. Help you clean up the state that you've accumulated during. The during, the time it's been in session. But. The interesting method here, is a draw method and the reason why this is interesting is because this. Method is called, every, single time that we draw, the map so. Developers. Should take great. Care in determining, how. Much work and what type of work you do within this method. So. We're. Going to talk a little bit give you a few suggestions on just. Consultation. That we've provided to developers, over. The years to, allow. You to avoid some of the pitfalls we've seen from previous developers, so. The. First item up here do. Not add or remove content. Until. The, user stops moving the map just to kind, of reiterate this a bit, the. The, map experience, we redraw that every time the. User moves the map so for users dragging, we are constantly trying to redraw that scene and if, your custom overlays are, taking. A while to actually complete. That could, introduce, some, stuttering or a little. Bit of lag. Or jank into the overall map experience. So. If. You look at this example here we are. This. Is an example of us adding content, and removing content on the draw method regardless. Of whether or not the map is moving, or a stop moving as you, can see as you, move over, as the user pans the map the right side of the map takes. A while to load it feels a little janky and the reason that happened, is because we, are adding and moving. While we're actually drawing the map. In. Contrast. Here's. An example where we only add or remove content, when the map is stabilized you, can see as we pan the map renders, more smoothly and, when, the map. Becomes stationary, new. Content, is. Shown, displayed, on top this. Leaves for a better user experience, for your end users. But. This this. Type of problem points to a larger, issue and, the. Main takeaway here is do. Not perform, heavyweight, non. Drawing, logic in your draw method just period so.

When, Your users. Where. Your users are looking. At the map they think of the entire map experience, and if. We want to provide a very, performant. Solution. We, only have a certain amount of time to render each and every frame to guarantee the frame rate that we want to show so. In this is in this graph. Here this middle line represents, 16. Milliseconds, in 16, to 230 milliseconds, which equates, to 60 frames per second, the. Rightmost line, equates. To 33. In the third milliseconds, which. Equates to 30. Frames per second, and if. We take longer than this to render a frame we're, probably going to introduce, some jank to the to, the user and they'll notice and they'll, frown and, they'll cry I'm sorry. So. In, general, we. Do a fairly decent job for. Our users, this is just the base map itself on, air on average, strike, that our median. Draw. Time for render of your frame is the twenty sixteen to eighteen milliseconds. Some. Jesus, for, various reasons. Experienced. Worse performance than that so it might take a little longer to draw a frame it could be due to hardware browser, version, a number of items. That come in that factor in here. Some. Users. Have, a much better experience than our median results. But. Regardless of whether or not you. Have a user that has a great, base, map experience or one that. Doesn't. Have the optimal, base map experience we should provide. Them with a overall smooth and interactive, map, and it's. Not just us this provides that to them but it's also, you. All in the custom overlays that you that. You add onto the map. So. In. Your draw method if that takes one. To two milliseconds. You're, pretty much guaranteed to have a very. Performant, experience, regardless of whether, or not your user is on a high-end, device or, if they have the less, the. Less optimal, Maps base. Map experience they, still have a fairly, decent overall. Experience. However. If you. Are query. A for a lot of content, making a lot of changes to the data that you're showing within the draw method if you're also possibly, manipulating.

A Lot of Dom elements during. This draw call you could, introduce. A lot of a. Lot, of time. In. Your draw method and although. You may have some users that are on a very high-end device that, you might have a performing. Experience on that will inevitably, be. Users, that don't, have that. Same experience and experience, jank so, please. Like, help us together we can provide, a more useful experience. For your end users. But. Because. We've, talked. To people talk, to developers and, got a general, assist on how people use custom overlays we. Start to find that, our. Markers, API, could. Solve. A lot of the use cases that we saw, and. This, also has an added benefit that, you. As a developer don't, have to worry about making a performant implementation, on rendering a lot of content, on the map that could be that. Responsibility, can be placed on us and free, you up to do other things but. A lot of developers, are aware. Of. Different. Market, performance characteristics, so, we're, going to walk through an example where. I add a thousand, markers on the map and I can show you how. Small. Changes can lead to some large performance, implications. So. Let's start with a little bit of code. This, is just a method that, takes the lat/long bounds. In the number of points and creates, that many number, of random. Let long locations, within that lat/long bounds, I. Used. This to make it a thousand, points. And. It's demo about the show I initialize, the map I created. Marker. With. For all thousands of those locations and, I use the SVG, asset. For the icon because everyone, loves SPG's. And. I also add, mouse, over and mouse out listeners. Just to toggle the icon as. They use their pans over the map. So. Here's. An example here's. That example these, markers over Australia, and then, I will note that I'm actually trying. To zoom into the map and there's, just a large. Lag, in, the, experience.

So. I'm. Panning around just, showing that there's actually a couple of seconds delay between. My. User action, and, the. Drawing of the other. Results on the map. Alright. Just, kind of making me crazy a little bit. So. You're. Probably saying what gives Travis, you, told me that you're gonna show me an example where. You render a thousand, markers on the map and it's, a great experience it. Doesn't seem like you added, a lot of code what gives, so. There's, one line in this that I want y'all to look at it's this lovely SVG, asset I'm just gonna make one change we're. Going to change this to a PNG. And. We're going to rerun, this. Demo so. Now, if. You, run this demo you, have a much more performant. Map. It, follows by user gestures pretty, well and. The. Performance characteristics of this Nippo completely changes and the. Reason, behind this is. For. Right now please. Use JPEG or PNG assets, if. You are using SVG's. Try. To rasterize them first it's, just more effective and more efficient in general to, render a raster. Image. For the user I'm sorry use a raster image for the icon as opposed to a. SVG. Representation. But. As you decide while I'm talking about raster, and vector when. I took this. Job. One. Of the product, managers in. The organization told me that there. Are some developers, that innately feel, that. Because we offer a raster. Base Maps, experience. Through. Our API is that. Somehow that means that is inherently, less performant, than if we went with a better graphics solution, maybe like a WebGL offering, so. I want to put a little data to that. So. If you look at. One. Of our raster based products, that we offer which, is a progressive. Web app version. Of maps is a raster, based experience, that. We read. The Google Maps platform power, and the. Median, fps. Across. Live traffic that we've analyzed. For a while through, various actions, is around 55. Milliseconds. Contrast. That if you go to BAPS I will calm, on a device that supports WebGL you, get a complete, WebGL. Powered. Experience, but, the meeting of frame rate for that experience is around 51 frames per second so. This. Is not to. Champion. Or knock either. Platform, we provide both options. Within, Google but. We save the WebGL for the the. Consumer experience but. This just serves their brother we serve, you a raster based implementation or. A vector. Based implementation you. Will have a performant. Base map to build your web applications, around. So. Back. To our example. If you, look at this. Map I don't, know about you but. If you want to if. You want your users to interact with the individual, contents, that you add on top of the map it's, hard for me to. Decipher. Any meaning, on. The content that we're adding because there's a thousand markers on Australia. I can't even see most the majority of Australia, so.

One. Last, note. Don't. Forget to cluster. We. Have a. Marker. Clusterer support. Library that we offer and in. My demo, example, here I use. That in order to to. Cluster content on the map again so. There. Are a couple of options that you can use there's, a grid option size which controls, the, amount of, markers that we touch them together into, one group there's, a maximum zoom which, controls, the maximum zoom level after which you shouldn't see clusters and then, you can provide an image path that has the. Base URL, for. The cluster icon. Assets, note, those should probably be P and G's and JPEGs as well with. That you can just instantiate a marker clusterer, giving, the map the markers and these options and. You get an example just like this, so. Already, I'm. Able to see. Where. A lot of the action is in Australia and if I want I can choose. The tunnel down in different spaces but. In this demo I'm just, moving, the map around violently, just to show that the, map is interactive. Even. With this additional clustering logic on top. So. If you want to know more about map clusters, you can go to this short link there's, one thing that you should note we. Have changed these short links we now have the, e after, the GU GL. So, now it's the full kind of guvo with a dot in the middle so. Take, that as a note. And. Just. To recap we've. Talked about custom. Overlays we, want to add or remove content, when the map isn't moving, you. Don't want to have heavyweight operations. In your draw methods, for. Markers, you want to consider using marker. Is instead. Of custom overlays if possible, use. JPEG, and PNG assets. As opposed to SVG's and, don't, forget to cluster, but. We've. Kind of talked about what you can do now but I'm sure there's a few, of you there wondering, what's. Next. Especially. If you are a. Developer that has a lot of data that you want to show you're, probably saying Travis is very nice and fun. That you showed an example where you are, rendering a thousand, markers on the map but. I have to be honest with you I have hundreds, of thousands, of data that, I wanted to see on the map I might have millions of things I want to show on the map what. Do you have for me. So. I like to announce that we officially. Have, a partnership with the great folk over a DEXA for. Those that do not know what Dec GL is it is, an open-source data, visualization, library, it. Uses WebGL on. The, client-side to render huge, amounts of data sets on overlaid, on top of a base map that, base map to be your google map. So. Deck GL has a number, of layer, examples. That. You can read, up more on but, this example here, is an arc layer where, there are arcs connecting, a, start, point and the end point and the arc is the 3d arc tax that goes into the screen so. In this example this. Is a an. Arc. Layer over. Around 16,000. New. York City cab pickups, I'll. Just zoom in just so you can see that there are a bunch of lines. In. This, example. You. Probably would. Have a better visualization experience. If we offer tilt sad to say Google, Maps does not Google Maps on the JavaScript platform, does not support tilt at. Least, not yet, I. Also. Seem. To I like flights so I have another flight example, this, is an example of animating. The flight paths around, London. So, the starts to show you a little bit of the power that you have when you pair deck GL with, the Google Maps. Whether or not you want a static, dynamic. Visualization. Experience, or you want more of a dynamic animated. Data visualization, experience, this. Deck gel the Google Maps partnership, is, a. Stepping-stone toy to get you where you want to be. So. How. Does this look in code. This. Is very similar to a standard example. Of just incorporating, a map you, have a div for your map I'm, including, the latest Dec GL. JavaScript. Binary. You. Also have a canvas for the deck the, deck GL experience, they'll be overlaid on top of the map I. Have. Some constants, here that. Just define different camera properties, in. This, example the pitch is set to zero that's. Because Google Maps is not supported yet once, again he's, not yet. One. Of the challenges. That deck GL and Google Maps have to overcome and making. Making, this partnership work is reconciling. Between do two different camera models now. We will continue to work on this as. Time progresses but, the, for, the short term I need. To apply a summa, offset, for, the Google map camera and that's, actually just one. On. This example I'm also supplying, just, a sample, type of URL just of geo JSON data I'll talk about what Gio JSON is a bit later, and. From. That you can initialize, the map very, similar to what you already do you apply the the.

Camera Zoom offset, for, your Google map. You. Create a new. Deck. GL experience, with. The deck canvas you pass in that same view state - the camera zoom offset in this, example I'm disabling. Rotation. That. GL, offers. Big. 0 supports, camera. Rotation Google, Maps does. Not at, least not yet and. There's. A callback. For, when the, deck GL view state changes, and essentially, it just tells the map to follow suit. In. Addition, to this you can. Supply a number, of decks layers, to, overlay on the canvas and this one is a Geo JSON layer and for those that are familiar with geo JSON it is a geospatial, data. Format, akin. To KML for. Those in the GIS community, they know of KML, you. Can incorporate. Points. And lines and, political, political, geometry. To. Rigor on top of the map, so with this geo JSON layer and Dec GL you. Can supply, the URL, to where every, G of JSON file is and there are various parameters, that you can use. To customize experience. But, I'll. Show you doctor. To tell you I'll show you a link to documentation, where you can dive deeper into that but, right. Now I want to switch to a live demo, so. In, this demo this, is showing. Earthquake. Data in the West Coast and you're probably saying, Travis. Is not a lot of earthquakes but. As you zoom. Out you. Start to see that. We. Have. Tens. Of thousands. Of. Sorry. I actually clicked on one there all of the, Hurricanes. Here but we have tens of thousands of points and this, is actually being rendered, interactively. On client-side, using WebGL. This, demo I just want to give a shout out to the great people over a movie labs they are the ones that are created, this demo so thank you to them, and with, that I'll just go back and transition, back to the slides so. Here, is a short link, that. Can give, you insight on how to incorporate. Deck GL and Google Maps into, your web applications. Remember. We added se to this link. But. This. This. Partnership. Was the beginning, of. Bringing. WebGL, to, the. Google. Maps API. But. In, all honesty, we really need your help here because we want to continue our investment, in WebGL, we want to offer more to you as developers so. We, want to call for your idea, I really, want to know. How. How. You feel WebGL, can enable new types of features that, your users can benefit from. So. Whether, or not you're like looking at maps.google.com and. You zoomed out and you see the spherical. Globe or if you're looking at the 3d imagery within maps like google calm or if, you're using, maps. Zooming. In going, into 3d, imagery and then transitioning, in the Street View you. Just really want you to think, outside the box think, I saw the confines, that, we've. We've had up to this point and, really think. About ways to. Think. About ways that WebGL, can empower your users so. I'm. Gonna pause a little bit on this slide because this is the action item that I really want the developers in this room and those on live streaming YouTube to take I really, want you to go to this website this. Would be live for about a month this. Will link you to a forum where you can, start. To tell us some. Of the ideas you have on how we can actually better use WebGL and are in our API offerings, to you and, what types, of things are classes or features you would use them for so, please please. Join, join. Us and go on this link and provide us a little insight on how, you think we should bring WebGL, to the future. So. We talked about the, web for a while I, want, to transition over to Android. For a sec. Congratulations. You, as of, right, now are my. Beta testers, for the new Android, Maps SDK. Yay. Congratulations thank. You very much. But. This, SDK it's. A little different from how, we've historically. Delivered. As the case to you so. There is an action item here we are moving our, SDK out of Google, mobile services and this, would be a library, that you need to statically compiled into your apps so, there is an action associated with, adopting.

And Trying out this beta but. We've done it for a few reasons, so. Little-known, fact the. Google Maps mobile app and the. Android, Maps SDK that we offer in our platform before, now have. Been built on completely, different Maps tax and this. New SDK. We're actually rectifying, that so, now. The. Android Maps SDK and, the Google, Maps mobile app are both. Built on the same map stack so, this gives us our path for. Delivering, more of the goodness out of the Google Maps mobile app and offering that to you as developers. I've. Mentioned this when I said we were moving our SDK out of Google, mobile services but, the reasoning. Behind that is to allow us to have more frequent, virtual. Releases to you so, our future releases what we invest, in add new features it will be outside. Of Google mobile services and be, a static SDK that you need to compel. Into your app but, benefit, to you in this process outside, of us having, more frequent releases to you is, that now you can test out the. Latest version of the Android, Maps SDK, with. Out. Without. Pushing it out to your your. Full end user base. We. Also to think. A little bit about your users on this so, we want to save the money when the now on Wi-Fi, so. The map data that's used to render the mess. With this SDK uses. Up to sixty percent less data. And. Because. We went through the process of refactoring, a lot of our SDK so that we. Were built on the same stack that the Google. Maps mobile app is built on and that, process would close, 65. External, issues you can look at the issue tracker and see, which one of those wishes. Shoes were. Handled. So. I'm Paul's again this, is a here's. A link to a migration guide we. Need your help we need your help here I'll repeat we need your help here. We want you to go to this site read, up on the migration docs and actually. Test out this SDK within your products if you. See bugs let, us know so we can fix them quickly but. Please once again go. To this migration guide read. Up on how. To incorporate. The new Maps SDK into, your your naps and let. Us know how it goes. So. We've. Circled, through a number of different things but I want. To talk about the future so. We focused, on in. The past we focus on building and will continue to grow various, industries, from. The. Ride sharing industry. To. Travel. To. Real estate it more, but. Now. We need to focus on the industries that you want to build so, let's build those industries together and you, can start this week by, meeting this, you. Can start this week by, meeting this for office. Hours tomorrow at, 11:30, a.m. and, on, Thursday, at 12:30, p.m. and, you, can also catch us at the sandbox with our cloud, partners, in the cloud dome. So. With that I'd like to thank you for your time for those in the audience thank you for your time those in livestream and those watching on YouTube I appreciate every moment of it take care. You.

2019-05-09 23:47

Other news