Google maps design

With the background of a map on a html page, you can play around with the icons, replacing the standard ones with your own...

So you can use the standard icons of Google Maps, but also mix or add your own icons.
These icons must not be too big, but can be transparent (.png).

You can do a shadow in Photoshop, (png format).

With the positioning, the difference of icons and their transparency you can start designing.

This script contains the elements, and with replacing the path's to the images you can start creating and designing your own page. It is just learning how to hack what is already made.

Ingredients:

• the GPS position, eg: new google.maps.LatLng(51.937740, 4.472122),
• the png image, eg: palm.png
• the path to the image on your server eg:
  

var imagePalm = 'http://www.contrechoc.com/layar/palm.png';

• making the marker with your special icon in it:

var marker = new google.maps.Marker({
position: new google.maps.LatLng(51.937740, 4.472122),
map: map,
title: 'my paradise, a palm in rainy Holland',
clickable: false,
icon: 'http://www.contrechoc.com/layar/palm.png'
});

• and adding the marker: markersArray.push(marker);

So the total JAVASCRIPT section:




< type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
< /script>

< type="text/javascript">

//globals
var map;
var markersArray = [];

function initialize()

//center of the map

var latlng = new google.maps.LatLng(51.937740, 4.472122);

// map options

var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

//dont forget the comma's after the parameters but the last

var marker = new google.maps.Marker({
position: new google.maps.LatLng(51.937740, 4.472122),
map: map,
title: 'My workplace',
clickable: false,
icon: 'http://www.contrechoc.com/layar/icon5.png'
});

//dont forget the comma's after the parameters but the last, i repeat :-)

addMarker(latlng, 'http://www.contrechoc.com/layar/icon5.png' ); //add marker with function

//you can or should do all by hand, but
//to go faster, programming a position and positions beside this center:

//you need path's to images:

var imageM = 'http://www.contrechoc.com/layar/icon5.png';
var imageM2 = 'http://www.contrechoc.com/layar/icon5a.png';
var imageG = 'http://www.contrechoc.com/layar/dot.png';

//and here we do a programming trick to get pentagonic arrangements, two nested for loops

for( var ii=0 ; ii < i="0" latlng6 =" bearing("> 3 )
addMarker(latlng6, imageG);
if ( ii <> 0 ) addMarker(latlng6, imageM2);
if ( ii ==0 ) addMarker(latlng6, imageM);
}
}
}
//we have used this function to add markers with our own image

function addMarker(location, imageM) {
marker = new google.maps.Marker({
position: location,
map: map,
icon: imageM
});
markersArray.push(marker);
}

//we need this function fr the bearings, it is all about calculating....

function bearing( latlngStart, dP, brngP ){

var R = 6371;
var lat1 = latlngStart.lat()/180*3.1415;
var lon1 = latlngStart.lng()/180*3.1415;
var d = dP;
var brng = brngP/180*3.1415;

var lat2 = Math.asin( Math.sin(lat1)*Math.cos(d/R) + Math.cos(lat1)*Math.sin(d/R)*Math.cos(brng) );
var lon2 = lon1 + Math.atan2(Math.sin(brng)*Math.sin(d/R)*Math.cos(lat1), Math.cos(d/R)-Math.sin(lat1)*Math.sin(lat2));

lat2 = (lat2* 180/3.1415 + 360 ) % 360;
lon2 = (lon2* 180/3.1415 + 360 ) % 360;

//document.write("d " + d +"lat " + lat2 + " " + lat1* 180/3.1415 + "<>");
//document.write("d " + d +"lng " + lon2+ " " + lon1* 180/3.1415+ "<>");

var newPoint = new google.maps.LatLng( lat2 ,lon2);
return newPoint;

}

//and we can finish the java script part
< /script>




as a desert: try out what happens when you zoom, very funny effect!

for the total source file, open VIEW SOURCE in your browser on page www.contrechoc.com/crosslab/googleMapsExample.html

found this page http://www.powerhut.co.uk/googlemaps/custom_markers.php , for making custom marker's.
this is a page with free official icons: http://code.google.com/p/google-maps-icons/