Geek Answers Handbook

Google Map API in WordPress without a plugin?

I want to just add a google map using google maps api to one of my pages in WordPress. Is there an easy way to just copy and paste the "Hello, World" card code somewhere so that the card appears on the page?

thanks

+4
source share
1 answer

Yes, there is no need for a plugin for something like that. First of all, you would include Google maps maps in header.php or you could queue

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>

Then I usually add the following to header.php - this adds the conditional code to the tag for the page containing only the map (in this case, page 374);

 <body <?php if (is_page(374)) { echo 'onload="initialize()" onunload="GUnload()"'; } ?>>

And then I will create a custom template for the contact page (since the map is usually displayed on this page), and the template for this page has something like the following. Yes, this is probably a little longer for the sample code, but I just give you a real example that contains an animated marker that can be clicked to show your client address. You can change the built-in dimensions to suit your design, and you can also move the map so that the marker is not right, in the middle of it.

  <div id="contact-content"> <script type="text/javascript"> function initialize() { var leeds = new google.maps.LatLng(53.80583, -1.548903); var firstLatlng = new google.maps.LatLng(53.80583, -1.548903); var firstOptions = { zoom: 16, center: firstLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_leeds"), firstOptions); firstmarker = new google.maps.Marker({ map:map, draggable:false, animation: google.maps.Animation.DROP, title: 'Your Client', position: leeds }); var contentString1 = '<p>The Address<br />Of your client<br />in<br />here</p>'; var infowindow1 = new google.maps.InfoWindow({ content: contentString1 }); google.maps.event.addListener(firstmarker, 'click', function() { infowindow1.open(map,firstmarker); }); } </script> <div class="map"> <div id="map_leeds" style="width: 600px; height: 600px"></div> </div> </div>

If someone else does it differently, it’s better, I would really like to see him, but I used it on many sites and it works very well.

+9
source

More articles:


All Articles