throbber
2/17/22, 11:01 PM
`
`Customizing a Google Map: Custom Markers | Maps JavaScript API | Google Developers
`
`Customizing a Google Map: Custom
`Markers
`
`Select platform:
`
` Android (/maps/documentation/android-sdk/marker)
`
`iOS (/maps/documentation/ios-sdk/marker)
`
`JavaScript (/maps/documentation/javascript/custom-markers)
`
`Overview
`
`This tutorial teaches you how to change the icon (#icon) of a Google maps marker. It is
`benecial to know the basics of creating markers (/maps/documentation/javascript/markers) when
`using this tutorial.
`
`Note: You can use standard and custom marker icons from the Google Earth/Maps Icons collection
` (http://kml4earth.appspot.com/icons.html).
`
`The following map is an example of a map that uses customized markers.
`
`https://developers.google.com/maps/documentation/javascript/custom-markers#try-sample
`
`1/6
`
`MemoryWeb Ex. 2016
`Apple v. MemoryWeb – IPR2022-00032
`
`

`

`2/17/22, 11:01 PM
`
`Customizing a Google Map: Custom Markers | Maps JavaScript API | Google Developers
`
`The section below lists all of the code that you need to create the map in this tutorial.
`
`Map data ©2022
`
`JavaScript (#javascript)CSS (#css)HTML (#html)
`TypeScript
` (#typescript)
`
`https://developers.google.com/maps/documentation/javascript/custom-markers#try-sample
`
`2/6
`
`MemoryWeb Ex. 2016
`Apple v. MemoryWeb – IPR2022-00032
`
`let map: google.maps.Map;
`function initMap(): void {
`  map = new google.maps.Map(document.getElementById("map") as HTMLElement,
`    center: new google.maps.LatLng(-33.91722, 151.23064),
`    zoom: 16,
`});
`const iconBase =
`"https://developers.google.com/maps/documentation/javascript/examples/f
`const icons: Record<string, { icon: string }> = {
`    parking: {
`      icon: iconBase + "parking_lot_maps.png",
`},
`    library: {
`      icon: iconBase + "library_maps.png",
`},
`    info: {
`

`

`2/17/22, 11:01 PM
`
`Customizing a Google Map: Custom Markers | Maps JavaScript API | Google Developers
`
`https://developers.google.com/maps/documentation/javascript/custom-markers#try-sample
`
`3/6
`
`MemoryWeb Ex. 2016
`Apple v. MemoryWeb – IPR2022-00032
`
`      icon: iconBase + "info-i_maps.png",
`},
`};
`const features = [
`{
`      position: new google.maps.LatLng(-33.91721, 151.2263),
`      type: "info",
`},
`{
`      position: new google.maps.LatLng(-33.91539, 151.2282),
`      type: "info",
`},
`{
`      position: new google.maps.LatLng(-33.91747, 151.22912),
`      type: "info",
`},
`{
`      position: new google.maps.LatLng(-33.9191, 151.22907),
`      type: "info",
`},
`{
`      position: new google.maps.LatLng(-33.91725, 151.23011),
`      type: "info",
`},
`{
`      position: new google.maps.LatLng(-33.91872, 151.23089),
`      type: "info",
`},
`{
`      position: new google.maps.LatLng(-33.91784, 151.23094),
`      type: "info",
`},
`{
`      position: new google.maps.LatLng(-33.91682, 151.23149),
`      type: "info",
`},
`{
`      position: new google.maps.LatLng(-33.9179, 151.23463),
`      type: "info",
`},
`{
`      position: new google.maps.LatLng(-33.91666, 151.23468),
`      type: "info",
`},
`

`

