The complete code (with description how to add a point on the map and how to modify the information-balloon):
***************
STEP 1: OPEN A NEW OPEN CONTROL, in which you copy past the following code:
imports microsoft.visualbasic
==>END IMPORTS
'Find the body-element to add the onload function.
If Not MyForm.Parent.FindControl("MainBody") Is Nothing Then
Dim body As Object = MyForm.Parent.FindControl("MainBody")
body.Attributes.Add("onload","initialize();")
End If
'Find the header and add javascript for Google Maps.
If Not MyForm.Parent.FindControl("Headerinfo") Is Nothing Then
Dim header As Object = MyForm.Parent.FindControl("Headerinfo")
Dim sGM As String = "<script type=""text/javascript"" src=""http://maps.google.nl/maps/api/js?sensor=true""></script>" & VBCRLF & _
"<script type=""text/javascript"">" & VBCRLF & _
" function initialize(){" & VBCRLF & _
" var latlng = new google.maps.LatLng(52.4568715, 5.8758612);" & VBCRLF & _
" var myOptions = {zoom: 9, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP};" & VBCRLF & _
" var map = new google.maps.Map(document.getElementById(""map_canvas""), myOptions);" & VBCRLF & _
" var marker = new google.maps.Marker({position: latlng, map: map, title:""Jules Jansen""});" & VBCRLF & _
" var contentString= '<b>Jules Jansen</b><br/>Adres<br/>postcode plaats<br/>';" & VBCRLF & _
" var infowindow = new google.maps.InfoWindow({ content: contentString });" & VBCRLF & _
" google.maps.event.addListener(marker, 'click', function(){ infowindow.open(map,marker); });" & VBCRLF & _
" }" & VBCRLF & _
"</script>"
header.Controls.Add(new LiteralControl(sGM))
End If
- To center you map on the address you would like to show:
- Go to:
http://itouchmap.com/latlong.html- fill in your address.
- copy only the coordinates from the addressbox, like this: 51.776962,5.932543
- Put these coordinates in your code in the line: " var latlng = new google.maps.LatLng(51.776962,5.932543);" & VBCRLF & _
The info-balloon is default onclick:
If you would like the info-balloon default open: change the line:
" google.maps.event.addListener(marker, 'click', function(){ infowindow.open(map,marker); });" & VBCRLF & _
into: "infowindow.open(map,marker);" & VBCRLF & _
In the line: " var marker = new google.maps.Marker({position: latlng, map: map, title:""Jules Jansen""});" & VBCRLF & _
change title in your website name ""your websitename""
In the line: " var contentString= '<b>Jules Jansen</b><br/>Adres<br/>postcode plaats<br/>'" & VBCRLF & _
Put the info that you would like to show in the info-balloon.
***************
STEP 2Now the Open Control can be added to a text for example. In the text you have to create a DIV-element in which Google Maps will be loaded.
The id has to match the id in the Open Control ("map_canvas"). The 'XX' has to be replaced by the Id of the Open Control in which the code above was placed.
Code:
<div style="width: 500px; height: 300px;" id="map_canvas"></div>
{!$Control.36.XX$!}
Edited by user Thursday, September 24, 2009 11:57:25 AM(UTC)
| Reason: Not specified
