Ads

Wednesday, 18 September 2013

google map show multiles marks with infowindow


 <html>  
  <head>  
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no">  
   <meta charset="utf-8">  
   <title>Info window with <code>maxWidth</code></title>  
   <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>  
 <script>  
   var locations = [{"title":"Dr. test test","latitude":"23.0061749","longitude":"72.5190038","iw_content":"<div id='content'>\n<div class='map_photo'>\n<img src='http:\/\/localhost\/healthjump\/images\/mypro.png'\/>\n<\/div>\n<div class='map_dleft'>\n<span class='dname'>Dr. test test<\/span><br\/>\n<span class='speciality'>03-Internist<\/span><br\/>\n<span class='practice'>NYU Faculty Group Practice<\/span><br\/>\n<span class='email'>abc@gmail.com<\/span>\n<\/div>\n<div class='map_last_add'>\n<span class='address'>vejalpur, ahmedabad, \nGujarat, India - <\/span>\n<\/div>\n<\/div>"},  
           {"title":"Dr. Mohit Gupta","latitude":"23.0095879","longitude":"72.5618894","iw_content":"<div id='content'>\n<div class='map_photo'>\n<img src='http:\/\/localhost\/healthjump\/images\/mypro.png'\/>\n<\/div>\n<div class='map_dleft'>\n<span class='dname'>Dr. Mohit Gupta<\/span><br\/>\n<span class='speciality'>04-Nephrologist<\/span><br\/>\n<span class='practice'>NYU Faculty Group Practice<\/span><br\/>\n<span class='email'>test@vervesys.com<\/span>\n<\/div>\n<div class='map_last_add'>\n<span class='address'>paldi, ahmedabad, \nGujarat, India - <\/span>\n<\/div>\n<\/div>"}];  
   function reset_map()  
   {   
     var map = new google.maps.Map(document.getElementById('map-canvas'), {  
      zoom: 8,  
      center: new google.maps.LatLng(23.035959, 72.529388),  
      mapTypeId: google.maps.MapTypeId.ROADMAP  
     });  
     var infowindow = new google.maps.InfoWindow({maxWidth: 350, maxHeight:250});  
     var fullBounds = new google.maps.LatLngBounds();  
     var marker, i;  
     for (i = 0; i < locations.length; i++)  
     {  
        marker = new google.maps.Marker({  
         position: new google.maps.LatLng(locations[i]['latitude'], locations[i]['longitude']),  
         map: map,  
         //icon: './images/map_marker.png',  
         //shadow: './images/map_marker.png'  
         title:locations[i]['title']  
        });  
        var point=new google.maps.LatLng(locations[i]['latitude'], locations[i]['longitude']);  
        fullBounds.extend(point);  
        google.maps.event.addListener(marker, 'click', (function(marker, i) {  
         return function() {  
          infowindow.setContent(locations[i]['iw_content']);  
          infowindow.open(map, marker);  
         }  
        })(marker, i));  
     }  
     map.fitBounds(fullBounds);  
   }  
   google.maps.event.addDomListener(window, 'load', reset_map);  
 </script>  
 </head>  
  <body>  
   <div id="map-canvas" style="height:500px;width: 500px;"></div>  
  </body>  
 </html>  

No comments:

Post a comment