Geocoding Google API (bug)
HTML
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<link rel="stylesheet" href="https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css">
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map" class="gmap border_box"></div>
CSS
.gmap {
width:100%;
height:250px;
border: 3px solid #666;
}
.border_box {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
JavaScript
// JSON not yet use !!
var data = [
{"address": "48 rue des Grands Moulins, 75013, Paris"},
{"address": "12_rue_des_Grands_Moulins,_75013,_Paris"},
{"address": "65_rue_des_Grands_Moulins,_75013,_Paris"}
];
//Function creates a marker for given address and places it on the map
function placeAddressOnMap(address) {
gc.geocode({'address': address}, function (res, status) {
if (status == google.maps.GeocoderStatus.OK) {
new google.maps.Marker({
position: res[0].geometry.location,
map: map
});
}
});
}
//Addresses you want to display on the map
var address1 = '1200 W Roosevelt Road, Chicago, IL, 60607';
var address2 = '1000 W. Taylor Street Chicago, IL 60607';
var address3 = '800 W Harrison Street Chicago, IL 60607';
//Create a map with zoom factor, center location and map type
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: new google.maps.LatLng(41.878114,-87.629798),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var gc = new google.maps.Geocoder();
//Using function place the address markers on the map
placeAddressOnMap(address1);
placeAddressOnMap(address2);
placeAddressOnMap(address3);