In this article, it describes how to add, remove markers and info windows on the Google Map version 3. Unlike in version 2, this has lots of easy ways of implementing map options, markers, info windows and associate controls on the map. You can set zoom control & control types, street view controls in map options. I'll break down the steps as follows,
- Initialize the Map control and register with web page.
- Create markers and associate info windows. Create a function to remove the markers from the map.
- Maker events demo.
Here we go -:-
Step 01
Add below script within
your head tag.
<head>
<title>Step 01</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
var divMapID;
function Init() {
divMapID = document.getElementById('divMap');
// google.maps.MapOptions object
var mapOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(42.345573, -71.098326),
zoom: 11, // This is required to set the zoom level when the map is loaded to the page.
zoomControl: true,// override default styles
zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL },
mapTypeControl: true,// override default styles
mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU },
overviewMapControl: true,// By Default it is closed.
overviewMapControlOptions: { opened: true}
}
// google.maps.Map class and for constructor -> Map(mapDiv:Node, opts?:MapOptions)
var googleMap = new google.maps.Map(divMapID, mapOptions);
}
// Register the init function with domlistener
google.maps.event.addDomListener(window, 'load', Init);
</script>
</head>
Add below markup to load the map
<div id="divMap" style="width: 500px; height: 500px; border: 1px #000 solid"></div>
Following code demonstrates how to add the associate info windows for the markers. All the markers are pushed to the markerArray. Create a info window globally & will assign the info windows to the particular marker in marker click event within the CreateMarker function. It is up to you to change the function depends on your requirement. You can call ClearMarkers() to remove all the markers from the map.
var markerArray = [];
var infowindow = new google.maps.InfoWindow({
map: googleMap
});
function CreateMarker(lat, lng, content) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: googleMap
});
// register the marker click event to popup the info window
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(content);
infowindow.open(googleMap, marker);
});
// adding markers to the array
markerArray.push(marker);
}
function ClearMarkers() {
if (markerArray) {
for (var i = 0; i < markerArray.length; i++)
markerArray[i].setMap(null);
}
}
Step 03
This is very pretty simple. It is just a matter of registering the event on marker. Let's look at the bellow code sample. Check the API reference for more events on marker. There are marker dragstart, dblclick, animation_changed etc useful events can easily register as follows. By setting MarkerOptions, events you can make more attractive map features to the end user.
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.open(map, this);
});
google.maps.event.addListener(marker, 'mouseout', function() {
infowindow.open(map, this);
});
Look at the following code snippet that describes marker drag event on specified map. I have created a function
CreateDragableMarker() to implemented dragstart event and dragend event in below example. marker.getPosition().lat(), marker.getPosition().lng() will return new locations of the marker posistion.function CreateDragableMarker(map, position, infowindow) {
var marker = new google.maps.Marker({
position: position,
draggable: true,
map: map
});
google.maps.event.addListener(marker, "dragstart", function () {
// Do whatever you need
});
google.maps.event.addListener(marker, "dragend", function () {
var newLat = marker.getPosition().lat() // returns new latitude
var newLng = marker.getPosition().lng() // returns new longitude
});
return marker;
}
Demo Image
No comments:
Post a Comment