Ep

Ep

How to put markers on Google Maps

A marker an object used to indicate a position, place, or route. Google Maps has several types of overlays:
  • Marker - Single locations on a map. Markers can also display custom icon images
  • Polyline - Series of straight lines on a map
  • Polygon - Series of straight lines on a map, and the shape is "closed"
  • Circle and Rectangle
  • Info Windows - Displays content within a popup balloon on top of a map
  • Custom overlays

Google Map Location Marker

In this article I will show how to place a marker using google maps api, & javascript in html page. First of all you should be aware of How to Add a Google Map to Your Web Page after this we will create a marker on map.

Add the marker to the map

To mapping a location of map we will use Marker constructor. It creates a marker. (Note that the position property must be set for the marker to display). For example:
Google Map Marker

var marker=new google.maps.Marker({
   position:myCenter,
   });

 marker.setMap(map);

Google Maps - Animate the Marker

To bounce marker on google map we use Animation.BOUNCE property in marker constructor. For example :-


marker=new google.maps.Marker({

   position:myCenter,

   animation:google.maps.Animation.BOUNCE

   });



marker.setMap(map);


Google Maps - Icon Instead of Marker


The example below specifies an image (icon) to use instead of the default marker:

var marker=new google.maps.Marker({
   position:myCenter,
   icon:'pinkball.png'
   });

marker.setMap(map);

Google Maps - InfoWindow

Show an InfoWindow with some text content information for a marker. For example :-

var infowindow = new google.maps.InfoWindow({
   content:"Hello World!"
   });

infowindow.open(map,marker);

Add Information Marker Google Maps

Find the working sample in html page below :-

Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MarkerWithInfo.aspx.cs" Inherits="MarkerWithInfo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Add marker to google map | Show infowindow on marker click</title>

    <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet"/>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
  
    <script type="text/javascript" >

      var pMarker = []; // Array for markers

      function initialize() {
        var myLatlng = new google.maps.LatLng(19.101053, 72.881927); // default location
        var mapOptions = {
          zoom: 8,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP // Map Type
        }

        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        // To display InfoWindow contents
        var contentString = '<div id="content">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h1 id="firstHeading" class="firstHeading">Mumbai</h1>'+
            '<div id="bodyContent">'+
            '<p><b>test</b></p>'+           
            '</div>'+
            '</div>';

        var infowindow = new google.maps.InfoWindow({
            content: contentString,
            maxWidth: 100 // Setting max width for infowindow
        });

        // To add marker
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Mumbai, Maharashtra'
        });
        pMarker.push(marker);

        google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
        });
}
Demo

How can I add a place in Google Map?, Google Map Maker, Add a place
add information marker google maps

Remove Marker From Google Maps

        // To remove markers
        function RemoveMarkerPlace() {
            for (var i in pMarker)
                pMarker[i].setMap(null);
        }

       </script>
</head>

 <body onload="initialize()">
    <form id="form1" runat="server">
     <div id="map-canvas" style="width:700px; height:600px;"></div>
     <a href="#" onclick="RemoveMarkerPlace();">Remove</a>
    </form>
</body>
</html>


Conclusion : It was fun in learning and writing an article on Healthcare Domain Knowledge. I hope this article will be helpful for enthusiastic peoples who are eager to learn and implement some interesting stuffs in new technology.
Please feel free to comment your opinion about this article or whatever you feel like telling me. Also if you like this article, don't forget to share this article with your friends. Thanks!
How to put markers on Google Maps Reviewed by Ravi Kumar on 1:15:00 PM Rating: 5

1 comment:

All Rights Reserved by Etechpulse © 2012 - 2017
Powered By Blogger

Contact Form

Name

Email *

Message *

Powered by Blogger.