Skip to content

Instantly share code, notes, and snippets.

@jmsktm
Last active February 27, 2024 15:33
Show Gist options
  • Select an option

  • Save jmsktm/aae888a540ce2418e03a to your computer and use it in GitHub Desktop.

Select an option

Save jmsktm/aae888a540ce2418e03a to your computer and use it in GitHub Desktop.
Sample map with multiple markers
<html>
<head></head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div id="map_wrapper">
<div id="map_canvas" class="mapping"></div>
</div>
<style type="text/css">
#map_wrapper {
height: 100%;
width: 100%;
}
#map_canvas {
width: 100%;
height: 100%;
}
.markerLink {
color: #333;
text-decoration: none;
padding: 0px;
margin: 0px;
font-size: 10px;
}
</style>
<script>
jQuery(function($) {
var script = document.createElement('script');
script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
});
function initialize() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var markers = [
['Atlanta',33.636719,-84.428067,272.3],
['Austin',30.194528,-97.669889,121.47],
['Baltimore',39.175361,-76.668333,417.05],
['Boston',42.364347,-71.005181,907.61],
['Charlotte',35.214,-80.943139,397.88],
['Chicago',41.785972,-87.752417,797.25],
['Chicago',41.978603,-87.904842,511.78],
['Cincinnati',39.048836,-84.667822,177.65],
['Cleveland',41.411689,-81.849794,154.47],
['Columbus',39.997972,-82.891889,583.8],
['Dallas',32.896828,-97.037997,932.32],
['Denver',39.861656,-104.673178,374.21],
['Detroit',42.212444,-83.353389,912.62],
['Fort Lauderdale',26.072583,-80.15275,882.99],
['Fort Myers',26.536167,-81.755167,776.18],
['Hartford',41.938889,-72.683222,574.54],
['Houston',29.984433,-95.341442,403.14],
['Houston',29.645419,-95.278889,200.19],
['Indianapolis',39.717331,-86.294383,968.93],
['Kansas City',39.297606,-94.713905,209.42],
['Las Vegas',36.080056,-115.15225,281.03],
['Los Angeles',33.942536,-118.408075,919.6],
['Memphis',35.042417,-89.976667,15.27],
['Miami',25.79325,-80.290556,532.76],
['Minneapolis',44.881956,-93.221767,839.48],
['Nashville',36.124472,-86.678194,132.02],
['New Orleans',29.993389,-90.258028,307.99],
['New York',40.639751,-73.778925,152.46],
['New York',40.777245,-73.872608,358.21],
['Newark',40.6925,-74.168667,491.5],
['Oakland',37.721278,-122.220722,473.94],
['Ontario',34.056,-117.601194,540.94],
['Orlando',28.429394,-81.308994,584.92],
['Philadelphia',39.871944,-75.241139,680.28],
['Phoenix',33.434278,-112.011583,610.06],
['Pittsburgh',40.491467,-80.232872,424.9],
['Portland',45.588722,-122.5975,581.9],
['Raleigh-Durham',35.877639,-78.787472,124.03],
['Sacramento',38.695417,-121.590778,789.26],
['Salt Lake City',40.788389,-111.977772,901.34],
['San Antonio',29.533694,-98.469778,197.13],
['San Diego',32.733556,-117.189667,657.04],
['San Francisco',37.618972,-122.374889,560.79],
['San Jose',37.3626,-121.929022,847.19],
['Santa Ana',33.675667,-117.868222,510.55],
['Seattle',47.449,-122.309306,705.65],
['St. Louis',38.748697,-90.370028,908.77],
['Tampa',27.975472,-82.53325,611.68],
['Washington D.C.',38.944533,-77.455811,747],
['Washington D.C.',38.852083,-77.037722,3.92]
];
var url = 'https://www.expedia.com/Flight-Search-Disambiguation?inpPackageType=FLIGHT_ONLY&inpInfants=2&origref=null&inpArrivalTimes=362&inpArrivalDates=02%2F10%2F2016&inpFlightClass=3&inpDepartureDates=01%2F30%2F2016&inpDepartureTimes=362&inpFlightRouteType=2&inpHotelRoomCount=1&inpFlightAirlinePreference=&inpAdultCounts=1&inpIsNonstopOnly=N&intcp=0&inpChildCounts=0&inpSeniorCounts=0&action=FlightSearchAll%40searchFlights&inpRefundableFlightsOnly=N&inpSortType=0&inpDepartureLocations=KTM&inpArrivalLocations=JFK&';
for( i = 0; i < markers.length; i++ ) {
var infoWindow = new google.maps.InfoWindow(), marker, i;
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
var image = 'http://www.durst.org/images/map_marker.png';
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0],
icon: image
});
var link = "<a href='"+url+"'' target='_blank' class='markerlink'>$"+markers[i][3]+"</a>";
google.maps.event.addListener(marker, 'click', function() {
window.open(url, '_blank');
});
infoWindow.setContent(link);
infoWindow.open(map, marker);
map.fitBounds(bounds);
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment