Today I will share some code to make simple multiple marker on Google map. This code will show a google map in your web page with a place marker base on your locations. You can also custom the icon marker by yourself and active or inactive the calculation route.
Ok, You can see for the demo below:
So now, we start the code,
1. First we must define our code with google map api and jquery
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
2. Copy paste code below, make sure the code between <head>{your script}</head>
<script type="text/javascript"> var map; var directionDisplay; var directionsService = new google.maps.DirectionsService(); var global_markers = [];
// Represent your location here
var markers = [[-8.580467, 115.163001, 'My Home - Kekeran, Mengwi, Bali'],[-8.724085,115.180407,'Office - Simpang siur, Kuta, Bali']];
var infowindow = new google.maps.InfoWindow({});
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers:true});
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-8.580467, 115.163001);
var myOptions = {
zoom: 11,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
// if you don't want to use calculation route, inactive calcRoute() function
// and call addMarker() here
calcRoute();
}
function addMarker() {
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i][0]);
var lng = parseFloat(markers[i][1]);
var trailhead_name = markers[i][2];
var myLatlng = new google.maps.LatLng(lat, lng); // customize the content buble here
var contentString = "<html><body><div><h2>" + trailhead_name + "</h2></div></body></html>";
// customize icon marker here
var icon_img = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRmdVDVsRgbZXd4aoyhWNjP2px16J4nwpvLym4MrMLWEyzGBiTDRe_NDQHL5FU4QYJow0iN_WehzhIbReVMB6enMGtO1kb-xHTDEi83Rcp9RMh1k_Cb5SdqYoFQHCWYZBvrDpvB_Ta2l77/s1600/location.png";
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: icon_img,
title: "Coordinates: " + lat + " , " + lng + " | Trailhead name: " + trailhead_name
});
marker['infowindow'] = contentString;
global_markers[i] = marker;
google.maps.event.addListener(global_markers[i], 'click', function() {
infowindow.setContent(this['infowindow']);
infowindow.open(map, this);
});
}
}
function calcRoute() {
start = new google.maps.LatLng(-8.580467, 115.163001);
end = new google.maps.LatLng(-8.724085, 115.180407);
var request = {
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
addMarker();
}
});
}
window.onload = initialize;
</script>3. Add new css for map (in <head> container)
<style type="text/css">
#map_canvas{
width: 400px;
height: 300px;
}
</style>4. Then the last step, create the html code
<div id="map_canvas"></div>
Ok well done, save your file and try to run it.
Download complete source here
Hope it usefull, if there any question, just write your comment below.
I will replay asap ^^
Best regard,
Bayu Prawira
No comments:
Post a Comment