learn web technologies, the easy way

Make your Google Map Marker Stand Out

Now you need to make your newly created Google Map marker stand out. The best way to do this is to create a shadow based on the original image and to include the marker with the shadow graphic in the map JavaScript code.

In this lesson, we’ll show you how to do just that. The last lesson showed you how to create your own marker using GIMP, the free graphics editing program. We will use the same graphic you just created (or another, if you wish) as the starting point for creating the shadow.

Step 1 Open Your Foreground Image

In Gimp, choose “File->open” then navigate to the folder where the graphic is stored, click on its name and click ‘Open”. Just for safety’s sake, click “File->Save as…” and give it a name like “pencil_shadow.png” and click “Save’. This means that whatever we do to this from now on, you won’t be putting your original artwork in danger.

Step 2 Change the Image Size

Now that you have the graphic on the screen, you need to change the width of the image to match the height. If the image is 30 pixels tall, then make it 30 pixels wide (and so on). To change the width, click "Image->Canvas size", and you'll see:

Look toward the top of the dialog where it's labeled "Canvas Size" . To the right of the "Width:" and "Height:" values, you see a "chain" image. Click on that. This allows you to change the height and width values independently.

Enter "30" as the image's width (set to the same value as the height). Click the "Resize" button at the bottom of the dialog.