Skip to content

Instantly share code, notes, and snippets.

@driesd
Created April 21, 2014 15:13
Show Gist options
  • Save driesd/11145517 to your computer and use it in GitHub Desktop.
Save driesd/11145517 to your computer and use it in GitHub Desktop.
Google map with custom icon + custom balloon Google Maps Custom markers info: https://developers.google.com/maps/tutorials/customizing/custom-markers Google MAPS API: https://developers.google.com/maps/documentation/javascript/reference#InfoWindow -------> ATTENTION: do not put this code in de document load part <---------------
// add this to your html page (e.g. in a block)
<div id="map_canvas">map_canvas</div>
// *************************
// CUSTOM GOOGLE MAPS ICON *
// *************************
function LoadGmaps() {
// set the base url for the marker icons
var iconBase = '/sites/dekoning/themes/the_aim_theme/img/';
// set the map positions
var pos120 = new google.maps.LatLng(51.094994,3.827168); // Crelan huisnr. 120
//var pos122 = new google.maps.LatLng(51.094992,3.827169); // De Koning huisnr. 122
//var pos150 = new google.maps.LatLng(51.094521,3.825731); // huisnr. 150
//var pos135 = new google.maps.LatLng(51.093685,3.822985); // huisnr. 135
var pos125 = new google.maps.LatLng(51.094655,3.826268); // huisnr. 125
// MAP
var mapCanvas = document.getElementById('map_canvas');
var mapOptions = {
zoom: 17,
center: pos120,
disableDefaultUI: true,
navigationControl: false,
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
//************************
// CRELAN BANK
// marker
var markerCrelan = new google.maps.Marker({
position: pos120,
map: map,
icon: iconBase + 'crelan_maps.png',
title:"Crelan Bank"
});
// bubble
var bubbleOptionsCrelan = {
content: '<h4><strong>CRELAN BANK</strong><h4><p>Dorp-west 120<br />9080 Lochristi</p><p>Tel. 09 355 31 91<br />Fax 09 355 64 12<br /><a href="mailto:lochristi@crelan.be">lochristi@crelan.be</a></p><a href="https://maps.google.be/maps?q=Dorp-west+120+-+9080+Lochristi&hl=nl&sll=51.09623,4.227975&sspn=1.457516,3.749084&hnear=Dorp-West+120,+9080+Lochristi,+Oost-Vlaanderen,+Vlaams+Gewest&t=m&z=16" target="_blank">Routebeschrijving</a>'
}
var bubble = new google.maps.InfoWindow(bubbleOptionsCrelan);
google.maps.event.addListener(markerCrelan, 'click', function() {
bubble.open(map,markerCrelan);
});
//************************
// DE KONING VERZEKERINGEN
// marker
var markerDeKoning = new google.maps.Marker({
position: pos125,
map: map,
icon: iconBase + 'dekoning_maps.png',
title:"De Koning"
});
//bubble
var bubbleOptionsDeKoning = {
content: '<h4><strong>DE KONING VERZ.</strong><h4><p>Dorp-west 122<br />9080 Lochristi</p><p>Tel. 09 355 63 67<br />Fax 09 355 97 53<br /><a href="mailto:info@dekoning.be">info@dekoning.be</a></p><a href="https://maps.google.be/maps?q=Dorp-west+122+-+9080+Lochristi&hl=nl&ll=51.095046,3.827212&spn=0.011387,0.02929&sll=51.094858,3.827062&sspn=0.011387,0.02929&hnear=Dorp-West+122,+9080+Lochristi&t=m&z=16" target="_blank">Routebeschrijving</a>'
}
var bubbleDeKoning = new google.maps.InfoWindow(bubbleOptionsDeKoning);
google.maps.event.addListener(markerDeKoning, 'click', function() {
bubbleDeKoning.open(map,markerDeKoning);
});
}
google.maps.event.addDomListener(window, 'load', LoadGmaps);
#map_canvas {
width: 500px;
height: 400px;
background-color: #CCC;
}
// add this line in the head tag
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
@shakyl333
Copy link

i need that 2 icons which you have used, please can you send me that "dekoning_maps.png" and "crelan_maps.png" both png on my email id.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment