Easy Code Stuff: Marker Click

Mar 7, 2016

<html> <head> <title>Google Map With InfoBubble</title> <script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script> <script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble.js" type="text/javascript"></script> </head> <body> <div id="map-canvas" style="width: 100%; height: 500px;"> </div> <script type="text/javascript"> var lat = 6.929537; //Your Location Latitude var lon = 79.866271; //Your Location Longitude var latlng = new google.maps.LatLng(lat, lon); var mapOptions = { center: latlng, zoom: 15 }; var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); var marker = new google.maps.Marker({ position: latlng, map: map }); var infoBubble = new InfoBubble({ maxWidth: 300, content: '<div><h5>Content Header</h5><p>Content Goes Here</p></div>' }); google.maps.event.addListener(marker, 'click', function () { infoBubble.open(map, marker); }); google.maps.event.addListener(marker, 'mouseover', function () { infoBubble.open(map, marker); }); </script> </body> </html>

Nov 19, 2014

Google Map With Multiple Markers & Info Windows Using Google Map API v3

Following Sample Html Code Will Help You To Create Your Own Google Map With Multiple Markers & Multiple Info Windows. In This Example I Have Used An Array Which Consist Of Three Locations.You Can Use Your Own Object Here.But Make Sure You Have Specified Correct Data Value.Specially Latitude and Longitude.

In The Example I Have Linked The JQuery.But You Need To Download The "jquery.gmap3.min.js" File.

<!DOCTYPE html>
<html>
<head>
<title>Google Map v3 With Multiple Markers & Info Windows</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false& libraries=places"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="jquery.gmap3.min.js"></script>
</head>
<body>
<div id="map-canvas" style="width:100%;height:500px;"></div>
<script type="text/javascript">
var locations = [
[1, 6.929537, 79.866271,'Maradana Railway'],
[2, 6.933456, 79.850435,'Fort Railway'],
[3, 6.931965, 79.846058,'Secretariat Railway']
];

var map;
var str = '[';
for (i = 0; i < locations.length; i++) {
str += '{ "lat" :"' + locations[i][1] + '","lng" :"' + locations[i][2] + '","data" :"<div class=Your_Class><h4><a href=Your_Link_To_Marker>' + locations[i][3] + '</a></h4></div>"},';
}
str = str.substring(0, str.length - 1);
str += ']';
str = JSON.parse(str);

jQuery('#map-canvas').gmap3({
marker: {
values: str,
options: {
icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
//icon: new google.maps.MarkerImage("marker.png"),
},
events: {
click: function (marker, event, context) {
map = $(this).gmap3("get"),
infowindow = $(this).gmap3({ get: { name: "infowindow" } });
if (infowindow) {
infowindow.open(map, marker);
infowindow.setContent(context.data);
} else {
$(this).gmap3({
infowindow: {
anchor: marker,
options: { content: context.data }
}
});
}
},
}
},
map: {
options: {
zoom: 14,
scrollwheel: true,//Make It false To Stop Map Zooming By Scroll
streetViewControl: true
},
},
});
</script>
</body>
</html>

Above Example I Have Used The Marker Click Function.If You Want You Can Use The mousehover function too.If You Want To Change The Marker Color Or Style You Can Change The Link.Even If You Want To Use Your Own Image You Can SImply Give The Link( "new google.maps.MarkerImage("marker.png")" ) As Shown In The Comment.

Check My Other Articles About Google Maps.

1. Creating A Google Map Using Google Map API v3
2. Show Current Location In A Google Map Using Google Map API v3
3. Getting The Address Of Selected Location In Google Map Using Google Map API v3
4. Getting The Selected Latitude And Longitude From Google Map Using Google Map API v3
5. Google Map With Multiple Markers & Info Windows Using Google Map API v3
6. Getting The Direction Between Two Markers In Google Map Using Google MAP API
7. Getting The Direction Between Two Locations Using Google MAP API
8. Getting The Distance Between Two Markers In Google Map Using Google MAP API
9. Getting The Distance Between Two Locations Using Google MAP API
10. Getting The Nearest Places For A Location In Google Map Using Google MAP API
11. Google Map With InfoBubble
12. Google Maps Creating Polygon And Retrieving Coordinates

Mar 7, 2016

Google Map With InfoBubble

Nov 19, 2014

Google Map With Multiple Markers & Info Windows Using Google Map API v3

JWT Token Decode Using Jquery