API
Version 7.x > API > Adding markers to Google map from External data source View modes: 
User avatar
Certified Developer 12
Certified Developer 12
preid@sherwood-group.com - 6/11/2013 12:17:33 PM
   
Adding markers to Google map from External data source
I've been reading through the documentation for setting up a Google map with multiple markers. I think I understand how to do this using Kentico data, pulling in a particular document type.

However, I want to add markers based on addresses that are being queried from an external data source. What format do I need to put those addresses into so that they are usable by the map web part? Is it possible to do this without creating a new document type in Kentico?

Thanks,
Pam

User avatar
Kentico Legend
Kentico Legend
Brenden Kehren - 6/12/2013 7:48:40 AM
   
RE:Adding markers to Google map from External data source
Pam, I've done this with a service google provides and instead of providing a simple dot I use this url and modify a few parameters:

Character inside the pin (I've bolded the parameter that needs to change)
User imagehttp://chart.apis.google.com/chart?cht=d&chdp=mapsapi&chl=pin%27i%5c%27%5b1%27-2%27f%5chv%27a%5c%5dh%5c%5do%5cE1373E%27fC%5cFFFFFF%27tC%5cEFE5CD%27eC%5cLauto%27f%5c&ext=.png
User imagehttp://chart.apis.google.com/chart?cht=d&chdp=mapsapi&chl=pin%27i%5c%27%5bA%27-2%27f%5chv%27a%5c%5dh%5c%5do%5cE1373E%27fC%5cFFFFFF%27tC%5cEFE5CD%27eC%5cLauto%27f%5c&ext=.png

Pin colors (again, bolded the characters that need to change)
If you examine the URL, there are 3 hex colors at the end of it.
Inside: User imagehttp://chart.apis.google.com/chart?cht=d&chdp=mapsapi&chl=pin%27i%5c%27%5bA%27-2%27f%5chv%27a%5c%5dh%5c%5do%5c00ff00%27fC%5cFFFFFF%27tC%5cE1373E%27eC%5cLauto%27f%5c&ext=.png
Character:User imagehttp://chart.apis.google.com/chart?cht=d&chdp=mapsapi&chl=pin%27i%5c%27%5bA%27-2%27f%5chv%27a%5c%5dh%5c%5do%5cE1373E%27fC%5c00ff00%27tC%5cE1373E%27eC%5cLauto%27f%5c&ext=.png
Border:User imagehttp://chart.apis.google.com/chart?cht=d&chdp=mapsapi&chl=pin%27i%5c%27%5bA%27-2%27f%5chv%27a%5c%5dh%5c%5do%5cE1373E%27fC%5cffffff%27tC%5c00ff00%27eC%5cLauto%27f%5c&ext=.png

You can also define the extension by simply changing the .png to .jpg or .gif, etc. There are other parameters within it but I haven't looked any further.

So you asked how you get them on the map. Well what needs to happen is the URL needs to be in a field that is in the datasource you are populating the map with. So what I've done in the past is create a custom query within SQL Server Management Studio that dynamically creates this URL for you. Here is an example that gets the row index of selected :
SELECT CAST(ROW_NUMBER() OVER (ORDER BY EventStartDate) AS VARCHAR(3)) AS ColumnIndex, * FROM CONTENT_Event WHERE EventStartDate > '5/15/2013'
Then add the query to the document type you need to display the map points for and use a query datasource web part to retrieve that query. Then attach the query datasource to the basic google maps web part by using the query datasource ID. In the basic google maps web part set the Image property value to the ColumnIndex field we aliased in the SQL query. And that should be it, save your web parts and see how they display.

Sorry for the lengthy post but I'm hoping it helps, as I spent close to 3 days trying to find a good solution for this.

User avatar
Certified Developer 12
Certified Developer 12
preid@sherwood-group.com - 6/13/2013 5:23:44 PM
   
RE:Adding markers to Google map from External data source
Hi FroggEye,

Thanks so much for the detailed response, I really appreciate it!

I was finally able to feed my data into the map web part and get it to display on a test page, so that's a big help. Now I'm running into a new issue, and I'm wondering if you might have some insight on that as well.

On my test page, if I add my query to the data source web part and configure the map properties in the Page_Load event, everything works fine and the markers are displayed when I go to the page.

However, if I want to do something like have a blank map when the page loads, but click a button and then have the map populate, I can't get anything to happen. If I move the same code from Page_Load to the Button_Click method, the map remains blank. What am I missing to get the data to bind properly? I've seen snippets about adding code to the PreRender method for the map... that hasn't been helping so far, but I might be doing it wrong.

Thanks,
Pam

User avatar
Kentico Legend
Kentico Legend
Brenden Kehren - 6/14/2013 12:58:24 AM
   
RE:Adding markers to Google map from External data source
It is about timing and I have a thread here that talks about some of it. If that doesn't help, let me know and we can work something out.

User avatar
Member
Member
3allam-gmail - 8/15/2013 9:12:46 PM
   
RE:Adding markers to Google map from External data source
Dear FroggEye,

I need your help if possible, I've a data coming from a sp 2007 list " Name, Address, Lat, Long" all I need to do is to post pins on google maps for those data including info windows

can you refer a simple article for doing this? and your help will be much appreciated.

BR,
M.Allam

User avatar
Kentico Legend
Kentico Legend
Brenden Kehren - 8/18/2013 9:33:10 PM
   
RE:Adding markers to Google map from External data source
@3allam did you read the article I mentioned in the previous posts? There is great detail on how you can take data from an external source and add it to a google map web part. It will involve some minor custom coding and hooking up the right web parts on the page (as described in the article).

User avatar
Member
Member
3allam-gmail - 8/19/2013 3:21:28 AM
   
RE:Adding markers to Google map from External data source
@Frogg Thank you so much for your reply, much much appreciated, actually i'm not using webPart as i'm new to sharepoint and i'm writing my code in a usercontrol and publishing it so my issue is the map loads with the markers in the first time inside an update panel, but I change the location the map disappears and the issue was calling the function as follow

Page.ClientScript.RegisterStartupScript(GetType(), "MyKey", "initializeGoogleMap(" + jsDataArray + ");", true);

and I fixed it by calling it as follow

ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "MyKey", "initializeGoogleMap(" + jsDataArray + ");", true);

and again thank you for your reply :)

BR,
Mohamed Allam


User avatar
Kentico Legend
Kentico Legend
Brenden Kehren - 8/19/2013 7:09:04 AM
   
RE:Adding markers to Google map from External data source
Where is this Google Map residing? In your SharePoint site or within a Kentico site?