Google Map, HTML Addresses Geocoded
HTML
<div id="map_canvas" style="border: 0px solid #3872ac;"></div>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js"></script>
<ul class="list locations">
<li>
<div class="location-name">The Heart Center of Northeast Georgia Medical Cent</div>
<div class="location-address">1404 River Place, Suite 101, Braselton, GA 30517</div>
</li>
<li>
<div class="location-name">The Heart Center of Northeast Georgia Medical Cent</div>
<div class="location-address">200 South Enota Drive, Suite 200, Gainesville, GA 30501</div>
</li>
<li>
<div class="location-name">The Heart Center of Northeast Georgia Medical Cent</div>
<div class="location-address">316 North Broad Street, Winder, GA 30680</div>
</li>
<li>
<div class="location-name">The Heart Center of Northeast Georgia Medical Cent</div>
<div class="location-address">58 Big A Road, Toccoa, GA 30577</div>
</li>
<li>
<div class="location-name">The Heart Center of Northeast Georgia Medical Cent</div>
<div class="location-address">77 Weaver Road, Suite B, Blairsville, GA 30512</div>
</li>
</ul>
CSS
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
position: fixed;
}
.locations {
display: none;
}
JavaScript
var locationNames = [];
$('.locations li div.location-name').each(function() {
locationNames.push($(this).text());
});
var locationAddresses = [];
$('.locations li div.location-address').each(function() {
locationAddresses.push($(this).text());
});
var locations = [];
for (var i = 0; i < locationNames.length; i++) {
locations.push([locationNames[i], locationAddresses[i]]);
}
console.log(locations);
var geocoder;
var map;
var bounds = new google.maps.LatLngBounds();
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
geocoder = new google.maps.Geocoder();
for (i = 0; i < locations.length; i++) {
geocodeAddress(locations, i);
}
}
google.maps.event.addDomListener(window, "load", initialize);
function geocodeAddress(locations, i) {
var title = locations[i][0];
var address = locations[i][1];
geocoder.geocode({
'address': locations[i][1]
},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
//icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
map: map,
position: results[0].geometry.location,
title: title,
animation: google.maps.Animation.DROP,
address: address
})
infoWindow(marker, map, title, address);
bounds.extend(marker.getPosition());
map.fitBounds(bounds);
} else {
alert("geocode of " + address + " failed:" + status);
}
});
}
function infoWindow(marker, map, title, address) {
google.maps.event.addListener(marker, 'click', function() {
var html = "<div class='infoWindow'><h3>" + title + "</h3><p>" + address + "</p></div>";
iw = new google.maps.InfoWindow({
content: html,
maxWidth: 200
});
iw.open(map, marker);
});
}
function createMarker(results) {
var marker = new...