Cat Power!

Hey Nicole,

I changed the marker and I’m happy to show you how I did this. All it took was adding 1 line of code and copy/pasting a url to an external cat image.

Feel free to look through the comments in bold in the code below.

I still haven’t disabled the scroll click, but I will when I have more time.

 

Here’s the javascript code I edited to make it happen below:

// This example puts a marker at RAWR
// When the user clicks the kitty marker, an info window opens.

function initMap() {

// var kitty is the location of RAWR in longitude and latitude

var kitty = {lat: 37.806176, lng: -122.26724};
var map = new google.maps.Map(document.getElementById(‘map’), {
zoom: 15,
// center the map at RAWR
center: kitty
});

// This code is for the info that pops up when you click the kitty
var contentString = ‘<div id=”content”>’+
‘<div id=”siteNotice”>’+
‘</div>’+
‘<h1 id=”firstHeading” class=”firstHeading”>RAWR</h1>’+
‘<div id=”bodyContent”>’+
‘<p>located at 1721 1/2 Webster St ‘+
‘<br>Oakland, CA 94612 </p>’ +
‘</div>’+
‘</div>’;

var infowindow = new google.maps.InfoWindow({
content: contentString
});

// Put a marker where the kitty is

var marker = new google.maps.Marker({
position: kitty,

// Make the marker icon a cat image. You can replace the url below with any link to a png or gif (gif  sadly doesn’t animate) for any image you want. It works best if the image is about 40 x 40 pixels wide.

icon: ‘http://www.animated-gifs.eu/category_animals/mammals-cats-15/0015.gif’,
map: map,
title: ‘RAWR’
});

// This is the thing that pops up the info marker when people click on the cat
marker.addListener(‘click’, function() {
infowindow.open(map, marker);
});
}

Leave a Comment

Let me know your thoughts on this post!