In this post you will learn how to show a Google map with custom pointers in a web page. For this firstly you have to create an HTML page that contains a div tag with id attribute for showing google map. After that you have to write your own JavaScript that uses the API to show a map on it. In this post we are using javascript functions for showing google map and for adding multiple markers for different locations over the map. After that there is HTML and CSS code for adding custom pointers. After that we are using JavaScript functions for redirecting the map to the addresses specified in custom pointers.
Steps for Showing Google Map with Custom pointers in PHP web page.
1. Firstly you have to create an HTML page.This section contains a div tag with id “map” for showing google map.
HTML code
2. Showing Google map to div with multiple markers.This section shows you how to load the Google Maps JavaScript API into your web page, and how to write your own JavaScript that uses the API to show a map on it.
JavaScript code
function initMap() {
var map = new google.maps.Map(document.getElementById(‘map’), {
zoom: 12,
center: {lat: -33.9, lng: 151.2}
});
//function call
setMarkers(map);
}
//array for latitute and longitute
var beaches = [
[‘Bondi Beach’, -33.890542, 151.274856, 4],
[‘Coogee Beach’, -33.923036, 151.259052, 5],
[‘Cronulla Beach’, -34.028249, 151.157507, 3],
[‘Manly Beach’, -33.80010128657071, 151.28747820854187, 2],
[‘Maroubra Beach’, -33.950198, 151.259302, 1]
];
function setMarkers(map) {
for (var i = 0; i < beaches.length; i++) {
var beach = beaches[i];
var marker = new google.maps.Marker({
position: {lat: beach[1], lng: beach[2]},
map: map,
title: beach[0],
zIndex: beach[3]
});
}
}
</script>
<script async defer src=“https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap”>
</script>
3. After that you have to write HTML for custom pointers. This section shows you how to write html for custom pointers.
HTML code
<div class=“menu_bar_one” id=“clickhere”><big>Bondi Beach</big><br/> Beach in New South Wales, Australia</div>
<div class=“menu_bar_one” id=“clickmee_too”><big>Coogee Beach</big><br/>Coogee NSW 2034, Australia</div>
<div class=“menu_bar_one” id=“oh_click”><big>Cronulla Beach</big><br/>North Cronulla Beach, Australia</div>
<div class=“menu_bar_one” id=“click_click”><big>Manly Beach</big><br/>New South Wales, Australia</div>
<div class=“menu_bar_one” id=“clicklast”><big>Maroubra Beach</big><br/>City in New South Wales, Australia</div>
</div>
4. After that you have to edit CSS for custom pointers to show them on the map. This section shows you how to set custom pointers on google map.
CSS code
width:100%;
height:600px;
position:relative;
z-index: -1;
}
.menu_bar{
background-color: white;
height: 350px;
position:absolute;
top: 20%;
right: 75px;
}
.menu_bar .menu_bar_one{
border-bottom: 2px solid teal;
padding: 5px 10px;
margin:5px;
color: teal;
margin: 10px;
border-radius: 5px;
}
5. This section shows you how to write JavaScript functions for redirecting google map to a particular address specified in custom pointers.
JavaScript code
map.setCenter(new google.maps.LatLng(-33.890542, 151.274856));
});
google.maps.event.addDomListener(clickmee_too, ‘click‘, function() {
map.setCenter(new google.maps.LatLng(-33.923036, 151.259052));
});
google.maps.event.addDomListener(oh_click, ‘click‘, function() {
map.setCenter(new google.maps.LatLng(-34.028249, 151.157507));
});
google.maps.event.addDomListener(click_click, ‘click‘, function() {
map.setCenter(new google.maps.LatLng(-33.80010128657071, 151.28747820854187));
});
google.maps.event.addDomListener(clicklast, ‘click‘, function() {
map.setCenter(new google.maps.LatLng(-33.950198, 151.259302));
});
Usage for this codeā¦
var map = new google.maps.Map(document.getElementById(‘map’), {
zoom: 12,
center: {lat: -33.9, lng: 151.2}
});
a. initMap(): This function initializes and adds the map when the web page loads. Use a script tag to include your own JavaScript which contains the initMap function.
b. getElementById(): This function is used to get id of HTML element.
c. new google.maps.Map(): This function creates a new Google maps object. It contains zoom and center properties.
d. zoom: The zoom property specifies the zoom level for the map
e. center: The center property tells the API where to center the map.
for (var i = 0; i < beaches.length; i++) {
var beach = beaches[i];
var marker = new google.maps.Marker({
position: {lat: beach[1], lng: beach[2]},
map: map,
title: beach[0],
zIndex: beach[3]
});
}
}
f. new google.maps.Marker(): This function is used to add marker to a particuler position on map.
g. position: The position property sets the position of the marker.
</script>
h. script src: This script loads the API from the specified URL.
i. async: This async attribute allows the browser to continue rendering the rest of page while the API loads.
j. defer: The defer attribute tells the browser to only execute the script file once the HTML document has been fully parsed.
k. key: The key parameter contains your API key.
map.setCenter(new google.maps.LatLng(-33.890542, 151.274856));
});
l. google.maps.event.addDomListener() The google.maps.event.addDomListener adds a DOM event listener,in this case to the ‘id’ object, for the ‘click’ event, and specifies a function to run.
Leave a comment