Sahan Nagodawithana: 2013

Friday, August 9, 2013

Google maps visual refresh

There is a simple js to enable visual refresh in google maps.

google.maps.visualRefresh = true; // enabling the visual refresh globaly

var map;

function initialize() {

var mapOptions = {

zoom: 8,

center: new google.maps.LatLng(-34.397, 150.644), // center point

mapTypeId: google.maps.MapTypeId.ROADMAP

};

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

mapOptions); // load the map

}

google.maps.event.addDomListener(window, 'load', initialize);

Visual refresh add new look and feel of google maps to your own web sites googl map.

Wednesday, August 7, 2013

How to set bounds to a Google maps(Zooming option)

var bounds = new google.maps.LatLngBounds();
bounds.extend(positionOfPlace);

map.fitBounds(bounds);

You can adjust zoom level according to the distribution of pin points. Make a variable bounds and initialize it. PositionOfPlace refers to the lat long of the center of the prefered map.

Simpply then set bounds using fitBounds.

Make sure you add this coding to head section of your web page.

Wednesday, July 31, 2013

Here you guys can see that the genaral google maps tool tip is customized. This is how to do it.
In your database have a column for type.
Then retrieve it with php like this.<?php echo $type?> Google maps API supports the image to be customized. It is like this.

var image = new google.maps.MarkerImage('images/markers/<?php echo $type?>.png',
new google.maps.Size(50, 40), // dimensions of the image
new google.maps.Point(0,0), // origin of the custom icon
new google.maps.Point(56, 122) // offset for the image
);
var marker = new google.maps.Marker({
position: positionOfPlace,
icon: image //using the customized image
});

MarkerImage is a predefined type in google api sothat you guys can directly use it. Give the desired dimensions of your image origin and the offset values as preffered. then when you plot the marker give the variable which you stored the image detalis.

By this method you can simply customize the google maps tool tip.

Friday, July 26, 2013

Google maps Information Window

This is how to add a simple information window to your google maps.
First you have to implement the google map... Here is the google documentation for how to load google maps. https://developers.google.com/maps/documentation/javascript/tutorial... here is the small code snippet which i have used to make an information window for a particular location on google maps.

var infowindow = new google.maps.InfoWindow
({
content:chHtml,
maxWidth:200,
maxHeight:200

});
chHtml=var chHtml ="<h6>Follow us: </h6><h3><a href='<?php echo $link?>'"
+" target='_blank'> <?php echo $name?> </a></h3><div> "

+" <input name=\"add\" class='the_button' type=\"button\" value=\"add\" lat=\"<?php echo $email?>\" lat=\"<?php echo $lat?>\" long=\"<?php echo $long ?>\" onclick=\"addNew(<?php echo $lat?>, <?php echo $long ?>, '<?php echo $email ?>');\"/> "
+"</div><div> <?php echo $type?> </br> </div>"; here chHtml means the content of your information window. maxWidth maxHeight refers to width and height respectively.

then as the last step in the initialize() function you have to populate the information window.

infowindow.open(map, marker);

Thursday, June 20, 2013

How to change the maps route to draggable

var rendererOptions = {
draggable: true
};

This is the code snippet which I tested for my university project on how to drag the current route of Google maps. As you guys can see Google maps it self providing this feature hence I was curious how to do it.. Finally I found this pretty simple code snippet. Add this in the <head> section of your particular web page.

And then this simple code

var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

then add this variable to where you are declaring the map
directionsDisplay.setMap(map);