Show Map
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Google Map API Demo</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
height: 100%;
padding: 0;
}
html {
height: 100%;
}
a, a:link, a:visited, a:hover, a:active {
text-decoration: underline;
cursor: pointer;
color: #000;
}
a:hover {
text-decoration: none;
cursor: pointer;
color: #555;
}
.Shadow {
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBs55G3yMieFPKlyyQS8OxzYc0WAzg_76Y&sensor=false"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var GoogleMap = null,
GoogleInfoBubble = null,
GoogleMarkers = new Array;
/*
* This function should always be called when you want to do anything with the google map.
*
* If there isn't an active Map it will open a new one and then wait for it to finish loading.
* Then it will load up the custom menus, setup you pin info bubble var space and then run
* the callback function if you provided it.
*
* If a map is already open, it will just run your callback function.
*
*/
function OpenGoogleMap(RunOnComplete){
// First we need to check if there is already a map setup.
if(GoogleMap == null) {
// If there isn't we will open one up.
var mapOptions = {
mapTypeControl: false, // Remove the "Map | Satellite" buttons
center: new google.maps.LatLng('44.208788', '-73.079395'), // Center on Vermont
zoom: 8, // Set the proper zoom
mapTypeId: google.maps.MapTypeId.ROADMAP // Show the road map by default
};
// Creating the new map and placing it in the <div> with an id of: google_map_canvas
GoogleMap = new google.maps.Map(document.getElementById("google_map_canvas"), mapOptions);
// Preparing the Info Bubble for later use.
GoogleInfoBubble = new google.maps.InfoWindow();
GoogleInfoBubble.Open = false;
// Now we use Googles function to wait until the map is fully loaded.
google.maps.event.addListenerOnce(GoogleMap, 'idle', function(){
// Now that the map is fully loaded, we will add a couple of our custom UI items.
AddMapUI({DivID: 'GoogleMapsMenu', Title: 'Map Tools', Where: 'TopRight', OutsidePadding: '6px 6px'});
AddMapUI({DivID: 'GoogleMapPinCounts', Title: 'Pin Counts', OutsidePadding: '6px 6px'});
AddMapUI({DivID: 'GooglePlotAddress', Title: 'Plot Address', Where: 'BottomCenter', OutsidePadding: '6px 6px'});
// This is another google provided Listener function. This setups an onclick event for the map.
google.maps.event.addListener(GoogleMap, 'click', function(event) {
if(GoogleInfoBubble.Open){
// If the info bubble is open we will close it.
GoogleInfoBubble.close();
GoogleInfoBubble.Open = false;
} else {
// Else we will drop a pin where you clicked.
AddPin(event.latLng, 'CustomMarker')
}
}); // end of onclick listener
// Now if there was a function provided we will run it.
if(typeof(RunOnComplete) == "function") {
RunOnComplete();
}
});// End of function that waits until the map is loaded
} else if(typeof(RunOnComplete) == "function") {
// If there was already a map open we can just run the callback function.
RunOnComplete();
}
} // End of OpenGoogleMap function
/*
* This function will either add a single button with the nice
* Google drop shadow, or load up an entire copy of a <div> into the
* Google UI. If you choose to load an entire <div> this function
* will replace any %ID% with the word "GoogleMap", this is done
* to prevent ID tag collision and keep the ID tags unique.
*
*/
function AddMapUI(Options, OnClick) {
if(typeof(OnClick) != "function") OnClick = null; // Making sure OnClick is a function.
var MapUI = document.createElement('div');
MapUI.style.padding = (Options.OutsidePadding ? Options.OutsidePadding : '6px 0px'); // Defaults to 6px top & bottom, 0px left & right
// Adding the Google Shadow to our UI elements.
var controlUI = document.createElement('div');
controlUI.className = 'Shadow'; // Included in style sheet.
controlUI.style.background = '#FFF';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '1px';
controlUI.style.borderColor = 'rgb(113, 123, 135)';
if(OnClick != null) controlUI.style.cursor = 'pointer';
if(Options.Center != null) controlUI.style.textAlign = 'center';
if(Options.Title != null) controlUI.title = Options.Title;
MapUI.appendChild(controlUI);
// Set CSS for the control interior.
var controlText = document.createElement('div');
controlText.style.padding = (Options.InsidePadding ? Options.InsidePadding : '3px 4px'); // Defaults to 3px top & bottom, 4px left & right
controlText.innerHTML = (Options.Text ? Options.Text : (Options.DivID ? jQuery('#'+ Options.DivID).html().replace(/%ID%/g,'GoogleMap') : 'Unknown' ));
controlUI.appendChild(controlText);
// Setup the click event listeners
if(OnClick != null){
google.maps.event.addDomListener(controlUI, 'click', function() {
OnClick();
});
}
var Where = ( Options.Where == 'TopRight' ? google.maps.ControlPosition.RIGHT_TOP :
( Options.Where == 'BottomRight' ? google.maps.ControlPosition.RIGHT_BOTTOM :
( Options.Where == 'MiddleRight' ? google.maps.ControlPosition.RIGHT_CENTER :
( Options.Where == 'BottomCenter' ? google.maps.ControlPosition.BOTTOM_CENTER :
google.maps.ControlPosition.TOP_CENTER ))));
GoogleMap.controls[Where].push(MapUI);
} // End of AddMapUI function
/*
* This function will plot a pin on the map. It will use the
* OpenGoogleMap function to make sure a map is open before trying
* to plot a pin on it.
*
*/
function AddPin(Position, Title) {
OpenGoogleMap(function () {
var marker = new google.maps.Marker({
position: Position,
map: GoogleMap,
animation: google.maps.Animation.DROP
});
marker.hidden = false;
jQuery('#GoogleMapVisablePinCount').text( Number(jQuery('#GoogleMapVisablePinCount').text()) +1 );
jQuery('#GoogleMapTotalPinCount').text( Number(jQuery('#GoogleMapTotalPinCount').text()) +1 );
var ID = GoogleMarkers.push(marker) - 1;
google.maps.event.addListener(marker, 'click', function() {
var Content = '<table><tr><td nowrap="true">';
Content += Title;
Content += "<div align='center'><a onclick='TogglePin(GoogleMarkers["+ ID +"]);'>Hide Pin</a></div>";
Content += '</td></tr></table>';
GoogleInfoBubble.setContent(Content);
GoogleInfoBubble.open(GoogleMap, marker);
GoogleInfoBubble.Open = true;
});
}); // End of OpenGoogleMap()
} // End of AddPin function
/*
* This function will attempt to convert a street address into
* Latitude and Lognitude and then call the AddPin function
* to plot it on the map.
*
*/
function PlotAddress(StreetAddress) {
var Position = null;
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': StreetAddress }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
Position = results[0].geometry.location;
AddPin(Position, StreetAddress);
} else {
alert('Unable to convert that address.');
}
});
}
// This function toggle the display of a single pin.
function TogglePin(Pin) {
Pin.setMap((Pin.hidden ? GoogleMap : null));
jQuery('#GoogleMap'+ (Pin.hidden ? 'HiddenPinCount' : 'VisablePinCount')).text( Number(jQuery('#GoogleMap'+ (Pin.hidden ? 'Hidden' : 'Visable') +'PinCount').text()) -1 );
jQuery('#GoogleMap'+ (Pin.hidden ? 'VisablePinCount' : 'HiddenPinCount')).text( Number(jQuery('#GoogleMap'+ (Pin.hidden ? 'VisablePinCount' : 'HiddenPinCount')).text()) +1 );
Pin.hidden = (Pin.hidden ? false : true);
}
// This function will hide or show all the pins on the map.
function ShowHideAll(hide) {
for (i in GoogleMarkers) {
GoogleMarkers[i].setMap((hide ? null : GoogleMap));
if( (hide && !GoogleMarkers[i].hidden) || (!hide && GoogleMarkers[i].hidden) ){
jQuery('#GoogleMap'+ (hide ? 'HiddenPinCount' : 'VisablePinCount')).text( Number(jQuery('#GoogleMap'+ (hide ? 'Hidden' : 'Visable') +'PinCount').text()) +1 );
jQuery('#GoogleMap'+ (hide ? 'VisablePinCount' : 'HiddenPinCount')).text( Number(jQuery('#GoogleMap'+ (hide ? 'VisablePinCount' : 'HiddenPinCount')).text()) -1 );
}
GoogleMarkers[i].hidden = (hide ? true : false);
}
}
/*
* This is an example funtion using an ajax call to
* retrieve Lat/Long from an external source and
* then plotting the pins on the map.
*
*/
function PlotExternalPins() {
jQuery.ajax({
url: '/GoogleMapsAPI/RandomPins.php',
type: "POST",
cache: "false",
data: 'To Fool IE Cache',
success: function( json ) {
if( json.Markers ) {
jQuery.map( json.Markers, function( MarkerObj ) {
AddPin(new google.maps.LatLng(MarkerObj.Latitude, MarkerObj.Longitude), MarkerObj.Title);
});
} else {
alert('Nothing found.');
}
} // end of success function ()
}); // end of ajax
}
jQuery('document').ready(function() {
OpenGoogleMap();
});
</script>
</head>
<body>
<div id="GoogleMapsMenu" style="display: none;">
<div align="center">
<strong>Custom Menu:</strong><br /><br />
<a onClick="GoogleMap.setMapTypeId(google.maps.MapTypeId.ROADMAP);">Map</a> / <a onClick="GoogleMap.setMapTypeId(google.maps.MapTypeId.HYBRID);">Satellite</a><br />
<a onClick="GoogleMap.setCenter(new google.maps.LatLng('44.208788', '-73.079395')); GoogleMap.setZoom(8);">Center & Zoom</a><br />
<a OnClick="PlotExternalPins();">Get Externel Pins</a><br />
<a OnClick="ShowHideAll();">Reveal All Pins</a><br />
<a OnClick="ShowHideAll('hide');">Hide All Pins</a><br />
<br />
<a OnClick="jQuery('#google_map_canvas_parent').hide(); jQuery('#showcode').show();">Show this code</a><br />
<br />
<a href="/tutorials/google-maps/#demos">Return to demos</a><br />
<br />
Map powered by:<br />Google and Adam!
</div>
</div>
<div id="GoogleMapPinCounts" style="display: none;">
<div style="float: left;" id="%ID%VisablePinCount">0</div><div style="float: left;"> - Visible | </div><div style="float: left;" id="%ID%HiddenPinCount">0</div><div style="float: left;"> - Hidden | </div><div style="float: left;" id="%ID%TotalPinCount">0</div><div style="float: left;"> - Total</div><div style="clear: both;"></div>
</div>
<div id="GooglePlotAddress" style="display: none;">
<div style="padding:5px"><div style="float: left; padding-right:5px;">Address:</div><div style="float: left;"><input id="%ID%Address" size="60" type="text" value="Starbucks, 10 Hawthorne Street, Williston, VT 05495" /></div><div style="float: left; padding-left:5px;"><input OnClick="PlotAddress(jQuery('#%ID%Address').val());" value="Plot" type="button" /></div><div style="clear: both;"></div></div>
</div>
<div id="google_map_canvas_parent" style="width:100%; height:100%;"><div id="google_map_canvas" style="width:100%; height:100%;"></div></div>
</body>
</html>