`2/17/22, 11:01 PM
`
`Customizing a Google Map: Custom Markers | Maps JavaScript API | Google Developers
`
`https://developers.google.com/maps/documentation/javascript/custom-markers#try-sample
`
`4/6
`
`MemoryWeb Ex. 2016
`Apple v. MemoryWeb – IPR2022-00032
`
`{
`      position: new google.maps.LatLng(-33.916988, 151.23364),
`      type: "info",
`},
`{
`      position: new google.maps.LatLng(-33.91662347903106, 151.228794640197
`      type: "parking",
`},
`{
`      position: new google.maps.LatLng(-33.916365282092855, 151.22937399734
`      type: "parking",
`},
`{
`      position: new google.maps.LatLng(-33.91665018901448, 151.228247469558
`      type: "parking",
`},
`{
`      position: new google.maps.LatLng(-33.919543720969806, 151.23112279762
`      type: "parking",
`},
`{
`      position: new google.maps.LatLng(-33.91608037421864, 151.232882326736
`      type: "parking",
`},
`{
`      position: new google.maps.LatLng(-33.91851096391805, 151.234405821456
`      type: "parking",
`},
`{
`      position: new google.maps.LatLng(-33.91818154739766, 151.234620398178
`      type: "parking",
`},
`{
`      position: new google.maps.LatLng(-33.91727341958453, 151.233483141555
`      type: "library",
`},
`];
`// Create markers.
`for (let i = 0; i < features.length; i++) {
`const marker = new google.maps.Marker({
`      position: features[i].position,
`      icon: icons[features[i].type].icon,
`      map: map,
`});
`

`

`2/17/22, 11:01 PM
`
`Customizing a Google Map: Custom Markers | Maps JavaScript API | Google Developers
`
`}933c4b043d4fbabcedf916b9046037e652c06b9c/samples/custom-markers/src/index.ts#L18-L128)
`
` Note: Read the guide (/maps/documentation/javascript/using-typescript) on using TypeScript and
`Google Maps.
`
`Try Sample
`
`JSFiddle (#) CodeSandbox.io (https://codesandbox.io/embed/github/googlemaps/js-samples/tree/samp
`
`Customizing a map marker
`
`The image below displays a Google maps marker with the default red icon.
`
`You can change this icon to an image of your choice. The table below explains the code that
`customizes the default marker to use an icon for parking lots.
`
`Code and description
`
` property to the
`Adds the
`to change the marker’s icon.
`The
` property can be either a string (the URL to
`the marker icon), or an
` object.
`See the customized marker icon below.
`
` object,
`
`https://developers.google.com/maps/documentation/javascript/custom-markers#try-sample
`
`5/6
`
`MemoryWeb Ex. 2016
`Apple v. MemoryWeb – IPR2022-00032
`
`icon
`MarkerOptions
`icon
`Icon
`}
`var iconBase = 'https://maps.google.com
`';
`var marker = new google.maps.Marker(
`{
`    position: myLatLng,
`    map: map,
`    icon: iconBase + 'parking_lot_maps.
`png'
`});
`

`

`2/17/22, 11:01 PM
`
`Customizing a Google Map: Custom Markers | Maps JavaScript API | Google Developers
`
`Customizing markers by map features
`
` attribute. Notice how the code
`Each point of interest in the list of campus features has a
`extract below species the
`,
` and
` types. You can customize the marker
`icon depending on the map feature
` you set it to.
`
`More information
`
`The image on a marker is called its 'icon'.
`
`A marker is also known as a 'pin'.
`
`Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License
` (https://creativecommons.org/licenses/by/4.0/), and code samples are licensed under the Apache 2.0 License
` (https://www.apache.org/licenses/LICENSE-2.0). For details, see the Google Developers Site Policies
` (https://developers.google.com/site-policies). Java is a registered trademark of Oracle and/or its aliates.
`
`Last updated 2022-02-17 UTC.
`
`https://developers.google.com/maps/documentation/javascript/custom-markers#try-sample
`
`6/6
`
`MemoryWeb Ex. 2016
`Apple v. MemoryWeb – IPR2022-00032
`
`type
`parking
`library
`info
`type
`var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
`var icons = {
`  parking: {
`    icon: iconBase + 'parking_lot_maps.png'
`},
`  library: {
`    icon: iconBase + 'library_maps.png'
`},
`  info: {
`    icon: iconBase + 'info-i_maps.png'
`}
`};
`function addMarker(feature) {
`var marker = new google.maps.Marker({
`    position: feature.position,
`    icon: icons[feature.type].icon,
`    map: map
`});
`}
`

This document is available on Docket Alarm but you must sign up to view it.


Or .

Accessing this document will incur an additional charge of $.

After purchase, you can access this document again without charge.

Accept $ Charge
throbber

Still Working On It

This document is taking longer than usual to download. This can happen if we need to contact the court directly to obtain the document and their servers are running slowly.

Give it another minute or two to complete, and then try the refresh button.

throbber

A few More Minutes ... Still Working

It can take up to 5 minutes for us to download a document if the court servers are running slowly.

Thank you for your continued patience.

This document could not be displayed.

We could not find this document within its docket. Please go back to the docket page and check the link. If that does not work, go back to the docket and refresh it to pull the newest information.

Your account does not support viewing this document.

You need a Paid Account to view this document. Click here to change your account type.

Your account does not support viewing this document.

Set your membership status to view this document.

With a Docket Alarm membership, you'll get a whole lot more, including:

  • Up-to-date information for this case.
  • Email alerts whenever there is an update.
  • Full text search for other cases.
  • Get email alerts whenever a new case matches your search.

Become a Member

One Moment Please

The filing “” is large (MB) and is being downloaded.

Please refresh this page in a few minutes to see if the filing has been downloaded. The filing will also be emailed to you when the download completes.

Your document is on its way!

If you do not receive the document in five minutes, contact support at support@docketalarm.com.

Sealed Document

We are unable to display this document, it may be under a court ordered seal.

If you have proper credentials to access the file, you may proceed directly to the court's system using your government issued username and password.


Access Government Site

We are redirecting you
to a mobile optimized page.





Document Unreadable or Corrupt

Refresh this Document
Go to the Docket

We are unable to display this document.

Refresh this Document
Go to the Docket