How to make a service area map

[turkspartan]

What does it take to make a map like this? Couldn't find anything on it. I don't need a map this big, but I need to highlight where we serve in the Northern Virginia Metropolitan area.http://www.maidsinblack.com/service-area/Thanks!

[Ingolme]

It's just a background picture with some elements placed ontop of it using position: absolute

 

The HTML structure would be something like this:

<div class="map">    <div class="box" style="top: 200px; left: 300px;>City 1</div>    <div class="box" style="top: 142px; left: 30px;>City 2</div>    <div class="box" style="top: 280px; left: 120px;>City 2</div></div>

With CSS:

.map {    position: relative; /* Elements inside will be positioned relative to the top right corner */    width: 800px; /* Width of background image */    height: 600px; /* Height of background image */    background-image: url(map.png);    background-position: top left;}.box {    width: 100px;    height: 40px;    background-image: url(speech-bubble.png);    background-position: top left;    position: absolute;}

[turkspartan]

Haha, sometimes I overthink things

Thank you!

 

How would I make a cool map like that of just northern virginia or something? Should I just try to find a plain map and photoshop it?

[davej]

If you want an active, zoom-able Google map then see...

 

https://developers.google.com/maps/documentation/javascript/tutorial

Edited November 12, 2013 by davej

[shakir]

Thanks @Ingolme for share this all code i hope it will helpful for me.