استفاده و بهره برداری از نقشه جدید گوگل در وب سایت و سفارشی سازی آن

آیا قصد دارید از نقشه جدید گوگل در سایت خود استفاده نمایید؟ هنوز می توانید از لینک قبلی برای ایجاد نقشه گوگل در سایت به صورت آیفرم استفاده نمایید و سپس آن را کاربر تبدیل به نقشه جدید نماید. اما راه دیگری نیز وجود دارد

Maps Engine Lite

Maps Engine Lite به شما امکان می دهد نقشه دلخواه خود را در گوگل طراحی نموده و را در سایت خود استفاده نمایید. شما برای این ابزار می بایست در وارد گوگل شوید.

gm-map-engine-lite

پس از وارد شدن به این سیستم بر روی کلید new map کلیک نمایید.

gm-new-map

سپس آدرس خود را در بخش search وارد نمایید تا نقشه آدرس درخواستی شما را نمایش دهد.

gm-search

بر روی نقشه مکان خود را مشخص نمایید و در پاپ آپ اطلاعات خود را وارد نمایید.

gm-title

شما می توانید به نقشه یک layer جدید اضافه نمایید و در آن اطلاعات خود را وارد نمایید.

gm-layer

در مرحله بعدی گوگل به شما امکاناتی برای به روز رسانی و مدیریت نقشه را می دهد.

gm-icon

همچنین در نقشه جدید گوکل این امکان را به شما می دهد که قالب دلخواه خود را مشخص نمایید.

gm-themes

به اشتراک گذاری نقشه

پس از آنکه نقشه را مطابق با خواست خود طراحی نمودید می بایست بر روی کلید share کلید نمایید و حالت نمایش آن را از “Private”به“Public” تغییر دهید زیرا برای نمایش در سایت می بایست دسترسی نقشه Public باشد.

gm-public

سپس بر روی فلدر کلیک نمایید و سپس “Embed on my site” را کلیک نمایید.

gm-embed

گوگل به شما یک آیفرم ارائه خواهد داد که نمایش نقشه شماست. و می توانید آن را در سایت خود استفاده نمایید.

<iframe src="http://mapsengine.google.com/map/embed?mid=z-BEFzFo7gdM.kYdiUKVQpQQI" width="640" height="480"></iframe>

نمایش نقشه در تمامی مرورگرها

برای آنکه نقشه شما در تمامی مرورگرها و حتی موبایل به خوبی نمایش داده شود، نقشه را در دایو ایجاد نمایید

<div class="fluid-wrapper">

<iframe src="http://mapsengine.google.com/map/embed?mid=z-BEFzFo7gdM.kYdiUKVQpQQI" width="640" height="480"></iframe>

</div>

و کد css زیرا را به دایو خود اختصاص دهید.

.fluid-wrapper {

    position: relative;

    padding-bottom: 56.25%; /* 16:9 */

    height: 0;

}

.fluid-wrapper iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

        border: none;

}

آدرس:

استفاده از نقشه جدید گوگل در وب سایت