Google Maps Multiple Markers
In this post, you will learn how to show a simple Google map with multiple markers on a web page. Google map with multiple markers can be implemented by using simple HTML tags and JavaScript functions. For this firstly you have to create an HTML page. After that, you have to write your own JavaScript that uses the API to show a map. This section, we are using JavaScript functions for showing a map with multiple markers.
Below is the map you’ll create using this postcode.
Steps for Showing Google Map with Multiple Markers in PHP web page.
1. Firstly you have to create an HTML page. The code below shows a div tag with id attribute which will be used for showing map.
HTML code
2.we are using internal CSS for giving dimensions to the google map. You can also use inline CSS for this.
CSS code
#map{
width:100%;
height:600px;
}
</style>
3. After that, you have to use JavaScript to initialize google map. We are using functions like initMap for the initialization of google map and new google.maps.Map() for adding a map. document.the getElementById function is used to get id attribute which will be used to add google map.
JavaScript code
function initMap() {
var map = new google.maps.Map(document.getElementById(‘map’), {
zoom: 10,
center: {lat: -33.9, lng: 151.2}
});
}
</script>
Usage for this code…
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 rid 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.
4. Adding Google map to div. 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 add a map with a marker on it.you can get your own API key from google.
JavaScript code
</script>
Usage for this code…
f. script src: This script loads the API from the specified URL.
g. async: This async attribute allows the browser to continue rendering the rest of the page while the API loads.
h. defer: The defer attribute tells the browser to only execute the script file once the HTML document has been fully parsed.
i. key: The key parameter contains your API key.
5. we are using an array for storing the name of locations, latitude, longitude, and z-index of locations on which the markers displayed. A function setMarkers is created to add markers on locations.
JavaScript code
[‘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]
});
}
}
Usage for this code…
j. beaches.length: The length property returns the length of a string (number of characters). The length of an empty string is 0.
k. z-index: The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
l. new google.maps.Marker(): his constructor takes a single Marker options object literal, specifying the initial properties of the marker.
m. position: The position property sets the position of the marker.
Leave a comment