The following example adds a simple marker to a Google Map at the Van Munching Hall: map.js. function initialize() { var mapOptions = { zoom: 18, ...
GoogleMapsJavaScriptAPIv3Tutorial
ByNathanYang
CreatingaBlankGoogleMap
Yourbrowserdoesnotsupportiframes.
Addanempty
tothebodyofanHTMLpagewithanIDattribute(inthisexample,weareusingtheidmap):
map.html
YourPageTitleHere
CreateaCSSfileandaddthefollowingCSScode:
map.css
html{
height:100%
}
body{
height:100%;
margin:0;
padding:0
}
#map{
height:100%
}
IncludetheCSSfileintheHTMLpage:
map.html
YourPageTitleHere
IncludetheGoogleMapsJavaScriptfile:
map.html
YourPageTitleHere
CreateaJavaScriptfileandaddthefollowingJavaScriptcode:
map.js
functioninitialize(){
varmapOptions={
zoom:18,
center:newgoogle.maps.LatLng(38.983064,-76.9473872)//VanMunchingHall
};
varmap=newgoogle.maps.Map(document.getElementById("map"),mapOptions);
}
google.maps.event.addDomListener(window,'load',initialize);
Therearetworequiredoptionsforeverymap:centerandzoom.
ThecenterpropertyissetbyaLatLngobjectthatcontainsalatitudeandalongitudeandisusedtocenteryourmap.
Thezoompropertysetstheinitialresolutiontodisplaythemap,wherezoom:0correspondstoamapoftheEarthfullyzoomedout,andhigherzoomlevelszoominatahigherresolution.
IncludetheJavaScriptfileyoujustcreated:
map.html
YourPageTitleHere
AddingMapMarkers
Yourbrowserdoesnotsupportiframes.
ThefollowingexampleaddsasimplemarkertoaGoogleMapattheVanMunchingHall:
map.js
functioninitialize(){
varmapOptions={
zoom:18,
center:newgoogle.maps.LatLng(38.983064,-76.9473872)//VanMunchingHall
};
varmap=newgoogle.maps.Map(document.getElementById("map"),mapOptions);
//Toaddthemarkertothemap,usethe'map'property
varmarker=newgoogle.maps.Marker({
position:newgoogle.maps.LatLng(38.983064,-76.9473872),//VanMunchingHall,
map:map,
title:"VanMunchingHall"
});
}
google.maps.event.addDomListener(window,'load',initialize);
Themarker'stitleappearsasatooltipuponhover.
Let'saddasecondmarkerwithadifferenticon.Sincewearegoingtohavemultiplemarkers,itisbesttocreateanarraytoholdthemarkers.ThesecondmarkerwillbeattheSmithStore.
map.js
varmarkers=[];//Arraythatstoresmarkers
functioninitialize(){
varmapOptions={
zoom:18,
center:newgoogle.maps.LatLng(38.983064,-76.9473872)//VanMunchingHall
};
varmap=newgoogle.maps.Map(document.getElementById("map"),mapOptions);
//Toaddthemarkertothemap,usethe'map'property
markers[0]=newgoogle.maps.Marker({
position:newgoogle.maps.LatLng(38.983064,-76.9473872),//VanMunchingHall,
map:map,
title:"VanMunchingHall"
});
markers[1]=newgoogle.maps.Marker({
position:newgoogle.maps.LatLng(38.9827089,-76.9475412),//SmithStore,
map:map,
title:"TheSmithStore",
icon:"http://maps.google.com/mapfiles/ms/micons/shopping.png"
});
}
google.maps.event.addDomListener(window,'load',initialize);
Theiconpropertycontainsthemarker'simageURL.Clickhereforasetofpre-definediconsthatyoucanuseasmarkersinyourGoogleMaps.InChrome,youcanrightclickononeoftheimageicons,click"CopyImageURL,"andpastetheimageURLintotheiconproperty.
InfoWindows
Yourbrowserdoesnotsupportiframes.
Youcandisplayaninfowindowwhenausermousesoveraspecificmarker.Inthisexample,wearegoingtoaddinfowindowsontheVanMunchingHallmarkerandtheSmithStoremarker.
map.js
varmarkers=[];//Arraythatstoresmarkers
functioninitialize(){
varmapOptions={
zoom:18,
center:newgoogle.maps.LatLng(38.983064,-76.9473872)//VanMunchingHall
};
varmap=newgoogle.maps.Map(document.getElementById("map"),mapOptions);
//Toaddthemarkertothemap,usethe'map'property
markers[0]=newgoogle.maps.Marker({
position:newgoogle.maps.LatLng(38.983064,-76.9473872),//VanMunchingHall,
map:map,
title:"VanMunchingHall"
});
markers[1]=newgoogle.maps.Marker({
position:newgoogle.maps.LatLng(38.9827089,-76.9475412),//SmithStore,
map:map,
title:"TheSmithStore",
icon:"http://maps.google.com/mapfiles/ms/micons/shopping.png"
});
varvmhInfoWindow=newgoogle.maps.InfoWindow({
content:"VanMunchingHallishometotheUniversityofMaryland'sRobertH.SmithSchoolofBusiness."
});
varsmithStoreInfoWindow=newgoogle.maps.InfoWindow({
content:"TheSmithStoreisastudent-runorganizationdedicatedtoprovidingstudentswithpractical,hands-onmanagementexperiencewhointurn,helptopromotetheSmithbrand."
});
google.maps.event.addListener(markers[0],'mouseover',function(){
vmhInfoWindow.open(map,this);
});
google.maps.event.addListener(markers[0],'mouseout',function(){
vmhInfoWindow.close();
});
google.maps.event.addListener(markers[1],'mouseover',function(){
smithStoreInfoWindow.open(map,this);
});
google.maps.event.addListener(markers[1],'mouseout',function(){
smithStoreInfoWindow.close();
});
}
google.maps.event.addDomListener(window,'load',initialize);
RemovingMapMarkers
Toremoveamarkerfromthemap,callthesetMap()methodpassingnullastheargument.
map.js
marker.setMap(null);
Ifyouareusinganarraytostoreyourmapmarkers,youcaniteratethroughthemarkersarrayandcallthesetMap()`methodtoremoveallmarkersfromthemap.
map.js
for(intidx=0;idx
Google Map marker animation