Using Google maps for a store locator
So, I built a simple store locator, spent hours trying to get it to work
and finally realized that the issue was Google maps won't allow you to
iframe the entire page. Is there any kind of work around for this to get
it to display? Or a way to do what I'm doing without iframes?
Ideally just the map itself would be great without the rest of the page,
but I can't find a way to do it with the api that doesn't require a
database or some sort of data file and there are just too many store
locations being changed all the time to keep up with that.
Here's what I have so far.
The markup:
<%@ Page Title="HelixMix | Where To Buy" Language="C#"
MasterPageFile="~/Site.master"
AutoEventWireup="true" CodeFile="WhereToBuy.aspx.cs"
Inherits="WhereToBuy" %>
<asp:Content ID="HeaderContent" runat="server"
ContentPlaceHolderID="HeadContent">
<script type="text/javascript">
function reloadFrame(Map) {
document.getElementById(Map).contentDocument.location.reload(true);
}
</script>
<script type="text/javascript">
function selectStore() {
document.write("Please select at least one store."); // Change
location on page...
}
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server"
ContentPlaceHolderID="MainContent">
<div id="Locator">
Zip code:
<asp:TextBox ID="TextBox1" placeholder="Zip code"
runat="server"></asp:TextBox>
<div class="personalSpace">Which store would you like to search
for? Please choose only one.</div>
<ul id="stores">
<li>Store name 1:
<asp:RadioButton ID="RadioButton1" runat="server" />
</li>
<li>Store name 2:
<asp:RadioButton ID="RadioButton2" runat="server" />
</li>
<li>Store name 3:
<asp:RadioButton ID="RadioButton3" runat="server" />
</li>
<li>Store name 4:
<asp:RadioButton ID="RadioButton4" runat="server" />
</li>
<li>Store name 5:
<asp:RadioButton ID="RadioButton5" runat="server" />
</li>
</ul>
<asp:Button ID="Button1" runat="server" Text="Find locations"
OnClick="Button1_Click" />
<div>
<iframe id="Map" runat="server"></iframe>
</div>
</div>
</asp:Content>
The code behind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
public partial class WhereToBuy : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Map.Visible = false;
}
protected void Button1_Click(object sender, EventArgs e)
{
Map.Visible = true;
string zipCode = TextBox1.Text;
string SearchURL = "";
int store = 0;
if (RadioButton1.Checked)
{
store = 1;
}
if (RadioButton2.Checked)
{
store = 2;
}
if (RadioButton3.Checked)
{
store = 3;
}
if (RadioButton4.Checked)
{
store = 4;
}
if (RadioButton5.Checked)
{
store = 5;
}
switch (store)
{
case 1:
SearchURL =
"https://www.google.com/maps/preview#!q=gnc+near%3A+";
break;
case 2:
SearchURL =
"https://www.google.com/maps/preview#!q=gnc+near%3A+";
//Change store name
break;
case 3:
SearchURL =
"https://www.google.com/maps/preview#!q=gnc+near%3A+";
//Change store name
break;
case 4:
SearchURL =
"https://www.google.com/maps/preview#!q=gnc+near%3A+";
//Change store name
break;
case 5:
SearchURL =
"https://www.google.com/maps/preview#!q=gnc+near%3A+";
//Change store name
break;
default:
Page.RegisterClientScriptBlock("Select store", "<script>\n
selectStore(); \n </script>"); //Rewrite flow to not load
iframe if this executes... Back to new search...
break;
}
Map.Attributes.Add("src", SearchURL + zipCode);
Page.RegisterClientScriptBlock("Reload", "<script>\n
reloadFrame('Map'); \n </script>");
}
}
No comments:
Post a Comment