Trending

Post Top Ad

Monday, November 18, 2019

How to add Google map in your site?


In this short content today I will show you how to add a Google map in your site with Marker.

HTML

</div id="map"></div>

CSS

#map{
display: block;
width: 100%;
height: 350px;
margin: 0 auto;
-moz-box-shadow: 0px 5px 20px #ccc;
-webkit-box-shadow: 0px 5px 20px #ccc;
box-shadow: 0px 5px 20px #ccc;
}

JavaScript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/prettify.js"></script>
<script type="text/javascript">
var map;
jQuery(document).ready(function(){
prettyPrint();
map = new GMaps({
div: '#map',
lat: 35.7333286,
lng: 140.8232659,
});
//If you want to addMarker you need to call prettify.ja
map.addMarker({
lat: 35.7333286,
lng: 140.8232659,
});
});
</script>

No comments:

Post a Comment

Post Top Ad