logo
Welcome Guest! To enable all features please Login. New Registrations are disabled.

Notification

Icon
Error

Options
Go to last post Go to first unread
Joey  
#1 Posted : Tuesday, September 1, 2009 12:44:48 PM(UTC)
Joey

Rank: Administration

Reputation:

Groups: Moderators, Administration, Member
Joined: 7/16/2009(UTC)
Posts: 30
Man
Netherlands
Location: Groesbeek

Thanks: 1 times
This is a short guide to implement a basic version of Google Maps in a site. Version 3 of Google Maps no longer requires a key to be used per domain and performance is much improved.

If you want to add 'markers' and 'infowindows' look for more information in the Google Maps V3 API:
http://code.google.com/i...s/maps/documentation/v3/

This version of Google Maps can be implemented in an Open Control.

Step 1: Function call in body onload event.

MainBody is the id of the BODY-element in the page.

Code:

'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



Step 2: Find the header and add Javascript for Google Maps.

Headerinfo is the id of the HEADER-element in the page.

Code:

'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.469397,5.509644);" & VBCRLF & _
    "    var myOptions = {zoom: 7, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP};" & VBCRLF & _ 
    "    var map = new google.maps.Map(document.getElementById(""map_canvas""), myOptions);" & VBCRLF & _
    "  }" & VBCRLF & _
    "</script>"
  header.Controls.Add(new LiteralControl(sGM))
End If



Now 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$!}


Wanna join the discussion?! Login to your Sienn Forum forum account. New Registrations are disabled.

Joey  
#2 Posted : Thursday, September 3, 2009 11:12:33 AM(UTC)
Joey

Rank: Administration

Reputation:

Groups: Moderators, Administration, Member
Joined: 7/16/2009(UTC)
Posts: 30
Man
Netherlands
Location: Groesbeek

Thanks: 1 times
During the development in the past days I encountered an error in Internet Explorer 8. While the page was reloading a Javascript error was thrown saying 'is null or not an object'. This error was raised in an external Javascript file used by Google Maps v3. This problem can be solved by adding a timeout while loading the initialize() function in the body onload event.

Like this
Code:
body.Attributes.Add("onload","setTimeout('initializeGM();',0);")")
Joey  
#3 Posted : Friday, September 11, 2009 10:52:02 AM(UTC)
Joey

Rank: Administration

Reputation:

Groups: Moderators, Administration, Member
Joined: 7/16/2009(UTC)
Posts: 30
Man
Netherlands
Location: Groesbeek

Thanks: 1 times
In the code VBCRLF is used to insert new-line commands into strings. If you want to use this function then you have to add the following code in the top of the control.

Quote:
imports microsoft.visualbasic
==>END IMPORTS
Jop  
#4 Posted : Friday, September 11, 2009 1:15:21 PM(UTC)
Jop

Rank: Sienn Moderator

Reputation:

Groups: Administration, Member
Joined: 9/11/2009(UTC)
Posts: 6

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 2
Now 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

marwic  
#5 Posted : Friday, September 11, 2009 4:34:27 PM(UTC)
Guest

Rank: Guest

Groups: Guest
Joined: 9/17/2008(UTC)
Posts: 66

If you wanna to change the icon just add to the function another variable with the localization of the new icon
Code:
    "    var image = '/images/beachflag.png';" & VBCRLF & _ 


Then you need to change the parameters of var marker
Code:
    "    var marker = new google.maps.Marker({position: latlng, map: map, icon:image, title:""Jules Jansen""});" & VBCRLF & _ 


And that's all. The whole code can looks like that:
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 image = '/images/beachflag.png';" & VBCRLF & _
    "    var latlng = new google.maps.LatLng(51.207758,17.38715);" & VBCRLF & _
    "    var myOptions = {zoom: 15, 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, icon:image, title:""Some title""});" & VBCRLF & _
    "    var contentString= '<b>Salon mody slubnej Gracja</b><br>Kazimierza Wielkiego 4<br>56-400 Olesnica<br><br>www.suknieslubne-olesnica.pl';" & 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 
gregfd  
#6 Posted : Thursday, March 18, 2010 12:12:56 PM(UTC)
gregfd

Rank: Advanced Member

Reputation:

Groups: Member
Joined: 2/6/2009(UTC)
Posts: 55
Man
Location: Wroclaw

Hi,

I tried to use: http://www.google.com/ud...s/wizards/mapsearch.html

I can generate new code to paste on the website and I've got something like this:

Quote:
This web site needs a different Google Maps API key. A new key can be generated at http://code.google.com/apis/maps/


How this works? Is that possible that problem is that somebody is using this addres to generate this API Key?
Certico Websolutions - www.certico.pl
Joey  
#7 Posted : Thursday, March 18, 2010 2:14:51 PM(UTC)
Joey

Rank: Administration

Reputation:

Groups: Moderators, Administration, Member
Joined: 7/16/2009(UTC)
Posts: 30
Man
Netherlands
Location: Groesbeek

Thanks: 1 times
I don't know if you are using version 2 or version 3 of the Google Maps API? If you are using version 2 a key is required. This isn't the case if you're using version 3.
Users browsing this topic
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.